From d93406c07be65ce5da3aca300c371b6d6d1371ea Mon Sep 17 00:00:00 2001 From: crisbeto Date: Tue, 12 May 2020 19:02:28 +0200 Subject: [PATCH] fix(autocomplete): incorrectly detecting shadow DOM when inserted through an embedded view When an autocomplete is inserted, we try to figure out whether it's in the shadow DOM so that we can handle outside clicks properly. It seems like our logic can run too early in some cases, causing it to be detected incorrectly. These changes move the logic later in the process, right before the overlay is attached to the DOM. Fixes #19330. --- src/material/autocomplete/autocomplete-trigger.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts index 0a5905bca715..a5553f1d2aff 100644 --- a/src/material/autocomplete/autocomplete-trigger.ts +++ b/src/material/autocomplete/autocomplete-trigger.ts @@ -228,11 +228,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn const window = this._getWindow(); if (typeof window !== 'undefined') { - this._zone.runOutsideAngular(() => { - window.addEventListener('blur', this._windowBlurHandler); - }); - - this._isInsideShadowRoot = !!_getShadowRoot(this._element.nativeElement); + this._zone.runOutsideAngular(() => window.addEventListener('blur', this._windowBlurHandler)); } } @@ -619,6 +615,12 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn throw getMatAutocompleteMissingPanelError(); } + // We want to resolve this once, as late as possible so that we can be + // sure that the element has been moved into its final place in the DOM. + if (this._isInsideShadowRoot == null) { + this._isInsideShadowRoot = !!_getShadowRoot(this._element.nativeElement); + } + let overlayRef = this._overlayRef; if (!overlayRef) {