question-mark
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.

FloatingFocusManager focusout handler - closes when clicking another button, does not close on outside click

See original GitHub issue

I created a small reproduction in a branch in my fork: https://github.com/mihkeleidast/floating-ui/commit/c5b92d4b029d8902e5b5a3178cb4cb4b3072ad37

Ran across an inconsistency in how the focusout handler works. Two different scenarios at play here:

Scenario 1

  1. Open Popover from the button
  2. Click outside of the Popover, observe that it does not close
  3. Click the “Second button”, observe that the Popover remains open

Scenario 2

  1. Open Popover from the button
  2. Click the “Second button” observe that the Popover closes

As far as I debugged, the focusout handler fires in both cases when clicking outside of the floating element, but in scenario 1, when clicking the background, relatedTarget is null, so it does not fire the open change event.

It is kind of an edge case, but would be good if the behavior was consistent, to know what I should expect, as from the users perspective a random click outside should not change anything.

Some additional info: in my real usecase, I do not have such Popovers, rather it is a drawer-like component (ex https://shoelace.style/components/drawer) that can be configured to not render on top of other content, rather it would render aside the main page. In this context, I have floating-ui configured to not close the floating element on outside click, but this issue means it still does in some cases. I can create a more realistic sandbox, if necessary, though I think the above describes the issue in enough detail.

Issue Analytics

  • State:closed
  • Created 9 months ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
mihkeleidastcommented, Dec 9, 2022

I would go with the first, to allow disabling the focusout behavior, for my usecase this solves more problems actually - I’ll try to put a PR together with a testable example, if that sounds good?

0reactions
atomikscommented, Dec 9, 2022

So I guess we have two options:

  • Add a prop that allows the user to disable focusout behavior.
  • Detect if a pointerdown event occurred on the related target right before the focusout occurred, if so prevent closing. Keeps keyboard/virtual cursor closing working.
Read more comments on GitHub >

github_iconTop Results From Across the Web

Conflict between focusout and click events in JS
The problem that I have, it is focusout event of the text box when you try to close the list pressing the arrow...
Read more >
How to Dismiss the Keyboard in Flutter the Right Way
Tapping outside of a form field in Flutter doesn't dismiss the keyboard by default. So how do we do it?
Read more >
Button that toggles focus trap when clickOutsideDeactivates ...
I have a button that toggles the activation of a focus trap. However I want the the FocusTrap to go away when I...
Read more >
Input doesn't loose focus if button is clicked outside of iframe
If an input is focused, clicking outside the Iframe does not have any effect. The focus stays. This is happening in iOS only...
Read more >
Custom Query - CKEditor
Ticket Summary Keywords Owner Type #11086 Re enable inline widgets DnD IE8 IE Piotr Jasiun New Feature #11140 Dragging anchors does not work IE11 Piotr...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found