[FloatingFocusManager] Return focus to child element of reference

[adammiller]

Hi! Thanks for the great library. I'm facing an issue though with using it to build a Popover component. Here's an example:
https://codesandbox.io/p/sandbox/great-star-v5566y

The behavior I'd expect here is that the on close of the popover, focus would be returned to the input element. This works if I do not wrap the input element, but not if the input is wrapped in a div. If I give the div wrapper a tabIndex, it will return focus to the div, but that's not ideal.

Is there some way of making this work as expected? Ideally, on close of the Popover, it'd return focus to the element that was focused before the Popover was open, as long as that element is inside the reference node.

[atomiks]

Can't access the Sandbox, but the reference should be the focusable element itself. The wrapping probably works since focus bubbles up. To position it around the wrapper, use <Wrapper ref={refs.setPositionReference}> while refs.setReference is placed on the input.

[adammiller]

Thanks for the quick response.

I've updated the sandbox so you should be able to see it now and updated my logic to try to follow your suggestion. I'm attempting to build this in a reusable pattern, based off the Popover example linked from the docs. Can you take a look at my example and see if you can suggest a way to make this work? I'd like to avoid the render prop if possible.

[atomiks]

From what I can see, it works with the normal asChild prop in the latest version (0.26.9). The one in the Sandbox demos are quite old (don't think I can easily update them anymore):

https://codesandbox.io/p/sandbox/practical-dew-lx4rjg?file=%2Fsrc%2FApp.tsx%3A21%2C26

[adammiller]

Updated my example to use 0.26.9. On the asChild example, it works in one case, not in another. It returns the focus to the input inside the trigger if i focus the close button and press enter. Pressing the esc button sets focus to document.body though.

[atomiks]

Hmm yeah. With your render prop, the reference input element also needs to spread the reference props: {...context?.getReferenceProps()}. This looks to work with both esc and the button. However, then clicking on the wrapper doesn't work. So you might need something separate for that.

In all though, this is probably a feature that should be handled by the library better. That is, detecting focusable children of the reference element and using them for focus-related tasks.

[adammiller]

Took a stab at making the return focus able to utilize focusable descendants of the reference: #2826