Skip to content

Commit 074666b

Browse files
SkyZeroZxthePunderWoman
authored andcommitted
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.
1 parent 4c2d860 commit 074666b

2 files changed

Lines changed: 3 additions & 7 deletions

File tree

adev/shared-docs/components/search-dialog/search-dialog.component.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ export class SearchDialog {
5454
readonly onClose = output();
5555
readonly dialog = viewChild.required<ElementRef<HTMLDialogElement>>('searchDialog');
5656
readonly items = viewChildren(SearchItem);
57-
readonly textField = viewChild(TextField);
5857

5958
readonly history = inject(SearchHistory);
6059
private readonly search = inject(Search);
@@ -98,7 +97,7 @@ export class SearchDialog {
9897
}
9998
// We want to select the pre-existing text on opening
10099
// In order to change the search input with minimal user interaction.
101-
this.textField()?.input().nativeElement.select();
100+
this.searchForm().focusBoundControl();
102101
},
103102
});
104103

adev/src/app/features/references/api-reference-list/api-reference-list.component.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import {
1818
inject,
1919
input,
2020
linkedSignal,
21-
viewChild,
2221
} from '@angular/core';
2322
import {Select, SelectOption, TextField} from '@angular/docs';
2423
import {FormField, form} from '@angular/forms/signals';
@@ -62,7 +61,6 @@ export default class ApiReferenceList {
6261
// services
6362
private readonly apiReferenceManager = inject(ApiReferenceManager);
6463
private readonly router = inject(Router);
65-
private readonly filterInput = viewChild.required(TextField);
6664
private readonly injector = inject(EnvironmentInjector);
6765

6866
// inputs
@@ -137,13 +135,12 @@ export default class ApiReferenceList {
137135

138136
constructor() {
139137
effect(() => {
140-
const filterInput = this.filterInput();
138+
const filterInput = this.form.query();
141139
afterNextRender(
142140
{
143141
write: () => {
144-
// Why not improve this once https://github.com/orgs/angular/projects/60?pane=issue&itemId=143488813 is done
145142
if (matchMedia('(hover: hover) and (pointer:fine)').matches) {
146-
scheduleOnIdle(() => filterInput.focus());
143+
scheduleOnIdle(() => filterInput.focusBoundControl());
147144
}
148145
},
149146
},

0 commit comments

Comments
 (0)