Skip to content

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>

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>