Initial Focus
The Dialog provides the ability to specify which element receives focus when the Dialog opens.
By default, the Dialog focuses the primary action button when it opens. If none is available, it focuses the Dialog wrapper. To focus a specific element instead, set the autoFocusedElement property to a CSS selector that matches an element inside the Dialog.
The following example focuses the first input element instead of the default primary button.
Setting Initial Focus with Services
When you open a Dialog through the DialogService to create Dialog instances dynamically based on user interaction, set autoFocusedElement in the DialogSettings object. The selector must match an element inside the Dialog content.
The following snippet opens a content component and focuses the element that matches #name.
constructor(private dialogService: DialogService) {}
public openDialogForm(): void {
const dialogRef = this.dialogService.open({
content: UserInfoComponent,
autoFocusedElement: '#name',
// You can add other DialogSettings options, such as title or actions.
});
}The following example demonstrates setting the initial focus when opening the Dialog through the service.