Utilities

Auto Focus

Moves the focus to a field once it is rendered — the first field of a dialog, a search box that opens, a code input.

Part of @tectra-ng/utils (npm install @tectra-ng/utils, also included in tectra-ng).

Features2

API

Theming

Dialog

Open the dialog: the name field gets the focus with its text selected, ready to be replaced.

6 lines

<button txButton label="Rename file" (click)="open.set(true)"></button><tx-dialog header="Rename file" [(visible)]="open">  <tx-field label="Name">    <input txInput value="report-final-v2.pdf" txAutoFocus select [fluid]="true" />  </tx-field></tx-dialog>

Toggle

On a wrapper the first focusable element inside gets the focus — here a search box that opens on demand.

16 lines

<div class="flex">  <button    txButton    icon="search"    severity="secondary"    [attr.aria-expanded]="open()"    aria-label="Search"    (click)="open.set(!open())"  ></button>  @if (open()) {    <tx-icon-field txAutoFocus>      <tx-input-icon icon="search" />      <input txInput placeholder="Search docs" aria-label="Search docs" />    </tx-icon-field>  }</div>