Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Click outside logic is broken for `static` Popover

See original GitHub issue

It looks like once you add static to the <Popover.Panel> the clicking outside logic no longer works properly. Instead, it will close the popover even when you click elements inside the panel, making it impossible to interact with.

Here’s a sandbox: https://codesandbox.io/s/headlessuireact-static-popover-bug-74uhq?file=/src/App.js

Issue Analytics

State:
Created 3 years ago
Reactions:8
Comments:15 (1 by maintainers)

Top GitHub Comments

1reaction

psychoneticcommented, Apr 23, 2021

This also happens when not using the static prop. E.g. if I have a form inside the popover. (headlessui/vue)

0reactions

tjmealcommented, Feb 24, 2022

Same problem here <Popover.Button as=“a”> and <Popover.Panel static tabIndex={-1}> both solves the issue.

However <Popover.Panel static tabIndex={-1}> marks the area of the panel > so i prefer the as=“a” solution.

Top Results From Across the Web

Detect click outside React component - Stack Overflow

The following solution uses ES6 and follows best practices for binding as well as setting the ref through a method. To see it...

How to Dismiss a React-Bootstrap Popover on Click Outside

This guide explores how to dismiss a popover on clicking outside anywhere on the page. Popovers. Popovers can be used in several ways,...

Documentation: DevExtreme - JavaScript Lookup Configuration

Applies the selected value immediately after a user clicks the required value in the drop-down menu. To cancel the selection, click outside the...

UI Bootstrap - AngularUI

The outsideClick trigger will cause the popover to toggle on click, and hide when anything else is clicked. For any non-supported value, the...

Whats New - SurveyJS

... "off", "progressBarType": "buttons", "goNextPageAutomatic": true, "completeText": "Submit", "questionsOnPageMode": "singlePage", "widthMode": "static", ...