How to select an option from mat dropdown using Tab key in angular

Question

I am working with a dropdown that has some keys and input fields.

Currently when I select the dropdown and press tab key then it will go to the second dropdown.

The behavior I am expecting is, after selecting the drop-down and I press the tab button it should select the next item in the dropdown.

Below is an image to show the behavior I am expecting

This is my code

<div class="fromTo">
   <mat-form-field style="width: 30%;">
      <mat-label>From</mat-label>
      <mat-select panelClass="fromSelect" style="margin-top:10% ;">
         <input matInput [(ngModel)]='searchValue' placeholder="Search" style="height: 35px; background-color: #f3f5f8; width: 98%;"/>
         <button mat-icon-button matSuffix (click)="onKeyAgency(searchValue)" class="cursor-pointer" type="button" style="float: right;position: absolute; right: 0;">
            <mat-icon class="search_icon">search</mat-icon>
         </button>
         <button mat-button (click)="showAdd=!showAdd" style="width: 100%;text-align: left;"><mat-icon>add</mat-icon>   Add New</button>
         <input matInput [ngClass]="{ 'hide':  showAdd}" [(ngModel)]='newPlace' placeholder="add" style="height: 35px; background-color: #f3f5f8; width: 98%;  position: inherit; "/>
         <button mat-icon-button matSuffix (click)="addPlace(newPlace)" [ngClass]="{ 'hide': showAdd }" class="cursor-pointer" type="button" style="float: right; position: absolute; right: 10%;">
            <mat-icon class="search_icon">done</mat-icon>
         </button>
         <button mat-icon-button matSuffix (click)="newPlace=''" [ngClass]="{ 'hide': showAdd }" class="cursor-pointer" type="button" style="float: right; position: absolute; right: 0;">
            <mat-icon class="search_icon">close</mat-icon>
         </button>
         <mat-option>None</mat-option>
         <mat-option *ngFor="let places of selectedAgencies" [value]="places">{{places}}</mat-option>
      </mat-select>
   </mat-form-field>
</div>

after adding tab index it gets selected but dropdown got closed — Shafeeq Mohammed
– Shafeeq Mohammed, Commented May 2, 2020 at 6:58

Akash · Accepted Answer · 2020-07-24 08:01:25Z

2

Add a tabindex to the options like below in your template -

 <div class="fromTo">
       <mat-form-field style="width: 30%;">
             <input (keydown)="onKeydown($event)" />
             <mat-option>None</mat-option>
              <!-- Add table index to matOptions-->
             <mat-option *ngFor="let places of selectedAgencies;let i = index" [value]="places" tabindex="index">{{places}}</mat-option>
          </mat-select>
       </mat-form-field>
    </div>

Then in your component, bind keydown event in the input field to a callback in your component. This should avoid the panel getting closed -

onKeydown(event) {
  if (event.keyCode === 9) {
       event.stopPropagation();
    }
}

answered Jul 24, 2020 at 8:01

Akash

4,6234 gold badges34 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Youp Bernoulli Over a year ago

This does not work. It contains a coding error let i = index -> tabindex="index" -> should be tabindex="{{i}}"

Collectives™ on Stack Overflow

How to select an option from mat dropdown using Tab key in angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related