Main page shrinks when keyboard shows up in the bottom sheet modal

[tonysm]

Hey, folks. I've noticed that when you have an input field in a bottom modal sheet and you focus on it to type, the viewport for the page behind the modal shrinks a bit, doesn't matter if we specify the responsive meta tag in the document body.

This seems to be caused by the android:windowSoftInputMode="adjustResize" defined in the AndroidManifest.xml. Changing that to adjustPan, for instance, solves the shrinking problem. But according to the Android documentation, this doesn't seem to be desirable:

The activity's main window is not resized to make room for the soft keyboard. Rather, the contents of the window are automatically panned so that the current focus is never obscured by the keyboard and users can always see what they are typing. This is generally less desirable than resizing, because the user may need to close the soft keyboard to get at and interact with obscured parts of the window.

In other words, changing this to adjustResize makes the shrinking disappear, but the modal doesn't resize, which means the input will be hidden behind the keyboard (see attached video).

The demo project seems to suggest that forms (URLs ending with /new specified in the configuration.json) can open in a bottom sheet modal, but if the form has an input, the user will see this shrinking. I've changed my app to use web modal, not a bottom sheet (same one defined in the login route in the configuration.json), since this one doesn't show the page in background (it takes the whole height).

Is a solution to this problem that would allow me to use the bottom modal sheet? Or is my workaround is really the best approach for forms with inputs to avoid the shrinking viewport issue?

How to Reproduce

1. Add an input to the views/new.ejs file:

<h1 class="page-title">A Modal Webpage</h1>
<p>
  This screen was presented as a modal based on the path configuration file. Submitting this form will redirect back to the home screen. The native app will receive that visit proposal and initiate a new visit.
</p>

<p>
  Notice that submitting the form will also cause it to dismiss the modal. That's handled by the demo app's router.
</p>

<form method="post">
+ <label for="name" class="display --block space --bottom-s">What is your name?</label>
+ <input type="text" name="name" id="name" placeholder="Type your name…">
  <button type="submit">Submit Form</button>
</form>

2. Run the Turbo Android Demo app
3. Click in the "Load a webpage modally"
4. Tap on the input to trigger the keyboard
5. See the viewport shrinking behind the modal (you can move the modal down a bit - see video below)

Video With The Shrinking Problem

2021-12-02_23-11-01.mp4

Video With `adjustPan`

2021-12-02_23-14-01.mp4