feat: swipe to close modal from content

[nielsdewulf]

Feature Request

Ionic version:

[x] 5.3.2

Describe the Feature Request

Expose swipe back gesture for customization at https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/modal/modal.tsx#L29 . I wish to change the canStart function to disable the gesture when scrolling still needs to happen in the ion-content. If its scrolled to the top, the gesture can happen.

Describe Preferred Solution

Allow to give a custom createSwipeToCloseGesture to the Modal.

Describe Alternatives

Allow to change the individual gesture functions in the already made swipeToCloseGesture

Related Code

Additional Context

[liamdebeasi]

Thanks for the feature request. Can you please describe your use case for this feature?

[nielsdewulf]

Hi @liamdebeasi, I want to create a custom SwipeToCloseGesture. The issue persists when you have scrollable content inside the modal and you use the gesture. It doesn't work since the canStart function inside the gesture returns false when the target is ion-content. I wish to override the canStart function so that I can check if the scrollable content is scrolled to the top. If that's the case I want to allow the gesture so that the modal can be swiped away.

Hope this clarifies my situation a bit more.

[liamdebeasi]

From what it sounds like, you want to be able to swipe to close the modal from the content only if the content is scrolled to the top?

[nielsdewulf]

Yes, which incidentally requires me to customize the swipe to close gesture.

[liamdebeasi]

Thanks - that use case makes sense. There is an open PR that adds this functionality: #21227. There are still some issues with it, so I may work on it myself. I think I would rather add this than expose the entire gesture though.

[simion]

I was looking for something similar myself :)
Swipeable modals in ios can be swiped down by pilling the content, if scroll has reached top.
Something similar on ionic would be awesome :)

[laocker96]

Sorry guys this is not working for me ... I'm using IonContent inside an IonModal with swipeToClose={true} Is this currently working or still being fixed?

-----------------------------------------------------------
IONIC VERSION: @ionic/react: 5.5.4

[liamdebeasi]

This has not been resolved. When it is, this issue will be closed and you should receive an email notification.

[laocker96]

Thank you for your fast response. Waiting for updates have a good day, Simone Il giorno gio 3 giu 2021 alle ore 14:36 Liam DeBeasi < ***@***.***> ha scritto:

…

This has not been resolved. When it is, this issue will be closed and you should receive an email notification. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#22046 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHXWEZWM2ZK4SWSFVYAFFI3TQ5ZMXANCNFSM4Q7R3FCA> .

[katche70]

This would indeed be a great feature

[liamdebeasi]

Hi everyone,

I am working on implementing this with the card style modal. Can everyone test this dev build and let me know if you run into any issues?

6.1.3-dev.11650987132.14e7a957

Note: This dev build applies to any Ionic Framework package (vue, angular, etc).

[liamdebeasi]

Thanks for the issue. This has been resolved via #25185, and a fix will be available in an upcoming release of Ionic Framework.

Please feel free to continue testing, and let me know if you run into any issues.

[ionitron-bot]

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.