focus

Track and control focus of a single element.


Package	`@vizejs/composable/focus`
Own the source	`vize lib pull composable:focus`
Runtime exports	`useFocus`, `useFocusWithin`
Gzip budget	2560 B

Usage

import { useFocus, useFocusWithin } from "@vizejs/composable/focus";

Runtime contract

Utility	Category	Stability	SSR	Hydration	Cleanup	Targets	Host globals	Uses
`useFocus`	dom	experimental	deterministic-fallback	stable	caller, reactive-scope	web, desktop	—	`resolveElement`, `tryOnScopeDispose`
`useFocusWithin`	dom	experimental	deterministic-fallback	stable	caller, reactive-scope	web, desktop	—	`resolveElement`, `tryOnScopeDispose`

API

`useFocus`

Track and control focus of a single element. Listens for focus/blur on the resolved element and re-syncs when the target changes. Assigning focused calls focus()/blur(). Server renders always report false; initialValue is applied only after the element resolves on the client, so hydration output is unaffected.

function useFocus(target: MaybeElementTarget, options: UseFocusOptions = {}): FocusControls

`useFocusWithin`

Track whether focus is inside an element (the :focus-within state). Uses bubbling focusin/focusout and checks the relatedTarget so moving focus between descendants never flickers to false. Server renders report false.

function useFocusWithin(target: MaybeElementTarget): FocusWithinControls

Types

`UseFocusOptions`

Options for useFocus.

Member	Type	Description
`initialValue`?	`boolean`	Focus the element as soon as it resolves.
`focusVisible`?	`boolean`	Only report focus when the user agent would show a focus ring (`:focus-visible`).
`preventScroll`?	`boolean`	Avoid scrolling the element into view when focusing programmatically.

`FocusControls`

Reactive focus state returned by useFocus.

Member	Type	Description
`focused`	`WritableComputedRef<boolean>`	Whether the element is focused. Assign `true`/`false` to focus/blur it.
`stop`	`() => void`	Stop tracking. Idempotent.

`FocusWithinControls`

Reactive state returned by useFocusWithin.

Member	Type	Description
`focused`	`Readonly<Ref<boolean>>`	Whether the element or any descendant has focus.
`stop`	`() => void`	Stop tracking. Idempotent.