How Can We Select Mat Option When Press On Tab Key?, It Should Work Like Enter Button In Mat-autocomplete Angular 6

How can we select mat option when press on tab key?, it should work like enter button in mat-autocomplete angular 6... In below URL its working when press enter, but whenever we pr

Solution 1:

You can subscribe to this.autoTrigger.panelClosingActions, see stackblitz

If your .html is like

<mat-form-field class="example-full-width">
    <!--see the reference variable-->
    <input #typehead type="text" ...>
    <mat-autocomplete #auto="matAutocomplete">
       ...
    </mat-autocomplete>
</mat-form-field>

In your .ts

@ViewChild( 'typehead', {read:MatAutocompleteTrigger})  autoTrigger: MatAutocompleteTrigger; 

ngAfterViewInit()
  {
    this.autoTrigger.panelClosingActions.subscribe( x =>{
      if (this.autoTrigger.activeOption)
      {
        console.log(this.autoTrigger.activeOption.value)
        this.myControl.setValue(this.autoTrigger.activeOption.value)
      }
    } )
  }

Update a better aproach (using a directive) in this answer