[FocusTrap] is planned?

[dartess]

Feature request

Summary

FocusTrap

Examples in other libraries

@mui/base: https://mui.com/base-ui/react-focus-trap/
focus-trap: https://www.npmjs.com/package/focus-trap

Motivation

I'm currently using this component from deprecated @mui/base. Please tell, is it planned to move this component from @mui/base in the first version of @base-ui-components/react, or it definitely won't be there and I should migrate to a third-party package?

[colmtuite]

All of our components manage focus automatically, and also provide props to customise focus management in some cases. I'm curious why you'd like to use a focus trap utility directly. Can you share more about your use case?

[dartess]

Can you share more about your use case?

FocusTrap is used in a custom dropdown component with something like form.

All of our components manage focus automatically, and also provide props to customise focus management in some cases.

I tried to make a demo with popover: https://codesandbox.io/p/sandbox/58wl54?file=%2Fsrc%2FApp.tsx

The popover has two inputs. The focus after the second one goes out, closing the popover. This is acceptable behavior in my case, but ideally I would like to have a looping focus inside the popover content for as long as the popover is open. I haven't found a way to set up this yet.

[atomiks]

@dartess this sounds like a "modal" popover, which would trap and loop focus. However modality would also block outside pointer events and lock page scroll - is that acceptable, or should there be config options for that behavior in your case?

[dartess]

@atomiks This is actually a kind of select, but with a complex list component that includes sorting items as well as a filter input.
It needs to be anchored to a specific place in the form, so it's not a modal (I don't know if you can anchor a modal to other elements, like with CSS anchor positioning). Also, the user can change his mind about selecting data and can easily close it.

Strictly speaking, in my case, the behavior of automatically closing the popover when focus goes away solves the original bug when FocusTrap was added in component. Before it, closing didn't happen, and the open dropdown was overlapping next inputs.

So my request is worthless — if FocusTrap will be added, I'll use it to fully preserve the current behavior. If not, I'll just rewrite the component to use a popover. Either way, my migration problem is solved.

Perhaps other users can provide more valuable examples of direct FocusTrap using, so they can do so in this issue.

Thanks for your time.