Angular Material 2 Autocomplete, mat-option element doesn't trigger keyup event

Question

I am looking for a way to figure out when an mat-option inside the mat-autocomplete was either clicked or was selected using the enter key.

The click event binding works as expected but the keyup.enter or even just the keyup event doesn't work.

Is this a bug in the library or I am doing something wrong?

<mat-option (click)="onEnter()" (keyup.enter)="onEnter()" *ngFor="let state of filteredStates | async" [value]="state.name">

Here's a live example - https://angular-3okq5u.stackblitz.io

Update: Please mention if there's a better way to handle the selection of an option at the <mat-option> element level.

Pursy

can you share your code in online ide?? – Narrowminded

Best way I have found is not to use Angular Material and instead just use HTML and Angular. <div class="use-angular-material-css-here" (keyup.enter)="worksEveryTime('YES')"> Plus you can still get the visual interaction with matRipple – Lament

Answer 1

Use onSelectionChange event in options if you want to trigger a function on option change. it will also trigger if you use keyboard to select the auto-complete option which you are trying to achieve here.

<input (keyup.enter)="onEnter($event)" matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete  #auto="matAutocomplete">
      <mat-option  (onSelectionChange)="onEnter($event)" (click)="onEnter()"  *ngFor="let state of filteredStates | async" [value]="state.name">
        <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
        <span>{{ state.name }}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>

Update

onSelectionChange event is triggering twice whenever you change the option and it's because of the existing issue in Angular material. Work around for the issue is also given that you should check the event before doing anything inside the function.

 onEnter(evt: any){
    if (evt.source.selected) {
    alert("hello ");
    }
  }

Working demo

Pavla

I want the event to come from the option and not the input. My expectation is that the way click is working, the keyup.enter on the option should also work. – Pursy

use onSelectionChange event if you want to trigger a function on change which you want to do I guess. <mat-option (onSelectionChange)="onEnter(val)" *ngFor="let state of filteredStates | async" [value]="state.name"> – Pavla

onSelectionChange fires twice for an option change if you check except for the first one. the isUserInput property in the event is true at first and then it becomes false. Which seems confusing to me – Pursy

I could certainly check for isUserInput being true and only then make my changes but that wouldn't that be a bad approach? – Pursy

This is a already existing issue in angular material and they have gave workaround too. github.com/angular/material2/issues/4094. check events before doing anything inside the function onEnter(evt:any){if (evt.source.selected) {alert("hello "); } } you can check the working demo stackblitz.com/edit/angular-material-autocomplete – Pavla

Thanks so much! :) That's what I wanted! Can you please update the same in your answer too so i can accept it? – Pursy

Answer 2

I used:

<mat-option (onSelectionChange)="choose(item)" 
            *ngFor="let item of keyWord" value="{{item}}"> {{item}} </mat-option>

Bund

Answer 3

autoActiveFirstOption

Using the autoActiveFirstOption directive it is possible to trigger the optionSelected event with the enter key. This is exactly the behaviour I wanted when trying to register the enter key event.

<mat-autocomplete autoActiveFirstOption (optionSelected)='setSearchValue($event.option.value)'>

Fula

Answer 4

I realized that instead of handling click or keyup.enter (which was not working) events on the mat-option element, we can just simply listen to selectionChange on the mat-select element itself. That way the keyboard enter press event is fired properly. And then access the value selected on the callback like this:

<mat-select [(value)]="selectedOption" (selectionChange)="setOption($event)">
    <mat-option *ngFor="let option of options" [value]="option.value" [attr.arialabel]="option.value">
      {{ lang.name }}
    </mat-option>
  </mat-select>

And then, handle it like:

setOption(optionChangedEvent: MatSelectChange) {
   console.log(optionChangedEvent.value);
   [rest of logic goes here]
}

Zamudio

mat-autocomplete does not have (selectionChange), so this answer is irrelevant – Dugald