[BUG] - Modal doesn't handle well when the keyboard appears on iOS

[bambatta]

NextUI Version

2.4.8

Describe the bug

Modal was taken with form in accuracy with documentation. However, after focusing on the input field, when the iOS keyboard appears, the Modal is inexplicably positioned with extra indents. If you hide the keyboard and open it again, the bug always looks different. If the modal has no forms, correspondingly the keyboard does not appear then it works fine.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1.Create a web page with a modal dialog (in my сase used placement: bottom prop). 2.Within the modal, add at least one input field. 3.Open a web page on your iOS device using Safari or Chrome. 4.Tap the input field in the modal to open the iOS keyboard. 5.Try opening and closing the keyboard a few times.

Expected behavior

When the keyboard appears, the modal should take the exact position without unnecessary animations and jerks regardless of the position. And if the prop bottom is displayed when the keyboard appears, the modal should be pressed against it with its lower part.

Screenshots or Videos

No response

Operating System Version

iOS 17.7

Browser

Chrome

[linear[bot]]

ENG-1490 [BUG] - Modal doesn't handle well when the keyboard appears on iOS

[aratai]

Having the same issue as well.

[defaultgnome]

Same here, tested on NextUI v2.6.8. on iPhone and Android. Android work as expected. and iPhone behave weirdly: when focusing on an input field the keyboard open and the modal reduce it's height as expected, but the input field is hidden until i start typing.

[KlutchKyle]

[BUG] - MODAL GLITCH ON IOS (SAFARI BROWSER) #4308

This comment fixed it for me.

[wingkwong]

@ArielBenichou can you also check if that comment fixes your problem?

[defaultgnome]

@wingkwong i'm using NextJs, and i've already setup the device scale and zoom level correctly.

Here a screen recording of the issue, you have iOS on the left and Android on the right:

https://github.com/user-attachments/assets/7157ae40-1352-491f-bc27-17a26c032752

[AmandaOliver]

Hello, I'm experiencing the same issue using React with CRA (client side), the behaviour in iPhones is quite inconsistent and makes the modals unusable in iPhone devices.

[rickymcgeehan]

I am also experiencing this issue - any news?

[tm-brg]

Any fix for this ? I am facing similar issue when I set focus on the input for the first time, the keyboard appears, the modal goes down and become not visible.

[Loori-R]

FYI: This doesn't completely resolve the issue but can help improve the behavior.
Source: paul.ren/note/2024-288

<Modal
  placement="center"
  shouldBlockScroll={false}
  classNames={{ wrapper: "items-start h-auto", base: "my-auto" }}
>
  ...
</Modal>

[juandiegotroconis]

FYI: This doesn't completely resolve the issue but can help improve the behavior. Source: paul.ren/note/2024-288

<Modal
  placement="center"
  shouldBlockScroll={false}
  classNames={{ wrapper: "items-start h-auto", base: "my-auto" }}
>
  ...
</Modal>

This solved my issue on iPhones, awesome!

[imbazim]

FYI: This doesn't completely resolve the issue but can help improve the behavior. Source: paul.ren/note/2024-288

<Modal
  placement="center"
  shouldBlockScroll={false}
  classNames={{ wrapper: "items-start h-auto", base: "my-auto" }}
>
  ...
</Modal>

This should be the default code in Modal. This fixed the weird problems on iOS. I think shouldBlockScroll={false} should be false by default.

[n-lavrenko]

The same issue. I guess I will create own wrapper around Modal to fix all problems that I have with Modal + Autoselect / Input. Because I can't see any other ways to develop my app farther.

[jalvarezz13]

This issue is a regression of a previously reported and fixed issue #2837

It should not reoccur with every minor upgrade of the library. Please consider adding specific test cases for this scenario to prevent future regressions.

PD: The issue persists in the last version (v2.8.2)