bug: Modal in Ionic 6 not scrolling to end

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

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

Current Behavior

We have modals with an IonHeader and IonContent element. Whenever the content takes up more (vertical) space than available, the IonContent displays a scrollbar. In Ionic React 5, the vertical scrollbar allows us to correctly scroll to the bottom of the content.

We recently upgraded from Ionic React 5 to Ionic React 6. After the upgrade to Ionic React 6, you can still scroll, but the bottom part of the IonContent is not shown. You cannot scroll the last part into the view.

When inspecting the modal in an Element Inspector, we see that the height of the IonHeader is not taken into account when determining the size of the IonContent. In other words, the IonContent height is being “oversized” with the same amount of pixels as the height of the IonHeader. That causes the y-scroll to not work as expected: we cannot scroll to bottom part of the content into view.

Expected Behavior

Expected behavior is that we are able to scroll to the bottom and that it will display the bottom content.

Steps to Reproduce

See https://codesandbox.io/s/ionic6modals-ht6rh.

In Tab1 we have an IonModal containing an IonHeader and IonContent. You can scroll, but not scroll so that the last item (with text *** END ****) is visible.

In Tab2 we have an IonModal containing an IonContent but no IonHeader. You can scroll, and also see the last item (with text *** END ****).

Code Reproduction URL

https://codesandbox.io/s/ionic6modals-ht6rh

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.0.1

Capacitor:

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

Utility:

cordova-res (update available: 0.15.4) : 0.15.1 native-run : 1.5.0

System:

NodeJS : v16.13.1 (/usr/local/Cellar/node@16/16.13.1/libexec/node) npm : 8.1.2 OS : macOS Monterey

Additional Information

Note that the scroll behavior is correct when wrapping the IonHeader and IonContent in an IonPage like so:

<IonModal>
  <IonPage>
    <IonHeader><IonToolbar><IonTitle>modal title</IonTitle></IonToolbar></IonHeader>
    <IonContent>lots of content here</IonContent>
  </IonPage>
</IonModal>

But I’m hesitant to do that since IonPage is used for lifecycle behavior, and we are warned 😃 to not wrap elements in an IonPage (e.g. https://forum.ionicframework.com/t/what-about-ion-page-or-ionpage/185083/2).

[sean-perkins]

@rluttikhuizen thanks for reporting this issue.

This looks like a regression to inline overlay components in our React implementation. I’ll create a PR to address this soon.

[rluttikhuizen]

Fix is part of release 6.0.2 which is released 👍