title: Prevent early validation when using autocomplete and "updateOn: 'blur'"
body: <p>My Angular app uses complex validations executed on the server side. For that reason, I've configured that updates and validations are only triggered on <em>blur</em> events:</p>
  
  <pre><code>this.form = new FormGroup(
      { ... },
      {
          updateOn: 'blur'
      }
  );
  </code></pre>
  
  <p>It works nicely except for fields that use autocompletion. If the autocompletion is open and the user clicks an entry with the mouse, an unfortunate sequence of events occurs:</p>
  
  <ul>
  <li>A <em>blur</em> event is triggered</li>
  <li>Validation runs with the incomplete old value and adds an error</li>
  <li>The selected autocomplete value is put into the field</li>
  <li>The autocompletion popup is closed and field gains the focus again</li>
  </ul>
  
  <p>The result looks as shown below (simplified example). A valid value is in the text field but it's marked as an error because the validation was run on the old value.</p>
  
  <p><a href="https://i.stack.imgur.com/HR3q3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HR3q3.png" alt="enter image description here"></a></p>
  
  <p>Technically, it's correct that the validation was run because clicking the autocompletion popup causes a <em>blur</em> event. However, from a UI perspective it's nonsense. The validation should occur when you're done with the field and move on to the next field.</p>
  
  <p>So how can I prevent the <em>blur</em> event and the early validation?</p>
  
  <p>I've created a simple <a href="https://stackblitz.com/edit/angular-material-with-angular-v5-jqlldq" rel="nofollow noreferrer">StackBlitz example</a>. It uses a similar setup but runs the validation on the client side (and checks that the text starts with 'ABC'). To reproduce the problem, enter "34" and then select "ABC34" from the autocompletion popup with your mouse.</p>