FloatingFocusManager focusout handler - closes when clicking another button, does not close on outside click
See original GitHub issueI 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
- Open Popover from the button
- Click outside of the Popover, observe that it does not close
- Click the “Second button”, observe that the Popover remains open
Scenario 2
- Open Popover from the button
- 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:
- Created 9 months ago
- Comments:5 (3 by maintainers)
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?
So I guess we have two options:
focusout
behavior.pointerdown
event occurred on the related target right before the focusout occurred, if so prevent closing. Keeps keyboard/virtual cursor closing working.