title: Why is onSelectionChange called twice?
body: <p>I am using Angular Material Autocomplete as follows:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="displayFn" autoActiveFirstOption&gt;
    &lt;mat-option *ngFor="let option of filteredOptions$ | async" [value]="option" (onSelectionChange)="onSelectionChanged(option)" &gt;
      {{displayFn(option)}}
    &lt;/mat-option&gt;
  &lt;/mat-autocomplete&gt;    
  </code></pre>
  
  <p>This is the handler:</p>
  
  <pre><code>onSelectionChanged(option) {
    console.log('Selected ' + option.name);
  }
  </code></pre>
  
  <p>For some reason <code>onSelectionChanged()</code> gets called twice. The second time with the <strong>old</strong> value! I don't get why. What is happenning here?</p>
  
  <p>Selecting item 1 and then item 2 and then item 3 will print:</p>
  
  <pre class="lang-none prettyprint-override"><code>&gt; Selected item 1
  &gt; Selected item 2
  &gt; Selected item 1  // The unwanted call with the old value
  &gt; Selected item 3
  &gt; Selected item 2  // The unwanted call with the old value
  </code></pre>