useFocus

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

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.