On mobile Popover.Overlay interaction also triggers interaction with the element under Overlay

[pashutk]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.1

What browser are you using?

Chrome

Reproduction URL

https://stackblitz.com/edit/headlessui-popover-overlay-mobile

Describe your issue

Description

Please look at the example in reproduction.
When I use Popover with Popover.Overlay, a click on Overlay closes Popover as intended. On desktop browser it also doesn't trigger any interaction with content located below the overlay, everything works great. Unfortunately, if you open this example on mobile you can see that if you try to close the popover by clicking on the overlay right where the 'Call alert' button is you'll trigger a button press.
The simplest way to reproduce this without using a phone is to open reproduction, click on the 'Open in New Window' button on the top right, and then on the opened page open Developer tools (cmd shift I) and then Toggle device toolbar (cmd shift M). Then click on the 'Open popover' button and then try to close popover clicking on overlay right where the 'Call alert' button is located. You'll trigger the button handler and this is, I guess, a bug because interaction with overlay shouldn't trigger interaction with content behind it.
Thanks.

Desktop

Screen.Recording.2022-05-06.at.20.04.35.mov

Mobile

Screen.Recording.2022-05-06.at.20.07.03.mov

[CGamesPlay]

I'm also experiencing this. I was hoping that #1409 would fix it, but the issue persists after this commit.

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

This is not a bug since the Popover doesn't "block" interacting with elements outside of the Popover, it just closes the Popover if focused is moved outside.
The Popover.Overlay also doesn't add anything special for blocking other elements. It is only there to make it a bit easier to style a backdrop but only when the Popover is in an open state, and attaches an onClick to close the Popover. It doesn't block anything else.

If you wan't to make sure that you can't click the item below, then you can add onPointerDown={(e) => e.stopPropagation()} to the Popover Panel:
https://stackblitz.com/edit/headlessui-popover-overlay-mobile-iaepff?file=App.tsx

[CGamesPlay]

Hi Robin, thanks for getting back. Why is the behavior different on desktop and mobile? When using a mouse, the popover closes and the event doesn't propagate. When using a tap, the popover closes and the event continues to propagate. This feels inconsistent, am I missing something that makes these two cases fundamentally different?