docs(docs-infra): use Signals Forms focusBoundControl

Removes direct `ViewChild` access from `TextField` components and relies on
Signals Forms via the `focusBoundControl`  to manage focus.

(cherry picked from commit 074666b2e8)
This commit is contained in:
SkyZeroZx
2026-01-13 19:54:40 -05:00
committed by Jessica Janiuk
parent 16a23a5fe8
commit 79e6dfdef3
2 changed files with 3 additions and 7 deletions
@@ -54,7 +54,6 @@ export class SearchDialog {
readonly onClose = output();
readonly dialog = viewChild.required<ElementRef<HTMLDialogElement>>('searchDialog');
readonly items = viewChildren(SearchItem);
readonly textField = viewChild(TextField);
readonly history = inject(SearchHistory);
private readonly search = inject(Search);
@@ -98,7 +97,7 @@ export class SearchDialog {
}
// We want to select the pre-existing text on opening
// In order to change the search input with minimal user interaction.
this.textField()?.input().nativeElement.select();
this.searchForm().focusBoundControl();
},
});
@@ -18,7 +18,6 @@ import {
inject,
input,
linkedSignal,
viewChild,
} from '@angular/core';
import {Select, SelectOption, TextField} from '@angular/docs';
import {FormField, form} from '@angular/forms/signals';
@@ -62,7 +61,6 @@ export default class ApiReferenceList {
// services
private readonly apiReferenceManager = inject(ApiReferenceManager);
private readonly router = inject(Router);
private readonly filterInput = viewChild.required(TextField);
private readonly injector = inject(EnvironmentInjector);
// inputs
@@ -137,13 +135,12 @@ export default class ApiReferenceList {
constructor() {
effect(() => {
const filterInput = this.filterInput();
const filterInput = this.form.query();
afterNextRender(
{
write: () => {
// Why not improve this once https://github.com/orgs/angular/projects/60?pane=issue&itemId=143488813 is done
if (matchMedia('(hover: hover) and (pointer:fine)').matches) {
scheduleOnIdle(() => filterInput.focus());
scheduleOnIdle(() => filterInput.focusBoundControl());
}
},
},