fix(material/autocomplete): mark control as touched once panel is closed

Currently we mark the autocomplete control as touched on `blur`. The problem is that the `blur` event happens a split second before the panel is closed which can cause the error styling to show up and disappear quickly which looks glitchy. These changes change it so that the control is marked as touched once the panel is closed.

Also makes a couple of underscored properties private since they weren't used anywhere in the view.

Fixes #18313.

Author: crisbeto

src/material-experimental/mdc-autocomplete/autocomplete.spec.ts

@@ -827,6 +827,54 @@ describe('MDC-based MatAutocomplete', () => {
           .toBe(false, `Expected control to stay pristine if value is set programmatically.`);
     });
 
+    it('should mark the autocomplete control as touched when the panel is closed via the keyboard',
+    fakeAsync(() => {
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+      zone.simulateZoneExit();
+
+      expect(fixture.componentInstance.stateCtrl.touched)
+          .toBe(false, `Expected control to start out untouched.`);
+
+      dispatchKeyboardEvent(input, 'keydown', TAB);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.stateCtrl.touched)
+          .toBe(true, `Expected control to become touched on blur.`);
+    }));
+
+  it('should mark the autocomplete control as touched when the panel is closed by clicking away',
+    fakeAsync(() => {
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+      zone.simulateZoneExit();
+
+      expect(fixture.componentInstance.stateCtrl.touched)
+          .toBe(false, `Expected control to start out untouched.`);
+
+      dispatchFakeEvent(document, 'click');
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.stateCtrl.touched)
+          .toBe(true, `Expected control to become touched on blur.`);
+    }));
+
+  it('should not mark the autocomplete control as touched when the panel is closed ' +
+    'programmatically', fakeAsync(() => {
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+      zone.simulateZoneExit();
+
+      expect(fixture.componentInstance.stateCtrl.touched)
+          .toBe(false, `Expected control to start out untouched.`);
+
+      fixture.componentInstance.trigger.closePanel();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.stateCtrl.touched)
+          .toBe(false, `Expected control to stay untouched.`);
+    }));
+
     it('should mark the autocomplete control as touched on blur', () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();

src/material/autocomplete/autocomplete-trigger.ts

@@ -545,6 +545,7 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
     }
 
     this.closePanel();
+    this._onTouched();
   }
 
   /**
@@ -772,7 +773,6 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
     // 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()',
     '(input)': '_handleInput($event)',
     '(keydown)': '_handleKeydown($event)',
   },

src/material/autocomplete/autocomplete.spec.ts

@@ -822,18 +822,53 @@ 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();
-      expect(fixture.componentInstance.stateCtrl.touched)
-          .toBe(false, `Expected control to start out untouched.`);
+    it('should mark the autocomplete control as touched when the panel is closed via the keyboard',
+      fakeAsync(() => {
+        fixture.componentInstance.trigger.openPanel();
+        fixture.detectChanges();
+        zone.simulateZoneExit();
 
-      dispatchFakeEvent(input, 'blur');
-      fixture.detectChanges();
+        expect(fixture.componentInstance.stateCtrl.touched)
+            .toBe(false, `Expected control to start out untouched.`);
 
-      expect(fixture.componentInstance.stateCtrl.touched)
-          .toBe(true, `Expected control to become touched on blur.`);
-    });
+        dispatchKeyboardEvent(input, 'keydown', TAB);
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.stateCtrl.touched)
+            .toBe(true, `Expected control to become touched on blur.`);
+      }));
+
+    it('should mark the autocomplete control as touched when the panel is closed by clicking away',
+      fakeAsync(() => {
+        fixture.componentInstance.trigger.openPanel();
+        fixture.detectChanges();
+        zone.simulateZoneExit();
+
+        expect(fixture.componentInstance.stateCtrl.touched)
+            .toBe(false, `Expected control to start out untouched.`);
+
+        dispatchFakeEvent(document, 'click');
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.stateCtrl.touched)
+            .toBe(true, `Expected control to become touched on blur.`);
+      }));
+
+    it('should not mark the autocomplete control as touched when the panel is closed ' +
+      'programmatically', fakeAsync(() => {
+        fixture.componentInstance.trigger.openPanel();
+        fixture.detectChanges();
+        zone.simulateZoneExit();
+
+        expect(fixture.componentInstance.stateCtrl.touched)
+            .toBe(false, `Expected control to start out untouched.`);
+
+        fixture.componentInstance.trigger.closePanel();
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.stateCtrl.touched)
+            .toBe(false, `Expected control to stay untouched.`);
+      }));
 
     it('should disable the input when used with a value accessor and without `matInput`', () => {
       overlayContainer.ngOnDestroy();