diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts index f08faaaa33e8..d421d5acf5d6 100644 --- a/src/material/autocomplete/autocomplete-trigger.ts +++ b/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 { if (this.connectedTo) { return this.connectedTo.elementRef; } diff --git a/src/material/autocomplete/autocomplete.spec.ts b/src/material/autocomplete/autocomplete.spec.ts index c13393f7d6e0..560959316d3c 100644 --- a/src/material/autocomplete/autocomplete.spec.ts +++ b/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 = `