Focusing Angular Material Chip programatically within Material Stepper Child Component

Question

My Problem:

I do have a Angular Material mat-chip-listbox component with mat-chip-option childs within Angular Material Stepper. When this step is openened i want the first child to get focus().

`<mat-step #step2>
    <ng-template matStepLabel>
      <mat-icon>check_circle_outline</mat-icon>
      text
    </ng-template>
    <app-custom  *ngIf="step1.completed">  // to trigger AfterviewInit 
    </app-custom>
 <button>
 </button>
 ...
</mat-step>`

Within the app-custom component

`<mat-chip-listbox>
  <div *ngFor="let item of items$ | async " >
    <mat-chip-option color="accent" #chip>
      {{item.viewValue}}
    </mat-chip-option>
  </div>
</mat-chip-listbox>`

Now i want to focus it when its rendered, in ngAfterViewInit life cycle.

`ngAfterViewInit(): void {
  this.chip.focus();
}`

Now this only works by setting a Timeout. As this is considered bad practice i am looking for another solution.

Ive tried all lifecyle hooks and to detect rendering of the last element using ViewChildren. Wheter subscription nor a direct approach worked. It seems that all these events trigger too early and the focus of the stepper triggers afterwards. So a step is selected instead of the chip.

I also tried binding to the (selectionChange) event of the stepper but same behaviour.

Even tried changing Tabindex by DOM manipulation. Within ts of component or as own directive. Like:

const headerElement = 
  this.elementRef.nativeElement.querySelector('.mat-step-header');
    if (headerElement) {
       headerElement.setAttribute('tabindex', '-1');
}

Here a stackblitz example trying to focus in Afterviewinit, only working with timeout.

https://stackblitz.com/edit/angular-9-material-starter-sq7ruh?file=src/app/app.component.html

Any ideas / hints are very apreciated!

Focusing Angular Material Chip programatically within Material Stepper Child Component

0 Answers0