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>;
returnFocus?: boolean;
preventTabbing?: boolean;
endGuard?: 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.
This does not have an effect when
preventTabbing
is enabled.
<FloatingFocusManager
context={context}
initialFocus={elementRef}
>
{/* 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).
This does not have an effect when
preventTabbing
is enabled.
<FloatingFocusManager context={context} returnFocus={false}>
{/* floating element */}
</FloatingFocusManager>
preventTabbing
default: false
Determines if the tab key does not perform any action, so that
focus cannot escape the floating element. Focus is instead
handled by useListNavigation()
(i.e. arrow key
navigation).
This prop is required when the focus is modal and the floating element is portalled outside of the reference element's DOM context.
<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>
modal
default: true
Determines if focus is "modal", meaning focus is fully trapped inside the floating element and outside content cannot be accessed. This includes screen reader virtual cursors.
If
false
, 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>