MdAutocomplete onSelectionChange fired multiple times

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Fire only once with the correct value.

What is the current behavior?

The event onSelectionChange fires twice instead of once. The first time with the correct value, the second time with the last used value.

Also, the behavior changes if we select the value through the keyboard (arrow keys), in this case it fires twice onSelectionChange and once onKeyupEnter. Since pressing the enter key automatically fires the onSelectionChange event, I removed it. (but this should probably be fixed somehow to behave properly, or not, depends on you)

But, even if I disable the onKeyupEnter, I keep getting two events fired instead of one and didn’t find a fix around that.

    <form>
      <i class="material-icons">search</i>
      <md-form-field>
        <input
          type="text"
          mdInput
          placeholder="Search"
          [formControl]="textFilterControl"
          [mdAutocomplete]="auto"
          (keyup.enter)="onKeyupEnter($event)" // I eventually removed that, duplicated event fired (3rd)
        >
      </md-form-field>
      <md-autocomplete #auto="mdAutocomplete">
         <md-option
           *ngFor="let movie of filteredMovies | async"
           [value]="movie.title"
           (onSelectionChange)="onSelectionChange($event)" // Fires two events instead of one.
         >
            {{ movie.title }}
         </md-option>
      </md-autocomplete>
    </form>

What are the steps to reproduce?

Try selecting several times a value in the list. Works correctly only the first time.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"dependencies": {
    "@angular-redux/store": "6.5.7",
    "@angular/animations": "4.4.3",
    "@angular/cdk": "2.0.0-beta.11",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "2.0.0-beta.11",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "hammerjs": "2.0.8",
    "redux": "3.7.2",
    "redux-logger": "3.0.6",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.3",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "6.0.88",
    "@types/redux-logger": "3.0.4",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }

Is there anything else we should know?

Seems related to https://github.com/angular/material2/issues/4356

You can reproduce the issue through this repository: https://github.com/Vadorequest/challenge-awesome-movies-viewer/blob/master/src/app/header/header.component.html

A simple clone & npm install should do. App runs on http://localhost:4200/

[Vadorequest]

@RichardBoyder this is how I fixed it: https://github.com/Vadorequest/challenge-awesome-movies-viewer/commit/8e1db4e291dbdf20edba798fa24a2304f9506094

[willshowell]

@RichardBoyder also yes, the optionSelected event will work for your use case. It was added to specifically address this problem.

<mat-autocomplete (optionSelected)="selectBeneficiary($event.option.value)">
  <mat-option *ngFor="let beneficiary of beneficiaryList" [value]="beneficiary.value">
</mat-autocomplete>

selectBeneficiary(value) {
  const selected = this.beneficiaryList.find(b => b.value === value);
  console.log('You selected beneficiary:', selected);
}