Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
prtmwrkr opened this issue Jul 16, 2024 · 2 comments

Comments

@prtmwrkr
Copy link

prtmwrkr commented Jul 16, 2024

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
Copy link
Author

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
Copy link

bgentry commented Sep 1, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants