fix(material/autocomplete): outside click in Angular zone. (#24817)

Fixes a bug in Angular Material `autocomplete` when outside click doesn't trigger `changeDetection`.

Fixes #24811

(cherry picked from commit 4e5e286)

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

@@ -3135,6 +3135,31 @@ describe('MDC-based MatAutocomplete', () => {
 
     expect(fixture.componentInstance.trigger.panelOpen).toBe(true);
   });
+
+  it('should emit from `autocomplete.closed` after click outside inside the NgZone', fakeAsync(() => {
+    const inZoneSpy = jasmine.createSpy('in zone spy');
+
+    const fixture = createComponent(SimpleAutocomplete, [
+      {provide: NgZone, useFactory: () => new NgZone({enableLongStackTrace: false})},
+    ]);
+    const ngZone = TestBed.inject(NgZone);
+    fixture.detectChanges();
+
+    fixture.componentInstance.trigger.openPanel();
+    fixture.detectChanges();
+    flush();
+
+    const subscription = fixture.componentInstance.trigger.autocomplete.closed.subscribe(() =>
+      inZoneSpy(NgZone.isInAngularZone()),
+    );
+    ngZone.onStable.emit(null);
+
+    dispatchFakeEvent(document, 'click');
+
+    expect(inZoneSpy).toHaveBeenCalledWith(true);
+
+    subscription.unsubscribe();
+  }));
 });
 
 const SIMPLE_AUTOCOMPLETE_TEMPLATE = `

src/material/autocomplete/autocomplete-trigger.ts

@@ -259,7 +259,12 @@ export abstract class _MatAutocompleteTriggerBase
 
     if (this.panelOpen) {
       // Only emit if the panel was visible.
-      this.autocomplete.closed.emit();
+      // The `NgZone.onStable` always emits outside of the Angular zone,
+      // so all the subscriptions from `_subscribeToClosingActions()` are also outside of the Angular zone.
+      // We should manually run in Angular zone to update UI after panel closing.
+      this._zone.run(() => {
+        this.autocomplete.closed.emit();
+      });
     }
 
     this.autocomplete._isOpen = this._overlayAttached = false;

src/material/autocomplete/autocomplete.spec.ts

@@ -3141,6 +3141,31 @@ describe('MatAutocomplete', () => {
 
     expect(fixture.componentInstance.trigger.panelOpen).toBe(true);
   });
+
+  it('should emit from `autocomplete.closed` after click outside inside the NgZone', fakeAsync(() => {
+    const inZoneSpy = jasmine.createSpy('in zone spy');
+
+    const fixture = createComponent(SimpleAutocomplete, [
+      {provide: NgZone, useFactory: () => new NgZone({enableLongStackTrace: false})},
+    ]);
+    const ngZone = TestBed.inject(NgZone);
+    fixture.detectChanges();
+
+    fixture.componentInstance.trigger.openPanel();
+    fixture.detectChanges();
+    flush();
+
+    const subscription = fixture.componentInstance.trigger.autocomplete.closed.subscribe(() =>
+      inZoneSpy(NgZone.isInAngularZone()),
+    );
+    ngZone.onStable.emit(null);
+
+    dispatchFakeEvent(document, 'click');
+
+    expect(inZoneSpy).toHaveBeenCalledWith(true);
+
+    subscription.unsubscribe();
+  }));
 });
 
 const SIMPLE_AUTOCOMPLETE_TEMPLATE = `