On_Screen_Keyboard_Causes_Modal_to_Resize_Incorrectly_on_Mobile

[A-is1]

NextUI Version

“@nextui-org/react” 2.4.2

Describe the bug

When a modal containing a textbox is opened on a mobile device and the on-screen keyboard is triggered, the modal becomes too small. This forces the user to scroll within the modal to see the rest of the content, even though there is plenty of screen space available. The issue only occurs when the on-screen keyboard is visible, and the input field is located near the bottom of the modal.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Open the modal that contains a textbox on a mobile device.
2. Tap on the textbox to trigger the on-screen keyboard.
3. Observe that the modal becomes smaller in height and the textbox is partially hidden by the keyboard.
4. The user must scroll within the modal to see the rest of the content or to access the textbox.
5. If the keyboard is dismissed, the modal returns to its original size.

Expected behavior

The modal should not shrink in a way that forces scrolling when the keyboard is visible. If there is enough space, the modal should occupy the available viewport height without taking up the entire screen.

Screenshots or Videos

Operating System Version

IOS 13 mini

Browser

Safari

[linear]

ENG-1543 On_Screen_Keyboard_Causes_Modal_to_Resize_Incorrectly_on_Mobile

[wingkwong]

1. please try on latest version
2. if the issue still exists, please share a minimal reproducible environment.