Sibling Dialogs can't touch-scroll on mobile

[nuschk]

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.

[jnsdrssn]

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

[aaronabf]

We're also encountering this issue. This is a huge blocker for us.

[JeremyMees]

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?

[ayrtonandino]

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.

[isoroka-plana]

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.

[MLDMoritz]

Indeed this is a problem I am facing too on the Vue version. It also prevents you from clicking items inside.

[YowaiCoder]

This is absurd...

[RobinMalfait]

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.