Events on mobile propagating through Dialog overlay (as suggested from docs)

[jrubins]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.17

What browser are you using?

Chrome, Chrome on Android

Reproduction URL

"Working" version on v1.7.15: https://codesandbox.io/p/devbox/headlessui-react-1-7-15-rc59pw
"Broken" version on v1.7.16: https://codesandbox.io/p/devbox/headlessui-react-1-7-16-674pqg

Describe your issue

Steps to Reproduce

1. In CodeSandbox, click the button at the top-right of the preview to open in a new tab.
2. Open Chrome DevTools and toggle on the device mode.
3. With theDialog open (which it is by default in the reproduction URL), click the "Click Me Behind Dialog" text.

Expected Results
The Dialog is closed and no paragraph indicating the button was also clicked is shown.

Actual Results
The Dialog is closed and the paragraph indicating the button was also clicked is shown.

Notes

• This is a minimal example with a Dialog copy-pasted from the docs on using a backdrop (https://headlessui.com/react/dialog#adding-a-backdrop).
• The "broken" behavior does not happen on desktop.
• The "broken" behavior happens on an actual device (so this doesn't seem like a Chrome emulator issue). I tested by sending the web page from CodeSandbox to my Android phone in Chrome and testing there as well.
• The "broken" behavior does not happen on version 1.7.15 of the library.
  • This commit seems potentially relevant between the two tags: a9e8563?

[MSNexploder]

Same issue for me on both iOS and Android (Browser and In-App-Webviews).

[yungjurick]

Same issue as well for mobile-view

[RobinMalfait]

This should be fixed by #2919, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.