bug: Unable to "Swipe To Close" IonModal when using IonContent within modal

[uncvrd]

Bug Report

Ionic version:

[x] 5.2.2

I have a certain use case where I need to use IonSlides within a IonModal. The documentation states that it is necessary to contain the IonSlides within an IonContent. However, when I do this, I am unable to SwipeToClose the modal when I'm in ios mode. When I remove the IonContent tag from within the modal, I am able to swipe the modal closed.

Expected behavior:

I expect to be able to use an IonContent within an IonModal and should be able to swipeToClose when in ios mode.

Related code:

<IonModal
    isOpen={true}
    swipeToClose
    mode="ios"
>
  {/* Remove this IonContent and you'll be able to swipe to close */}
    <IonContent>

    </IonContent>
</IonModal>

Here's a github repo: https://github.com/uncvrd/ionic-modal-content-s2c

• The only relevant code is in the Home.tsx.
• Run ionic serve.
• I made the modal open on page load.
• Try to swipe down to close the modal, which is not possible.
• Remove the IonContent, reload, and now you'll be able to swipe to close

Ionic info:

Ionic:

   Ionic CLI       : 6.7.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.2.2

Capacitor:

   Capacitor CLI   : 2.2.0
   @capacitor/core : 2.2.0

Utility:

   cordova-res (update available: 0.15.0) : 0.14.0
   native-run                             : 1.0.0

System:

   NodeJS : v12.16.2 (/usr/local/bin/node)
   npm    : 6.14.4
   OS     : macOS Catalina

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. The swipe to close modal requires that you swipe to close from the header, so modals that do not have a header cannot be swiped.

There is a PR open that lets you swipe from the content, but it involves some hacks so it needs work before it gets merged: #21227.

[uncvrd]

Thanks @liamdebeasi missed that PR when typing this out

[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.