fix(autocomplete): unable to open panel via click inside shado… (#15616)

Fixes clicking on an input to open its autocomplete not working if the consumer is using `ViewEncapsulation.ShadowDom`. The issue comes from the fact that inside the shadow DOM the `event.target` is set to the shadow root, rather than the element being clicked.

Fixes #15606.

Author: crisbeto

src/cdk/platform/features/shadow-dom.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+let shadowDomIsSupported: boolean;
+
+/** Checks whether the user's browser support Shadow DOM. */
+export function _supportsShadowDom(): boolean {
+  if (shadowDomIsSupported == null) {
+    const head = typeof document !== 'undefined' ? document.head : null;
+    shadowDomIsSupported = !!(head && ((head as any).createShadowRoot || head.attachShadow));
+  }
+
+  return shadowDomIsSupported;
+}

src/cdk/platform/public-api.ts

@@ -11,3 +11,4 @@ export * from './platform-module';
 export * from './features/input-types';
 export * from './features/passive-listeners';
 export * from './features/scrolling';
+export * from './features/shadow-dom';

src/dev-app/autocomplete/autocomplete-demo.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ViewChild} from '@angular/core';
+import {Component, ViewChild, ViewEncapsulation} from '@angular/core';
 import {FormControl, NgModel} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
@@ -27,6 +27,7 @@ export interface StateGroup {
   selector: 'autocomplete-demo',
   templateUrl: 'autocomplete-demo.html',
   styleUrls: ['autocomplete-demo.css'],
+  encapsulation: ViewEncapsulation.ShadowDom
 })
 export class AutocompleteDemo {
   stateCtrl: FormControl;

src/material/autocomplete/BUILD.bazel

@@ -23,6 +23,7 @@ ng_module(
         "//src/cdk/coercion",
         "//src/cdk/keycodes",
         "//src/cdk/overlay",
+        "//src/cdk/platform",
         "//src/cdk/portal",
         "//src/cdk/scrolling",
         "//src/material/core",
@@ -60,6 +61,7 @@ ng_test_library(
         "//src/cdk/bidi",
         "//src/cdk/keycodes",
         "//src/cdk/overlay",
+        "//src/cdk/platform",
         "//src/cdk/private/testing",
         "//src/cdk/scrolling",
         "//src/cdk/testing",

src/material/autocomplete/autocomplete-trigger.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {Directionality} from '@angular/cdk/bidi';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {DOWN_ARROW, ENTER, ESCAPE, TAB, UP_ARROW} from '@angular/cdk/keycodes';
 import {
   FlexibleConnectedPositionStrategy,
@@ -16,10 +17,12 @@ import {
   ScrollStrategy,
   ConnectedPosition,
 } from '@angular/cdk/overlay';
+import {_supportsShadowDom} from '@angular/cdk/platform';
 import {TemplatePortal} from '@angular/cdk/portal';
+import {ViewportRuler} from '@angular/cdk/scrolling';
 import {DOCUMENT} from '@angular/common';
-import {filter, take, switchMap, delay, tap, map} from 'rxjs/operators';
 import {
+  AfterViewInit,
   ChangeDetectorRef,
   Directive,
   ElementRef,
@@ -35,7 +38,6 @@ import {
   OnChanges,
   SimpleChanges,
 } from '@angular/core';
-import {ViewportRuler} from '@angular/cdk/scrolling';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
   _countGroupLabelsBeforeOption,
@@ -44,9 +46,10 @@ import {
   MatOptionSelectionChange,
 } from '@angular/material/core';
 import {MatFormField} from '@angular/material/form-field';
-import {Subscription, defer, fromEvent, merge, of as observableOf, Subject, Observable} from 'rxjs';
+import {defer, fromEvent, merge, Observable, of as observableOf, Subject, Subscription} from 'rxjs';
+import {delay, filter, map, switchMap, take, tap} from 'rxjs/operators';
+
 import {MatAutocomplete} from './autocomplete';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {MatAutocompleteOrigin} from './autocomplete-origin';
 
 
@@ -119,7 +122,8 @@ export function getMatAutocompleteMissingPanelError(): Error {
   exportAs: 'matAutocompleteTrigger',
   providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR]
 })
-export class MatAutocompleteTrigger implements ControlValueAccessor, OnChanges, OnDestroy {
+export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewInit, OnChanges,
+  OnDestroy {
   private _overlayRef: OverlayRef | null;
   private _portal: TemplatePortal;
   private _componentDestroyed = false;
@@ -148,6 +152,9 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnChanges,
    */
   private _canOpenOnNextFocus = true;
 
+  /** Whether the element is inside of a ShadowRoot component. */
+  private _isInsideShadowRoot: boolean;
+
   /** Stream of keyboard events that can close the panel. */
   private readonly _closeKeyEventStream = new Subject<void>();
 
@@ -213,14 +220,24 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnChanges,
               @Optional() @Inject(DOCUMENT) private _document: any,
               // @breaking-change 8.0.0 Make `_viewportRuler` required.
               private _viewportRuler?: ViewportRuler) {
+    this._scrollStrategy = scrollStrategy;
+  }
 
+  ngAfterViewInit() {
     if (typeof window !== 'undefined') {
-      _zone.runOutsideAngular(() => {
+      this._zone.runOutsideAngular(() => {
         window.addEventListener('blur', this._windowBlurHandler);
       });
-    }
 
-    this._scrollStrategy = scrollStrategy;
+      if (_supportsShadowDom()) {
+        const element = this._element.nativeElement;
+        const rootNode = element.getRootNode ? element.getRootNode() : null;
+
+        // We need to take the `ShadowRoot` off of `window`, because the built-in types are
+        // incorrect. See https://github.com/Microsoft/TypeScript/issues/27929.
+        this._isInsideShadowRoot = rootNode instanceof (window as any).ShadowRoot;
+      }
+    }
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -341,19 +358,20 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnChanges,
   /** Stream of clicks outside of the autocomplete panel. */
   private _getOutsideClickStream(): Observable<any> {
     return merge(
-      fromEvent(this._document, 'click') as Observable<MouseEvent>,
-      fromEvent(this._document, 'touchend') as Observable<TouchEvent>
-    )
-    .pipe(filter(event => {
-      const clickTarget = event.target as HTMLElement;
-      const formField = this._formField ?
-          this._formField._elementRef.nativeElement : null;
-
-      return this._overlayAttached &&
-              clickTarget !== this._element.nativeElement &&
+               fromEvent(this._document, 'click') as Observable<MouseEvent>,
+               fromEvent(this._document, 'touchend') as Observable<TouchEvent>)
+        .pipe(filter(event => {
+          // If we're in the Shadow DOM the event target will be the shadow root so we have to fall
+          // back to check the first element in the path of the click event.
+          const clickTarget =
+              (this._isInsideShadowRoot && event.composedPath ? event.composedPath()[0] :
+                                                                event.target) as HTMLElement;
+          const formField = this._formField ? this._formField._elementRef.nativeElement : null;
+
+          return this._overlayAttached && clickTarget !== this._element.nativeElement &&
               (!formField || !formField.contains(clickTarget)) &&
               (!!this._overlayRef && !this._overlayRef.overlayElement.contains(clickTarget));
-    }));
+        }));
   }
 
   // Implemented as part of ControlValueAccessor.

src/material/autocomplete/autocomplete.spec.ts

@@ -1,8 +1,9 @@
 import {Directionality} from '@angular/cdk/bidi';
 import {DOWN_ARROW, ENTER, ESCAPE, SPACE, TAB, UP_ARROW} from '@angular/cdk/keycodes';
 import {Overlay, OverlayContainer} from '@angular/cdk/overlay';
-import {MockNgZone} from '@angular/cdk/private/testing';
+import {_supportsShadowDom} from '@angular/cdk/platform';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
+import {MockNgZone} from '@angular/cdk/private/testing';
 import {
   clearElement,
   createKeyboardEvent,
@@ -22,6 +23,7 @@ import {
   Type,
   ViewChild,
   ViewChildren,
+  ViewEncapsulation,
 } from '@angular/core';
 import {
   async,
@@ -39,7 +41,9 @@ import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {EMPTY, Observable, Subject, Subscription} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
+
 import {MatInputModule} from '../input/index';
+
 import {
   getMatAutocompleteMissingPanelError,
   MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
@@ -514,6 +518,49 @@ describe('MatAutocomplete', () => {
 
   });
 
+  it('should not close the panel when clicking on the input', fakeAsync(() => {
+       const fixture = createComponent(SimpleAutocomplete);
+       fixture.detectChanges();
+       const input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+       dispatchFakeEvent(input, 'focusin');
+       fixture.detectChanges();
+       zone.simulateZoneExit();
+
+       expect(fixture.componentInstance.trigger.panelOpen)
+           .toBe(true, 'Expected panel to be opened on focus.');
+
+       input.click();
+       fixture.detectChanges();
+
+       expect(fixture.componentInstance.trigger.panelOpen)
+           .toBe(true, 'Expected panel to remain opened after clicking on the input.');
+     }));
+
+  it('should not close the panel when clicking on the input inside shadow DOM', fakeAsync(() => {
+       // This test is only relevant for Shadow DOM-capable browsers.
+       if (!_supportsShadowDom()) {
+         return;
+       }
+
+       const fixture = createComponent(SimpleAutocompleteShadowDom);
+       fixture.detectChanges();
+       const input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+       dispatchFakeEvent(input, 'focusin');
+       fixture.detectChanges();
+       zone.simulateZoneExit();
+
+       expect(fixture.componentInstance.trigger.panelOpen)
+           .toBe(true, 'Expected panel to be opened on focus.');
+
+       input.click();
+       fixture.detectChanges();
+
+       expect(fixture.componentInstance.trigger.panelOpen)
+           .toBe(true, 'Expected panel to remain opened after clicking on the input.');
+     }));
+
   it('should have the correct text direction in RTL', () => {
     const rtlFixture = createComponent(SimpleAutocomplete, [
       {provide: Directionality, useFactory: () => ({value: 'rtl', change: EMPTY})},
@@ -2437,26 +2484,26 @@ describe('MatAutocomplete', () => {
   }));
 });
 
-@Component({
-  template: `
-    <mat-form-field [floatLabel]="floatLabel" [style.width.px]="width">
-      <input
-        matInput
-        placeholder="State"
-        [matAutocomplete]="auto"
-        [matAutocompletePosition]="position"
-        [matAutocompleteDisabled]="autocompleteDisabled"
-        [formControl]="stateCtrl">
-    </mat-form-field>
-
-    <mat-autocomplete [class]="panelClass" #auto="matAutocomplete" [displayWith]="displayFn"
-      [disableRipple]="disableRipple" (opened)="openedSpy()" (closed)="closedSpy()">
-      <mat-option *ngFor="let state of filteredStates" [value]="state">
-        <span>{{ state.code }}: {{ state.name }}</span>
-      </mat-option>
-    </mat-autocomplete>
-  `
-})
+const SIMPLE_AUTOCOMPLETE_TEMPLATE = `
+  <mat-form-field [floatLabel]="floatLabel" [style.width.px]="width">
+    <input
+      matInput
+      placeholder="State"
+      [matAutocomplete]="auto"
+      [matAutocompletePosition]="position"
+      [matAutocompleteDisabled]="autocompleteDisabled"
+      [formControl]="stateCtrl">
+  </mat-form-field>
+
+  <mat-autocomplete [class]="panelClass" #auto="matAutocomplete" [displayWith]="displayFn"
+    [disableRipple]="disableRipple" (opened)="openedSpy()" (closed)="closedSpy()">
+    <mat-option *ngFor="let state of filteredStates" [value]="state">
+      <span>{{ state.code }}: {{ state.name }}</span>
+    </mat-option>
+  </mat-autocomplete>
+`;
+
+@Component({template: SIMPLE_AUTOCOMPLETE_TEMPLATE})
 class SimpleAutocomplete implements OnDestroy {
   stateCtrl = new FormControl();
   filteredStates: any[];
@@ -2507,6 +2554,10 @@ class SimpleAutocomplete implements OnDestroy {
   }
 }
 
+@Component({template: SIMPLE_AUTOCOMPLETE_TEMPLATE, encapsulation: ViewEncapsulation.ShadowDom})
+class SimpleAutocompleteShadowDom extends SimpleAutocomplete {
+}
+
 @Component({
   template: `
     <mat-form-field *ngIf="isVisible">

tools/public_api_guard/cdk/platform.d.ts

@@ -1,3 +1,5 @@
+export declare function _supportsShadowDom(): boolean;
+
 export declare function getRtlScrollAxisType(): RtlScrollAxisType;
 
 export declare function getSupportedInputTypes(): Set<string>;

tools/public_api_guard/material/autocomplete.d.ts

@@ -69,7 +69,7 @@ export declare class MatAutocompleteSelectedEvent {
     option: MatOption);
 }
 
-export declare class MatAutocompleteTrigger implements ControlValueAccessor, OnChanges, OnDestroy {
+export declare class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy {
     _onChange: (value: any) => void;
     _onTouched: () => void;
     readonly activeOption: MatOption | null;
@@ -86,6 +86,7 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, OnC
     _handleInput(event: KeyboardEvent): void;
     _handleKeydown(event: KeyboardEvent): void;
     closePanel(): void;
+    ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     openPanel(): void;