Popover component won't always close when clicking outside of it #2731
Replies: 5 comments 5 replies
-
|
Seeing this behavior on v1.7.17, but working as expected on v1.7.14 |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much @mattmcegg for this discovery 🙌 much appreciated Question, should I transform this discussion into an issue, just to mark it as an "official" bug (and keep track of its development)? |
Beta Was this translation helpful? Give feedback.
-
Following the error that occurs while clicking, I will also introduce you an npm package that will make the work easier.Note Although it is possible that most of the readers and friends are fully aware of this topic by now.
How to Usage???
|
Beta Was this translation helpful? Give feedback.
-
|
Tested it and found the bug existed on latest 3 versions for headlessui/react: 1.7.17, 1.7.16 and 1.7.15, but not on 1.7.14 as @mattmcegg said. Mitigate it temporarily by using 1.7.14 and you could create an issue for a fix. |
Beta Was this translation helpful? Give feedback.
-
|
Same issue. Downgrading to |
Beta Was this translation helpful? Give feedback.
-
|
I also had this issue with |
Beta Was this translation helpful? Give feedback.
-
|
I am having this issue still on 1.7.14 |
Beta Was this translation helpful? Give feedback.
-
|
Have you tried this solution/workaround? |
Beta Was this translation helpful? Give feedback.
-
|
@FabioDainese thanks a lot! it worked for me (using headless ui with nextjs app router) |
Beta Was this translation helpful? Give feedback.
-
|
This issue still exists on version 1.7.18 as well. |
Beta Was this translation helpful? Give feedback.
-
What package within Headless UI are you using?
@headlessui/react (more specifically the popover component)
What version of that package are you using?
v1.7.17
What browser are you using?
Chrome (v116.0.5845.96), Firefox (v116.0.3), Safari (v16.4.1)
Reproduction URL
https://codesandbox.io/p/sandbox/flamboyant-marco-57cyzh
Describe your issue
The popover component seems to not close every time you click outside of it. To be more specific - you can try on the provided sandbox - only when you click on one of the siblings of the component that uses the popover, it won't work. So, for example, in the provided project if you click on:
<main>tag is sibling to the<nav>one, which uses the popover component)<body>tag is parent of the<nav>, so all okay)'body' tag - white background" text: the popover will still be open (i.e. the<p>tag that contains the text is sibling to the<nav>one)Now, the temporary "workaround" that kinda fix this issue would be to use a transparent overlay (i.e.
<Popover.Overlay className="fixed inset-0" />), so basically wherever you click, you would click on the overlay that consequently will close the popover. Now, this is far from optimal though, since if a user would like to click on an hypothetical visible button (placed outside the popover), it would need to click 2 times (one to close the popover by clicking the invisible overlay and the second one to actually trigger the button).So, I'm not sure if this is the intended behavior for the
popovercomponent - or if I coded something wrong here - but I would like to gently ask you a feedback on it, also to understand which would be the best approach to tackle this issue (if it's not the intended behavior).P.S. the popover used on the provided project is just a simpler copy-paste version of the first example that you can find on the headlessui website
Beta Was this translation helpful? Give feedback.
All reactions