FloatingFocusManager
Provides flexible focus management for a floating element.
This component should only be rendered when the floating element is open and directly wrap it.
import {
FloatingFocusManager
} from '@floating-ui/react-dom-interactions';
function App() {
const {context} = useFloating();
return (
<>
{/* reference element */}
{open && (
<FloatingFocusManager context={context}>
{/* floating element */}
</FloatingFocusManager>
)}
</>
);
}Props
interface Props {
context: FloatingContext;
order?: Array<'reference' | 'floating' | 'content'>;
initialFocus?:
| number
| React.MutableRefObject<HTMLElement | null>;
preventTabbing?: boolean;
endGuard?: boolean;
returnFocus?: boolean;
modal?: boolean;
}context
Required
The context object returned from useFloating().
<FloatingFocusManager context={context}>
{/* floating element */}
</FloatingFocusManager>order
default: ['content']
The order in which focus cycles.
<FloatingFocusManager
context={context}
// Initially focuses the floating element. Subsequent tabs
// will cycle through the tabbable contents of the floating
// element.
order={['floating', 'content']}
// Keeps focus on the reference element. Subsequent tabs
// will cycle through the tabbable contents of the floating
// element.
order={['reference', 'content']}
>
{/* floating element */}
</FloatingFocusManager>initialFocus
default: 0
Which element to initially focus. Can be either a number
(tabbable index as specified by the order) or a
ref.
<FloatingFocusManager
context={context}
initialFocus={elementRef}
>
{/* floating element */}
</FloatingFocusManager>preventTabbing
default: false
Determines if the tab key does not perform any action (i.e. navigation is handled via arrow keys).
<FloatingFocusManager context={context} preventTabbing={true}>
{/* floating element */}
</FloatingFocusManager>endGuard
default: true
Determines if the end focus guard (after the floating element) is rendered. If not, focus can escape into the address bar, like in native dialogs. This means the floating element must be portalled to the very end of the document.
<FloatingFocusManager context={context} endGuard={false}>
{/* floating element */}
</FloatingFocusManager>returnFocus
default: true
Determines if focus should be returned to the element that was focused prior to opening the floating element (usually the reference element).
<FloatingFocusManager context={context} returnFocus={false}>
{/* floating element */}
</FloatingFocusManager>modal
default: true
Determines if focus is "modal", meaning focus is fully trapped inside the floating element and outside content cannot be accessed.
If this is not true, the floating element must be rendered directly after its reference element (e.g. not in a FloatingPortal).
<FloatingFocusManager context={context} modal={false}>
{/* floating element */}
</FloatingFocusManager>