fix(cdk/menu): not closing when inside shadow DOM (#26112)

Fixes that the CDK menu wasn't closing on outside clicks when the trigger is inside the shadow DOM. The problem is that reading the `Event.target` doesn't work as expected in the shadow DOM and we have to go through a helper.

Fixes #26107.

Author: crisbeto

src/cdk/menu/context-menu-trigger.ts

@@ -15,6 +15,7 @@ import {
   STANDARD_DROPDOWN_BELOW_POSITIONS,
 } from '@angular/cdk/overlay';
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {_getEventTarget} from '@angular/cdk/platform';
 import {merge, partition} from 'rxjs';
 import {skip, takeUntil} from 'rxjs/operators';
 import {MENU_STACK, MenuStack} from './menu-stack';
@@ -191,7 +192,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
         outsideClicks = merge(nonAuxClicks, auxClicks.pipe(skip(1)));
       }
       outsideClicks.pipe(takeUntil(this.stopOutsideClicksListener)).subscribe(event => {
-        if (!this.isElementInsideMenuStack(event.target as Element)) {
+        if (!this.isElementInsideMenuStack(_getEventTarget(event)!)) {
           this.menuStack.closeAll();
         }
       });

src/cdk/menu/menu-trigger.ts

@@ -25,6 +25,7 @@ import {
   SPACE,
   UP_ARROW,
 } from '@angular/cdk/keycodes';
+import {_getEventTarget} from '@angular/cdk/platform';
 import {fromEvent} from 'rxjs';
 import {filter, takeUntil} from 'rxjs/operators';
 import {CDK_MENU, Menu} from './menu-interface';
@@ -191,20 +192,20 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
    * into.
    */
   private _subscribeToMouseEnter() {
-    // Closes any sibling menu items and opens the menu associated with this trigger.
-    const toggleMenus = () =>
-      this._ngZone.run(() => {
-        this._closeSiblingTriggers();
-        this.open();
-      });
-
     this._ngZone.runOutsideAngular(() => {
       fromEvent(this._elementRef.nativeElement, 'mouseenter')
         .pipe(
           filter(() => !this.menuStack.isEmpty() && !this.isOpen()),
           takeUntil(this.destroyed),
         )
         .subscribe(() => {
+          // Closes any sibling menu items and opens the menu associated with this trigger.
+          const toggleMenus = () =>
+            this._ngZone.run(() => {
+              this._closeSiblingTriggers();
+              this.open();
+            });
+
           if (this._menuAim) {
             this._menuAim.toggle(toggleMenus);
           } else {
@@ -283,19 +284,17 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
     if (this.overlayRef) {
       this.overlayRef
         .outsidePointerEvents()
-        .pipe(
-          filter(
-            e =>
-              e.target != this._elementRef.nativeElement &&
-              !this._elementRef.nativeElement.contains(e.target as Element),
-          ),
-          takeUntil(this.stopOutsideClicksListener),
-        )
+        .pipe(takeUntil(this.stopOutsideClicksListener))
         .subscribe(event => {
-          if (!this.isElementInsideMenuStack(event.target as Element)) {
-            this.menuStack.closeAll();
-          } else {
-            this._closeSiblingTriggers();
+          const target = _getEventTarget(event) as Element;
+          const element = this._elementRef.nativeElement;
+
+          if (target !== element && !element.contains(target)) {
+            if (!this.isElementInsideMenuStack(target)) {
+              this.menuStack.closeAll();
+            } else {
+              this._closeSiblingTriggers();
+            }
           }
         });
     }