fix(autocomplete): form control being marked as touched too early when clicking on an option

Currently we mark the autocomplete form control as touched on every blur event. This can be an issue for the case where a control is being validated on blur, because the input becomes blurred as soon as the user has their pointer down on something else (e.g. one of the options). This will cause validation to run before the value has been assigned. With these changes we switch to marking the control as touched once the panel has been closed.

Fixes #11903.

Author: crisbeto

src/material/autocomplete/autocomplete-trigger.ts

@@ -115,7 +115,7 @@ export function getMatAutocompleteMissingPanelError(): Error {
     // Note: we use `focusin`, as opposed to `focus`, in order to open the panel
     // a little earlier. This avoids issues where IE delays the focusing of the input.
     '(focusin)': '_handleFocus()',
-    '(blur)': '_onTouched()',
+    '(blur)': '_handleBlur()',
     '(input)': '_handleInput($event)',
     '(keydown)': '_handleKeydown($event)',
   },
@@ -336,7 +336,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
   /** Stream of autocomplete option selections. */
   readonly optionSelections: Observable<MatOptionSelectionChange> = defer(() => {
     if (this.autocomplete && this.autocomplete.options) {
-     return merge(...this.autocomplete.options.map(option => option.onSelectionChange));
+      return merge(...this.autocomplete.options.map(option => option.onSelectionChange));
     }
 
     // If there are any subscribers before `ngAfterViewInit`, the `autocomplete` will be undefined.
@@ -459,6 +459,16 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
     }
   }
 
+  _handleBlur(): void {
+    // Blur events will fire as soon as the user has their pointer down on an option. We don't
+    // mark the control as touched in this case, because it can cause the validation to be run
+    // before a value has been assigned. Instead, we skip marking it as touched from here
+    // and we do so once the panel has closed.
+    if (!this.panelOpen) {
+      this._onTouched();
+    }
+  }
+
   /**
    * In "auto" mode, the label will animate down as soon as focus is lost.
    * This causes the value to jump when selecting an option with the mouse.
@@ -596,6 +606,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
     }
 
     this.closePanel();
+    this._onTouched();
   }
 
   /**

src/material/autocomplete/autocomplete.spec.ts

@@ -810,9 +810,7 @@ describe('MatAutocomplete', () => {
           .toBe(false, `Expected control to stay pristine if value is set programmatically.`);
     });
 
-    it('should mark the autocomplete control as touched on blur', () => {
-      fixture.componentInstance.trigger.openPanel();
-      fixture.detectChanges();
+    it('should mark the autocomplete control as touched on blur while panel is closed', () => {
       expect(fixture.componentInstance.stateCtrl.touched)
           .toBe(false, `Expected control to start out untouched.`);
 
@@ -823,6 +821,28 @@ describe('MatAutocomplete', () => {
           .toBe(true, `Expected control to become touched on blur.`);
     });
 
+    it('should defer marking the control as touched if it is blurred while open', () => {
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+      zone.simulateZoneExit();
+
+      expect(fixture.componentInstance.stateCtrl.touched)
+          .toBe(false, 'Expected control to start out untouched.');
+
+      dispatchFakeEvent(input, 'blur');
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.stateCtrl.touched)
+          .toBe(false, 'Expected control to stay untouched.');
+
+      // Simulate clicking outside the panel.
+      dispatchFakeEvent(document, 'click');
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.stateCtrl.touched)
+          .toBe(true, 'Expected control to become touched once panel closes.');
+    });
+
     it('should disable the input when used with a value accessor and without `matInput`', () => {
       overlayContainer.ngOnDestroy();
       fixture.destroy();

tools/public_api_guard/material/autocomplete.d.ts

@@ -82,6 +82,7 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
     readonly panelOpen: boolean;
     position: 'auto' | 'above' | 'below';
     constructor(_element: ElementRef<HTMLInputElement>, _overlay: Overlay, _viewContainerRef: ViewContainerRef, _zone: NgZone, _changeDetectorRef: ChangeDetectorRef, scrollStrategy: any, _dir: Directionality, _formField: MatFormField, _document: any, _viewportRuler?: ViewportRuler | undefined);
+    _handleBlur(): void;
     _handleFocus(): void;
     _handleInput(event: KeyboardEvent): void;
     _handleKeydown(event: KeyboardEvent): void;