You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v8.x
Current Behavior
When adding a input field or text area in an IonFooter, the elements are duplicated on first open & when the animation to other breakpoints starts. This only occurs when the scrollToExpand property is set to false.
When the sheet modal is closed and reopened on the same breakpoint again, there is only one text area element rendered.
Expected Behavior
I'm expecting only one text area element rendered, as I've defined in my codebase.
Notice the sheet modal opening with 2 rendered text area's
Now close the modal by dragging the sheet modal down
Click the open modal button
Notice the footer is now (correctly) rendering only one text area
Now drag the sheet modal to its second breakpoint
Notice that a second text area appears.
The same can be done with the IonInput. I've left that component commented out so that it can be easily reproduced with that modal as well. Make sure to refresh the page when you do, as the modal needs to be rendered again for the changes to take effect.
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
When adding a input field or text area in an IonFooter, the elements are duplicated on first open & when the animation to other breakpoints starts. This only occurs when the scrollToExpand property is set to false.
When the sheet modal is closed and reopened on the same breakpoint again, there is only one text area element rendered.
Expected Behavior
I'm expecting only one text area element rendered, as I've defined in my codebase.
Steps to Reproduce
The same can be done with the IonInput. I've left that component commented out so that it can be easily reproduced with that modal as well. Make sure to refresh the page when you do, as the modal needs to be rendered again for the changes to take effect.
Code Reproduction URL
https://github.com/ijsje71/footer-with-input-text-in-sheet-modal#
Ionic Info
Ionic:
Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.5.3
Capacitor:
Capacitor CLI : 7.2.0
@capacitor/android : not installed
@capacitor/core : 7.2.0
@capacitor/ios : 7.2.0
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v22.14.0
npm : 10.9.2
OS : macOS Unknown
Additional Information
Since this is related to the expandToScroll false property & the sheet modal animations; it may be related to these issues:
#30315
#30312
The text was updated successfully, but these errors were encountered: