How to skip tab order from expansion panel?

Question

I have input fields inside mat-expansion-panel. When pressing tab key, the tab orders include mat-expansion-panel. so I set tabindex=-1 in but still does not skip mat-expansion-panel when pressing tab key.

When pressing tab key, cursor moves as below

But I want to skip Peronal data expansion panel and I want cursor to move as below

tabindex=-1 does not work. How can I achieve this? Here is stackbiz

Have you tried disabled input on mat-exapansion panel? – Chellappan வ Aug 12 '20 at 15:49 — Chellappan வ, Aug 12 '20 at 15:49

score 0 · Answer 1 · edited Aug 13 '21 at 20:40

Set a templateRef and access it with ViewChild in component

html

<mat-expansion-panel-header #panelHeader>

ts

@ViewChild('panelHeader', { read: ElementRef }) panelHeader: ElementRef;

Then in the AfterViewInit hook (remember to implement it in your class), set the tabIndex of the panelHeader as follows

@Component({
  selector: 'expansion-steps-example',
  templateUrl: 'expansion-steps-example.html',
  styleUrls: ['expansion-steps-example.css'],
})
export class ExpansionStepsExample implements AfterViewInit{
  @ViewChild('panelHeader', { read: ElementRef }) panelHeader: ElementRef;
  step = 0;

  setStep(index: number) {
    this.step = index;
  }

  nextStep() {
    this.step++;
  }

  prevStep() {
    this.step--;
  }

  ngAfterViewInit(){
    this.panelHeader.nativeElement.tabIndex = -1;
  }
}

score 0 · Answer 2 · answered Aug 13 '21 at 20:45

Set tabindex="1" on all your inputs. If you don't want to clutter your templates, you can use a directive that does that automatically:

@Directive({
  selector: 'input',
})
export class TabIndexOne {
  @HostBinding('tabindex') idx = 1;
}

Example StackBlitz

How to skip tab order from expansion panel?

2 Answers2