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 press tab button it should select highlighted option.
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.