useDismiss

Adds listeners that dismiss (close) the floating element.

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

Props

interface Props {
  enabled?: boolean;
  escapeKey?: boolean;
  referencePointerDown?: boolean;
  outsidePointerDown?: boolean;
  ancestorScroll?: boolean;
  bubbles?: boolean;
}

enabled

default: true

Conditionally enable/disable the hook.

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

escapeKey

default: true

Whether to dismiss the floating element upon pressing the esc key.

useDismiss(context, {
  escapeKey: false,
});

referencePointerDown

default: false

Whether to dismiss the floating element upon pointer down of the reference element.

useDismiss(context, {
  referencePointerDown: true,
});

outsidePointerDown

default: true

Whether to dismiss the floating element upon pointer down outside of both the floating and reference elements.

useDismiss(context, {
  outsidePointerDown: false,
});

ancestorScroll

default: false

Whether to dismiss the floating element upon scrolling an overflow ancestor.

useDismiss(context, {
  ancestorScroll: true,
});

bubbles

default: true

When dealing with nested floating elements, this determines whether the dismissal bubbles through the entire <FloatingTree /> or stops at the current node.

When false, the floating element must have focus inside it.

Generally, nested modal dialogs (where focus cannot escape the current node) will prefer no bubbling, while other nested floating elements will prefer bubbling.

useDismiss(context, {
  bubbles: false,
});