Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: swipe to close on card modal conflicts with nav swipe to go back #25327

Closed
4 of 7 tasks
liamdebeasi opened this issue May 20, 2022 · 2 comments · Fixed by #25333
Closed
4 of 7 tasks

bug: swipe to close on card modal conflicts with nav swipe to go back #25327

liamdebeasi opened this issue May 20, 2022 · 2 comments · Fixed by #25333
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@liamdebeasi
Copy link
Contributor

Prerequisites

Ionic Framework Version

  • v4.x
  • v5.x
  • v6.x
  • Nightly

Current Behavior

When using ion-nav inside of a card modal, it is impossible to swipe to go back because the swipe to close gesture always takes priority.

Expected Behavior

I would expect to be able to swipe to go back in a card modal even when using ion-nav.

Steps to Reproduce

  1. Clone repo.
  2. Run npm install.
  3. Run ionic serve.
  4. Click the cog icon.
  5. Click "Name".
  6. Attempt to swipe to go back. Observe that you cannot swipe to go back.

Note: This only happens in iOS mode.

Code Reproduction URL

https://github.com/liamdebeasi/vue-nav-sample

Ionic Info

Ionic:

Ionic CLI : 6.18.3-testing.0 (/Users/liamdebeasi/.nvm/versions/node/v16.11.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 6.1.6

Capacitor:

Capacitor CLI : 3.5.1
@capacitor/android : not installed
@capacitor/core : 3.5.1
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 1.6.0

System:

NodeJS : v16.11.1 (/Users/liamdebeasi/.nvm/versions/node/v16.11.1/bin/node)
npm : 8.0.0
OS : macOS Monterey

Additional Information

No response

@ionitron-bot ionitron-bot bot added the triage label May 20, 2022
@liamdebeasi
Copy link
Contributor Author

This seems to have always been an issue, but it is more visible now that you can swipe to close on the content.

Both the modal and the swipe back gestures have the same priority which is probably why they are clashing.

Modal: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/modal/gestures/swipe-to-close.ts#L280
Swipe to go back: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/gesture/swipe-back.ts#L80

Changing the STGB priority to 41 seems to fix the issue while also allowing the swipe to close gesture to work.
Alternatively, it may be safer to change the swipe to close priority to 39 as changing the STGB priority would affect a larger surface area than changing the modal priority.

@liamdebeasi liamdebeasi added package: core @ionic/core package type: bug a confirmed bug report labels May 20, 2022
@liamdebeasi liamdebeasi changed the title bug: swipe to close on content conflicts with nav swipe to go back bug: swipe to close on card modal conflicts with nav swipe to go back May 20, 2022
@ionitron-bot
Copy link

ionitron-bot bot commented Jun 22, 2022

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Jun 22, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant