bug: Keyboard shrinks modal and covers input on tablets

[SaroGFX]

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

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

On larger displays such as tablets, the keyboard will push up the modal, rather than overlaying it. This creates the issue that your input gets hidden as soon as you focus it and the keyboard expands.

This screenshot is from an actual iPad: The input is actually hidden and you have to scroll down.

Expected Behavior

The modal height should ignore the keyboard, also on tablets.

Steps to Reproduce

Create a card modal and put an input in it that triggers the keyboard.

Code Reproduction URL

No response

Ionic Info

Capacitor:

Capacitor CLI : 3.5.1 @capacitor/android : 3.5.1 @capacitor/core : 3.6.0 @capacitor/ios : 3.6.0

Utility:

cordova-res : 0.15.4 native-run : 1.6.0

System:

NodeJS : v16.14.0 (/usr/local/bin/node) npm : 8.3.1 OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks for the issue. By default, Capacitor's Keyboard plugin will resize the webview when the keyboard opens. This means that elements such as your modal will also resize.

It's hard to provide much assistance as I do not have access the app provided in the screenshots, but I recommend trying different settings for the Keyboard config (https://capacitorjs.com/docs/apis/keyboard#configuration) to see if there is a configuration that works for your use case.

[SaroGFX]

Thanks for te reply. It's a great feature that the webview gets resized, but I don't think the bottom of a modal should also be impacted. As this will cover the input. iOS native apps also don't do this.

We still want the inputs to be pushed up, so disabling that feature in modals isn't an option.

[SaroGFX]

The issue is actually even bigger iPhones in landscape, it leaves the modal only with the header.

[snowwolfjay]

The issue is actually even bigger iPhones in landscape, it leaves the modal only with the header.

Hey, what's your solution then ...

I meet this too, just ignored and just use a fake input el inside form and when click it popup a fullscreen view with single input.

-- Dont know why the inpute providers not customize the keyboarder with landscape, it should split into two part, one left side and on right.

[sean-perkins]

Hello, following up on this issue.

Ionic's default behavior with Capacitor is to have the ion-app resize when the keyboard is presented or dismissed. This causes the visual resize of the modal in your first screenshot.

As Liam mentioned, Capacitor does allow for customizing the resize behavior of the native web view. Disabling resize will create an experience closer to the "New message" interface, but without the input automatically scrolling into the visible viewport.

I understand that this isn't your desired behavior, but is a technical limitation of rendering the UI in a webview and either allowing the webview to resize or not, when the keyboard is presented. You can fine tune this behavior by setting and resetting the resize mode when the modal is presented/dismissed, you may also try experimenting with disabling the resize as an input is clicked, focused, etc.

If you can provide a reproduction example to test with, we may be able to provide additional insight. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!