Docs / Infrastructure
SenseAutoFocusDirective
Opt-in focus helper from @artificialsenselabs/ui. Focuses the host (or a descendant selector) after the first browser render via afterNextRender — SSR-safe. Skips when another element already has focus.
Live demo: run nx serve showcase and open /components/auto-focus (port 4202).
Overview
Category: Infrastructure. Selector: [senseAutoFocus]. Import: import { SenseAutoFocusDirective } from '@artificialsenselabs/ui';
<input senseAutoFocus type="search" placeholder="Search" />
<section senseAutoFocus selector="button.primary">…</section>Accessibility & when to use
- Opt-in only — presence of the attribute enables focus; set
disabledto suppress without removing the directive. - Prefer dialogs, drawers, and in-page search panels. Avoid on every full-page load (can disorient keyboard and screen-reader users).
- Does not steal focus from an already focused, connected, focusable element.
- Uses
focus({ preventScroll: true })to avoid jumping the viewport. - Warns in dev mode when the target is not programmatically focusable.
- Unmatched
selectorfocuses nothing; invalid selectors fall back to the host.