question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItΒ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: ion-modal `swipeToClose` no longer has any effect when `mode=ios` without `presentingElement`

See original GitHub issue

Prerequisites

Ionic Framework Version

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

Current Behavior

Using swipeToClose on modals no longer works unless using the new card style modal. We had previously used this function even on normal modals to allow users to swipe and dismiss.

Expected Behavior

swipeToClose should stay available without presentingElement. (Note, I see this is deprecated, but the functionality has been removed in a breaking way and it would be nice if this could stay available (not just for the new card-style modals.)

Steps to Reproduce

Create a modal that does not have a presentingElement (e.g. just a plain modal, not a card, not a bottom-sheet).

        this.modal = await this.modalCtrl.create({
          component: MyModalComponent,
          swipeToClose: true,
          showBackdrop: true,
          animated: true,
          mode: 'ios',
        });

The modal will display but not be swipable. This previously worked in Ionic 6.1.1 but is now broken in 6.1.7.

Working 6.1.1: https://user-images.githubusercontent.com/362329/170589579-22176427-8a7c-4a2a-abb6-675f3f7765c8.mov

Broken 6.1.7: https://user-images.githubusercontent.com/362329/170589426-a23668cc-6a28-4361-b23e-da29bb0dfcfd.mov

Code Reproduction URL

No response

Ionic Info

mshark:topdecked-unified lincoln$ ionic info [WARN] Error loading @ionic/angular package.json: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath β€˜./package’ is not defined by β€œexports” in /Users/lincoln/projects/maritlabs/topdecked-unified/node_modules/@ionic/angular/package.json

Ionic:

Ionic CLI : 6.19.0 (/Users/lincoln/.nvm/versions/node/v14.19.0/lib/node_modules/@ionic/cli) Ionic Framework : not installed @angular-devkit/build-angular : 14.0.0-rc.2 @angular-devkit/schematics : 14.0.0-rc.2 @angular/cli : 14.0.0-rc.2 @ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.4.3 @capacitor/android : 3.4.3 @capacitor/core : 3.4.3 @capacitor/ios : 3.4.3

Utility:

cordova-res : not installed globally native-run (update available: 1.6.0) : 1.5.0

System:

NodeJS : v14.19.0 (/Users/lincoln/.nvm/versions/node/v14.19.0/bin/node) npm : 6.14.16 OS : macOS Monterey

─────────────────────────────────────────────────

 Ionic CLI update available: 6.19.0 β†’ 6.19.1
      Run npm i -g @ionic/cli to update

─────────────────────────────────────────────────

mshark:topdecked-unified lincoln$

Additional Information

No response

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:31 (11 by maintainers)

github_iconTop GitHub Comments

1reaction
lincolnthreecommented, May 27, 2022

Sounds good to me πŸ˜ƒ Closing this. Much appreciated for everything as always, Liam.

1reaction
lincolnthreecommented, May 27, 2022

backdropBreakpoint is a feature exclusive to the sheet modal, so I would not expect it to work with the card modal.

Right, just had to say it out loud πŸ˜ƒ

Read more comments on GitHub >

github_iconTop Results From Across the Web

ion-modal: Ionic Mobile App Custom Modal ... - Ionic Framework
Note: The swipeToClose property has no effect when using a sheet modal as sheet modals must be swipeable in order to be usable....
Read more >
Ionic 5 - SwipeToClose is impossible - Stack Overflow
SwipeToClose Gesture only works on IOS mode and could be applied on card modals and will be deprecated by next release.
Read more >
ion-modal: Ionic Mobile App Custom Modal API ... - Heroku
ion-modal is a dialog that appears on top of mobile app content, and must be dismissed before interaction resumes. Learn more about custom...
Read more >
Ionic 6 Bottom Sheet | Complete guide on ion-modal - YouTube
instagramapp #CodingTechnyks #Technyks #Ionic UI #Angularβ–» Hello Friends, Welcome to @CodingTechnyks, I brought to you "Ionic 6 BottomΒ ...
Read more >
Ionic 5 - 16 Ion-modal (in detail) - YouTube
It is useful as a select component when there are a lot of options to choose from, or when filtering items in a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found