useFocus

Opens the floating element while the reference element has focus, like CSS :focus.

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

Usage

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

	const floating = useFloating();
	const focus = useFocus(floating.context);
	const interactions = useInteractions([focus]);
</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

visibleOnly

Whether the open state only changes if the focus event is considered visible (`:focus-visible` CSS selector)

boolean

true

Compare

Compare to Floating UI React.