Ionic 7 modal resizes even in desktop browser when input receives focus

Ionic Framework Ionic React
1

So, on mobile it works perfectly and as expected. When an input receives focus, the modal resizes and makes room for the keyboard, so the input field can still be seen. This was actually the reason I upgraded to Ionic 7

However it also does it on the desktop when viewing the web page. Since there’s no actual keyboard shown here, it makes no sense to resize the modal (the modal is also shown on the center of the screen, so even if there was a keyboard it would look weird).

Does anyone have a work around for this behavior?

2

This sounds like a similar issue mentioned in #27257 and #27286. If so, it should be released in v7.0.5 as it’s currently in the nightly build.

EDIT
Maybe this is actually intended?

The keyboard offset is there to ensure that inputs have enough scroll space such that the inputs are not hidden by the keyboard. When running in a browser we don’t know the exact keyboard size ahead of time, so we estimate it to be 290px. - source

3

Thanks for your quick answer. That does sound very similar.

I think if this only happened in the “mobile modal” (as in viewports that are less than 768 pixels wide), I could even forgive it happening on desktop. But as soon as screen sizes go above 768 the modals are shown centered on the screen anyway in a kind of “desktop mode”. That same breakpoint should at the very least be used to prevent making room for any keyboard.

The best solution would of course be to somehow identify if it’s a desktop/mobile browser at all, and only if it’s mobile make room for a keyboard.

4

Did this ever get resolved? I just experienced the same problem. The whole screen jumping up on a desktop browser when there’s no keyboard appearing is jarring and unprofessional. I’m using Ionic/CLI 7.1.5 with Opera GX on a Mac, if that’s helpful.