useDismiss

Closes the floating element when a dismissal is requested — by default, when the user presses the escape key or outside of the floating element with their pointer.

import { useDismiss } from '@skeletonlabs/floating-ui-svelte';

Usage

svelte

<script lang="ts">
	import { useFloating, useInteractions, useDismiss } from '@skeletonlabs/floating-ui-svelte';

	const floating = useFloating();
	const dismiss = useDismiss(floating.context);
	const interactions = useInteractions([dismiss]);
</script>

<!-- Reference Element -->
<button bind:this={floating.elements.reference} {...interactions.getReferenceProps()}>
	Reference
</button>

<!-- Floating Element -->
<div
	bind:this={floating.elements.floating}
	style={floating.floatingStyles}
	{...interactions.getFloatingProps()}
>
	Floating
</div>

Options

`enabled`	Whether the Hook is enabled, including all internal Effects and event handlers. boolean true
`escapeKey`	Whether to dismiss the floating element upon pressing the `esc` key. boolean true
`referencePress`	Whether to dismiss the floating element upon pressing the reference element. You likely want to ensure the `move` option in the `useHover()` Hook has been disabled when this is in use. boolean false
`referencePressEvent`	The type of event to use to determine a “press”. 'pointerdown' \| 'mousedown' \| 'click' 'pointerdown'
`outsidePress`	Whether to dismiss the floating element upon pressing outside of the floating element. boolean \| ((event: MouseEvent) => boolean) true
`outsidePressEvent`	The type of event to use to determine an outside “press”. 'pointerdown' \| 'mousedown' \| 'click' 'pointerdown'
`ancestorScroll`	Whether to dismiss the floating element upon scrolling an overflow ancestor. boolean false
`bubbles`	Determines whether event listeners bubble upwards through a tree of floating elements. boolean \| { escapeKey?: boolean; outsidePress?: boolean } undefined
`capture`	Determines whether to use capture phase event listeners. boolean \| { escapeKey?: boolean; outsidePress?: boolean } undefined

Reacting to dismissal

To react to the dismissal event, you can check for the reason string in the onOpenChange callback:

const floating = useFloating({
	get open() {
		return open;
	},
	onOpenChange: (value, event, reason) => {
		open = value;
		if (reason === 'escape-key' || reason === 'outside-press') {
			console.log('dismissed');
		}
	},
});

Compare

Compare to Floating UI React.