AutoFocus

Basic

This input receives focus when the page loads. Use Tab to continue through the examples.

Conditional content

Open the editor to create an input and focus it. Close and reopen it to repeat the example.

Controlled

Turn automatic focus on to move to the input. Turn it off and on again to repeat. Typing and other page updates do not recapture focus.

Usage and API

import { AvAutoFocus, AvInput } from 'avero-ui';

<input avInput avAutoFocus aria-label="Search" placeholder="Automatically focused" />

@if (showEditor) {
  <input avInput avAutoFocus aria-label="Project name" />
}

<input avInput [avAutoFocus]="enabled" [preventScroll]="true"
  aria-label="Controlled focus" />

Import AvAutoFocus and apply avAutoFocus to a native focusable element. The boolean input defaults to true; [avAutoFocus]="false" disables it. It runs after the initial render and whenever the input changes from false to true.

preventScroll defaults to true to preserve the current scroll position. Set it to false to allow the browser to scroll the focused element into view. Changing this option alone does not refocus the element.

Disabled, hidden and inert elements are not focused. The directive does not poll for visibility or change tabindex. To focus content that appears later, create it with @if or enable avAutoFocus after showing it. For dialogs, use the dialog's focus handling or enable the directive after the dialog opens.

Server rendering does not move focus. Choose one autofocus target per view, keep a visible label, and use automatic focus only where it helps users continue their task. Focus remains free to move with Tab.

Reference: PrimeNG AutoFocus.