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,
});