useFocus

Adds focus event listeners that change the open state, like CSS :focus.

import {
  useFloating,
  useInteractions,
  useFocus,
} from '@floating-ui/react-dom-interactions';
 
// ...
const {context} = useFloating();
const {getReferenceProps, getFloatingProps} = useInteractions([
  useFocus(context, {
    // props
  }),
]);

Props

interface Props {
  enabled?: boolean;
  keyboardOnly?: boolean;
}

enabled

default: true

Conditionally enable/disable the hook.

useFocus(context, {
  enabled: false,
});

keyboardOnly

default: true

Whether the state only changes if the focus event was triggered via keyboard rather than any pointer inputs (mouse/touch/pen).