tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

Menu gets closed when user click outside, but event propagation seems suppressed #3386

Open prtmwrkr opened 2 months ago

prtmwrkr commented 2 months ago

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.1.2

What browser are you using?

All

Reproduction URL

v1.7.2

v2.1.2

Describe your issue

Ignore the fact that the menu is very ugly - I put together this demo very quickly.

In version 1.7.2, Open the menu, then click the button labelled with "Click me": the menu gets closed and the click handler on the click me button is executed (you should see an alert).

In version 2.1.2, Repeat what you did before: the menu gets closed, but click handler on the button is ignored.

The two versions differ only for the version of @headlessui/react used.

prtmwrkr commented 2 months ago

I tried debugging this on my own for a while - I am very confused.

I added a couple of breakpoints in the use-click-outside hook - I was surprised that in the version using headlessui@2.1.2 the event target isn't the "Click me" button, but the one of its ancestor... This explains why the event handler is not fired... but now the question is why the event target isn't what one would expect (that is the button been clicked).

We can also see this visually; I've updated slightly both the demos:

button.clickme {
  appearance: none;
  background: none;
  border-radius: 4px;
  padding: 20px;
}
button.clickme:hover {
  background: rgb(73, 1, 227);
  color: white;
}

This just adds a background on the "Click me" button. In both demo, when the menu is closed, the button changes color when the user hover it. When the menu is open, in the version using headlessui@2.1.2, even when the user hovers the button, the hover is not detected.

Given that I can't understand what's going on there.

bgentry commented 4 weeks ago

I just encountered this same issue in River UI. On @headlessui/react v2.1.2, hovers and clicks are not properly captured by my Listbox. However, if I revert to v2.1.1, everything works normally.

Note that this seems to only be an issue for production builds for me. In dev, everything seems fine even on the latest version.

There aren't many commits in the diff, but #3362 looks the most suspicious of those.