useFocus

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

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

Usage

This Hook returns event handler props. To use it, pass it the context object returned from useFloating(), and then feed its result into the useInteractions() array. The returned prop getters are then spread onto the elements for rendering.

svelte

<script lang="ts">
import {
	useFloating,
	useFocus,
	useInteractions,
} 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`	Conditionally enable/disable the Hook. 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.