fix(autocomplete): don't close when clicking inside custom origin (#19784)

We allow the consumer to set an alternate element that an autocomplete will be attached to, but our logic for closing when the user clicks outside the autocomplete didn't account for it which meant that it was being treated as not being part of the autocomplete.

Fixes #19771.

Author: crisbeto

src/material/autocomplete/autocomplete-trigger.ts

@@ -360,9 +360,11 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
               (this._isInsideShadowRoot && event.composedPath ? event.composedPath()[0] :
                                                                 event.target) as HTMLElement;
           const formField = this._formField ? this._formField._elementRef.nativeElement : null;
+          const customOrigin = this.connectedTo ? this.connectedTo.elementRef.nativeElement : null;
 
           return this._overlayAttached && clickTarget !== this._element.nativeElement &&
               (!formField || !formField.contains(clickTarget)) &&
+              (!customOrigin || !customOrigin.contains(clickTarget)) &&
               (!!this._overlayRef && !this._overlayRef.overlayElement.contains(clickTarget));
         }));
   }
@@ -722,7 +724,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
     positionStrategy.withPositions(positions);
   }
 
-  private _getConnectedElement(): ElementRef {
+  private _getConnectedElement(): ElementRef<HTMLElement> {
     if (this.connectedTo) {
       return this.connectedTo.elementRef;
     }

src/material/autocomplete/autocomplete.spec.ts

@@ -2593,6 +2593,25 @@ describe('MatAutocomplete', () => {
 
     expect(formControl.value).toBe('Cal', 'Expected new value to be propagated to model');
   }));
+
+  it('should not close when clicking inside alternate origin', () => {
+    const fixture = createComponent(AutocompleteWithDifferentOrigin);
+    fixture.detectChanges();
+    fixture.componentInstance.connectedTo = fixture.componentInstance.alternateOrigin;
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openPanel();
+    fixture.detectChanges();
+    zone.simulateZoneExit();
+
+    expect(fixture.componentInstance.trigger.panelOpen).toBe(true);
+
+    const origin = fixture.nativeElement.querySelector('.origin');
+    origin.click();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.trigger.panelOpen).toBe(true);
+  });
+
 });
 
 const SIMPLE_AUTOCOMPLETE_TEMPLATE = `