useFocus: floating element does not disappear if it has focusable children and you blur by tabbing

[AleksandrHovhannisyan]

useFocus: floating element does not disappear if it has focusable children and you blur by tabbing

[atomiks]

This is because useFocus doesn't add focusout listeners to the floating element itself, and only listens for the reference blurring, which doesn't happen in this scenario.

FloatingFocusManager however does with non-modal focus management:

<FloatingFocusManager context={context} modal={false} initialFocus={-1}>
  {/* floating element */}
</FloatingFocusManager>

In general, it's better to use the focus manager for this because it also handles portaled floating elements which the above Sandbox doesn't (if there were to be focusable elements between the reference and floating element in the DOM tree)

https://codesandbox.io/p/sandbox/floating-ui-react-bug-where-poppers-dont-disappear-on-blur-forked-zz9w8k?file=%2Fsrc%2FApp.tsx%3A33%2C19

[AleksandrHovhannisyan]

@atomiks Gotcha, thanks for clarifying! That fork does what I need.

I think it might be helpful to mention FloatingFocusManager in the docs for useFocus to clarify that it's more suitable in situations where the floating element is focusable. We can close this issue, though.