FloatingFocusManager & useDismiss: does not close on outside click if focus is not on the reference element
Describe the bug
I have a combobox that has an onFocus handler to open the listbox when the input receives focus. The listbox can include grouped options, where clicking on the group labels removes DOM focus from the input. If user clicks on the group label, then tries to close the combobox with outside click, the combobox remains open.
To Reproduce
Steps to reproduce the behavior:
- Go to 'https://codesandbox.io/p/sandbox/nostalgic-moore-5cfyf2
- Click on input to open listbox
- Click on "group label" in the listbox
- Click outside the listbox
- Observe that the floating element does not close
If the focus remains in the input, outside click closes the combobox correctly.
Expected behavior
Floating element should always close on outside click without moving focus.
Context:
- OS: Windows
- Browser: Firefox
- Version: 128
Additional context
From tracing the code, I see that on step 4, FloatingFocusManager wants to return focus to the reference element on unmount. Then that focus triggers the onFocus handler, which re-opens the combobox. But since it was an outside click, it does not actually focus the input. I think FloatingFocusManager should not try to return focus back to reference element if it's closed by outside click, which should fix the issue by not re-triggering onFocus on input.
I've also tried using useFocus hook instead of external onFocus handler, the only difference then is that the first outside click moves DOM focus back to the input, then a second outside click will close the combobox.
Source: floating-ui/floating-ui