◇

FocusScope

1 parts

A low-level building block that manages keyboard focus for its contents. On mount it can move focus inside (autofocus), on unmount it restores focus to the previously focused element, and while active it can loop Tab/Shift+Tab at the edges and/or trap focus so it cannot leave the container. Scopes are tracked in a global stack so nested scopes (e.g. a dialog opening over a popover) hand focus management back and forth correctly. Use it to wrap any overlay or modal surface that needs accessible focus containment; it renders no UI of its own. Emits mountAutoFocus/unmountAutoFocus so the consumer can override the default focus target.

Source

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  FocusScope,
} from '@robonen/primitives/utilities/focus-scope';

<FocusScope />

API Reference

FocusScope

Root

A low-level building block that manages keyboard focus for its contents. On mount it can move focus inside (autofocus), on unmount it restores focus to the previously focused element, and while active it can loop Tab/Shift+Tab at the edges and/or trap focus so it cannot leave the container. Scopes are tracked in a global stack so nested scopes (e.g. a dialog opening over a popover) hand focus management back and forth correctly. Use it to wrap any overlay or modal surface that needs accessible focus containment; it renders no UI of its own. Emits `mountAutoFocus`/`unmountAutoFocus` so the consumer can override the default focus target.

Prop	Type	Default	Description
`loop`?	`boolean`	`false`	Зациклить Tab/Shift+Tab: с последнего элемента — на первый и наоборот.
`trapped`?	`boolean`	`false`	Удерживать фокус внутри scope — фокус не может покинуть контейнер через клавиатуру, указатель или программный вызов.