bug: Clicking an ion-input inside of modal with header causes header to disappear (Android only)

[typefox09]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

There is an issue with the ion-input element inside an ion-modal containing an ion-header, where clicking inside the input causes the header component to disappear.

This issue only occurs on Android, seems to be due to the page shifting to focus on the input field.

This issue doesn't occur when the ion-input as at the top of the screen (as the scroll is easy here).

I have tried setting resizeOnFullScreen: true as per the instructions on the Capacitor docs (although this app isn't in full screen mode), however that didn't help.

https://capacitorjs.com/docs/apis/keyboard

Expected Behavior

Ion-header should not dissapear

Steps to Reproduce

1. Create blank ionic starter tempalte
2. Add an ion-modal (is-open=true), ion-header, and ion-content
3. Place enough content inside of the modal so there is scroll
4. Place the ion-input towards the bottom of the page
5. Create Android app
6. Run app and click on input field

Code Reproduction URL

https://github.com/typefox09/modal-test-2

Ionic Info

Ionic:

Ionic CLI : 6.20.6 (/opt/homebrew/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 7.0.6

Capacitor:

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

Utility:

cordova-res : not installed globally native-run : 1.7.2

System:

NodeJS : v20.1.0 (/opt/homebrew/Cellar/node/20.1.0/bin/node) npm : 9.6.4 OS : macOS

Additional Information

No response

[liamdebeasi]

Thanks for the report. I'm not able to compile your application:

 ERROR  Failed to compile with 1 error                                                             10:02:04 AM

[eslint] No ESLint configuration found in /Users/liamdebeasi/ion-input-test/src.

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
 ERROR  Error: Build failed with errors.
Error: Build failed with errors.
    at /Users/liamdebeasi/ion-input-test/node_modules/@vue/cli-service/lib/commands/build/index.js:207:23
    at /Users/liamdebeasi/ion-input-test/node_modules/webpack/lib/webpack.js:148:8
    at /Users/liamdebeasi/ion-input-test/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/Users/liamdebeasi/ion-input-test/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/liamdebeasi/ion-input-test/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at Cache.shutdown (/Users/liamdebeasi/ion-input-test/node_modules/webpack/lib/Cache.js:150:23)
    at /Users/liamdebeasi/ion-input-test/node_modules/webpack/lib/Compiler.js:1228:15
    at Hook.eval [as callAsync] (eval at create (/Users/liamdebeasi/ion-input-test/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/liamdebeasi/ion-input-test/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.close (/Users/liamdebeasi/ion-input-test/node_modules/webpack/lib/Compiler.js:1221:23)

Can you double check your repo?

[typefox09]

Sorry about that, I've updated the repository.

https://github.com/typefox09/modal-test-2

[typefox09]

I've noticed this is related to #27470 https://github.com/ionic-team/ionic-framework/issues/27470#issuecomment-1548016708 . When adding an ion-page around the modal does seem to prevent the header from getting lost.

[liamdebeasi]

Thanks for checking! It looks like this is the same as https://github.com/ionic-team/ionic-framework/issues/27470, so I am going to merge the two. I have a dev build in https://github.com/ionic-team/ionic-framework/issues/27470 if you are interested in testing a proposed fix.

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