title: Angular Autocomplete Input selected and blur event race condition
body: <p>If you have an Angular Material MatAutoInput, and you listen to the option selection event and also listen to the blur event, you can see that if you select an item in the select list, the input blur event will get called as well. </p>
  
  <p>This is quite problematic, as I need to listen to the blur event in the input field for validation, and also watch the select. If the user clicks on an element, the blur causes to call my valuation logic on the field, which can mess things up.</p>
  
  <pre><code>&lt;form class="example-form"&gt;
    &lt;mat-form-field class="example-full-width"&gt;
      &lt;input type="text"
             placeholder="Pick one"
             aria-label="Number"
             matInput
             (blur)="onBlur()"
             [formControl]="myControl"
             [matAutocomplete]="auto"&gt;
      &lt;mat-autocomplete #auto="matAutocomplete" (optionSelected)="optionSelected()"&gt;
        &lt;mat-option *ngFor="let option of options" [value]="option"&gt;
          {{option}}
        &lt;/mat-option&gt;
      &lt;/mat-autocomplete&gt;
    &lt;/mat-form-field&gt;
  &lt;/form&gt;
  
  @Component({
    selector: 'autocomplete-simple-example',
    templateUrl: 'autocomplete-simple-example.html',
    styleUrls: ['autocomplete-simple-example.css'],
  })
  export class AutocompleteSimpleExample {
    myControl = new FormControl();
    options: string[] = ['One', 'Two', 'Three'];
  
    optionSelected(){
      console.log("option selected event, value: ", this.myControl.value);
  
    }
  
    onBlur(){
      console.log("Blur event, value:",  this.myControl.value);
    }
  }
  </code></pre>
  
  <p>Live demo: <a href="https://stackblitz.com/edit/angular-pp3ztn?file=src%2Fapp%2Fautocomplete-simple-example.ts" rel="noreferrer">https://stackblitz.com/edit/angular-pp3ztn?file=src%2Fapp%2Fautocomplete-simple-example.ts</a></p>
  
  <p>Is there any way to go around this issue? Or can I be absolute sure about this order of events happening? If for any reason the event would happen in a different order (first the select, then the blur) it can mess things up in my deeper input logic. </p>
  
  <p>My closes solution was to try to disable the blur event checking upon the click on the field, and only enabling the blur detection upon selecting an option OR blur event on the option list itself... which seemed quite hacky. Also, found a same-ish thread: <a href="https://github.com/angular/material/issues/3976" rel="noreferrer">https://github.com/angular/material/issues/3976</a> which sadly did not give any real solutions. </p>