[Dialog] Dialogs should adjust position when mobile keyboard is open

[borabaloglu]

Feature request

Summary

Dialogs on mobile could be more responsive, particularly in handling input fields. This is not limited to dialogs but applies broadly to modals. The document should adjust its position dynamically to keep the input field visible when the keyboard is open.

Additionally, there's a noticeable jumping effect when the keyboard appears, which affects the user experience. This behavior is demonstrated in the attached video.

I’ve included three examples from Base UI, 9ui (my project built on top of Base UI), and shadcn/ui to illustrate how other libraries handle this.

Examples in other libraries

https://github.com/user-attachments/assets/95f7dbfd-f401-468f-8d05-17a7c448213e (Base UI)
https://github.com/user-attachments/assets/68efb3b7-431e-4758-82de-2b85c6cc236b (9ui)
https://github.com/user-attachments/assets/c761bbb1-22c0-43df-ac2b-c58c1c538958 (shadcn/ui)

Motivation

Enhancing the user experience on mobile devices. This feature would primarily benefit mobile users and developers building mobile-first applications, ensuring smoother interactions when dealing with modals and input fields.

[mj12albert]

Hey @borabaloglu in our docs demo, the Popup just has position: fixed, were you thinking of something like Positioner? e.g. https://base-ui.com/react/components/menu#positioner

[atomiks]

I think both of these are caused by the iOS scroll locking solution from @react-aria/overlays - when it's disabled there's no jump effect and the document slides so the input is visible.

react-remove-scroll is the one used by Radix, maybe that can be used by Base UI for iOS instead which would fix the issues

[borabaloglu]

Hey @borabaloglu in our docs demo, the Popup just has position: fixed, were you thinking of something like Positioner? e.g. https://base-ui.com/react/components/menu#positioner

Hey @mj12albert, All three examples I attached use position: fixed. I don’t think the Positioner is necessary in this case. @atomiks mentioned the issue, and it’s likely more related to scroll lock rather than positioning.

I’ve encountered issues with react-remove-scroll before. Specifically, the one discussed in this issue.

[atomiks]

@borabaloglu pinch zooming doesn't work on iOS currently either with our solution, but it does work on every other platform

[atomiks]

Looks like it has other issues on iOS:

• Can't edit selection in a textarea (iOS 17) theKashey/react-remove-scroll#101
• iOS text selection handles break when react-remove-scroll is used in radix-ui's Dialog component theKashey/react-remove-scroll#130

Further, RemoveScroll from react-remove-scroll is a component and there's no clear way to avoid re-parenting when keepMounted=true or open=false and unmounting with an animation(?) — ideally it would be a hook or at least have a disabled prop on the component. We use a hook instead of a component, and RA's overlays package works well with that.

Maybe an issue can be filed on the React Aria repo for this, instead? Worst case, we just don't lock scroll on iOS at all because there are always so many issues with it 😖

(Tried to create a repro with RA alone but it freezes as a standalone page on CodeSandbox)