headlessui icon indicating copy to clipboard operation
headlessui copied to clipboard

Sibling Dialogs can't touch-scroll on mobile

Open nuschk opened this issue 7 months ago • 2 comments

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.

nuschk avatar Jul 11 '24 08:07 nuschk