Is there a way to target a submit button within the
<wknw-dialog-actions></wknw-dialog-actions>autoFocus property in a MatDialog?
To provide better clarity, here is the structure of a dialog component:
contact-group-edit.component.ts (dialog opened via matDialog.open...)
<form [formGroup]="contactGroupForm" [appConnectForm]="contactGroup$ | async">
<wknw-dialog-title (closeEvent)="close()"> {{title}} </wknw-dialog-title>
<wknw-dialog-content>
<mat-form-field>
<mat-label i18n>Name</mat-label>
<input matInput formControlName="name" />
</mat-form-field>
</wknw-dialog-content>
<wknw-dialog-actions <-- my submit button is inside this component -->
(confirmEvent)="save()"
(closeEvent)="close()"
[dialogType]="dialogType"
[submitDisabled]="!contactGroupForm.valid"
></wknw-dialog-actions>
</form>
wknw-dialog-actions.component.ts
<div #ref><ng-content></ng-content></div>
<ng-container *ngIf="!ref.hasChildNodes()">
<button mat-raised-button mat-dialog-close *ngIf="showButtonCancel" (click)="closeAction()" i18n>
Cancel
</button>
// button that needs to be focused below
<button mat-raised-button [disabled]="submitDisabled" [color]="confirmButtonColor" (click)="confirmAction()" class="btn-confirm-action">
{{confirmButtonTitle}}
</button>
</ng-container>
I have attempted setting an id for the component itself, like:
<wknw-dialog-actions id="actions"...const dialogConfig: MatDialogConfig = {
autoFocus: '#actions .btn-confirm-action'
}
However, this approach was unsuccessful.