headlessui
headlessui copied to clipboard
Sibling Dialogs can't touch-scroll on mobile
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
2.1.2
What browser are you using?
Chrome (mobile devtools), Safari mobile
Reproduction URL
Run this with your mobile: https://1934554.playcode.io/.
The code is here: https://playcode.io/1934554
Describe your issue
The second (sibling) dialog can't properly touch-scroll on mobile. To reproduce:
- Open the sample URL with a mobile device (or chrome devtools)
- The first dialog is open, verify that you can scroll normally
- Touch the button "Open 2.", opens the second dialog
- Try to scroll, it doesn't work.
One workaround is to nest the dialogs as we've been used to do. Of course, that may not be possible for all use cases.
Note that scrolling works just fine when using the mouse wheel, or by dragging the scrollbars on desktop, it's just on mobile.