0

I'm aware of the property autoFocus, that can receive a CSS Selector to focus an element when a MatDialog is open. I need to target a submit button that is inside the component <wknw-dialog-actions></wknw-dialog-actions>, how can I target that?

Here's a complete dialog component structure for better visualization:

contact-group-edit.component.ts (which is a dialog, opened by 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've tried setting an id to the component itself, like:

<wknw-dialog-actions id="actions"... and targetting the submit button like:

const dialogConfig: MatDialogConfig = {
    autoFocus: '#actions .btn-confirm-action'
}

Unsuccessful.

Ruslan
  • 1
  • 2

1 Answers1

1
var btn = document.getElementById("id of button");
btn.focus();
toyota Supra
  • 3,181
  • 4
  • 15
  • 19
Magashegyi Ádám
  • 11
  • 2
  • 1
    Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. **Would you kindly [edit] your answer to include additional details for the benefit of the community?** – Jeremy Caney Aug 17 '23 at 02:09