tailwindlabs
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.
Facing the same issue, adding
onTouchMove={(e) => {
e.stopPropagation()
}}
onTouchStart={(e) => {
e.stopPropagation()
}}
to the DialogPanel can mitigate the issue yet causes problems with react-beautiful-dnd when rendered inside the dialog
It seems that having multiple dialogs open simultaneously also causes issues with button functionality. Whenever a second dialog appears, the buttons stop responding on mobile (Chrome). Is there already a fix or workaround for this?
Whenever a second dialog appears, the buttons stop responding on mobile (Chrome).
I have a similar problem with @headlessui/vue, only on mobile, the second dialog is not accessible and the whole page becomes unreachable. Buttons don't work, clicking outside doesn't work, it probably has something to do with the focus trap, as the second dialog is not rendered inside the first one.
Having the same issue. It's quite blocking since the dialog is completely not scrollable on mobile. Going to resort to stopPropagation workaround for now.
Indeed this is a problem I am facing too on the Vue version. It also prevents you from clicking items inside.
This should be fixed by #3796, and will be available in the next release.
You can already try it using:
npm install @headlessui/react@insiders.
