filter to menus in overlays

Author: jelbourn

src/cdk-experimental/menu/background-click-service.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {isClickInsideMenuOverlay} from '@angular/cdk-experimental/menu/menu';
 import {
   Directive,
   Input,
@@ -34,7 +35,6 @@ import {takeUntil} from 'rxjs/operators';
 import {CdkMenuPanel} from './menu-panel';
 import {MenuStack, MenuStackItem} from './menu-stack';
 import {throwExistingMenuStackError} from './menu-errors';
-import {BackgroundClickService} from './background-click-service';
 
 /**
  * Whether the context menu should close when some element is clicked.
@@ -157,7 +157,6 @@ export class CdkContextMenuTrigger implements OnDestroy {
     private readonly _overlay: Overlay,
     private readonly _contextMenuTracker: ContextMenuTracker,
     @Inject(CDK_CONTEXT_MENU_DEFAULT_OPTIONS) private readonly _options: ContextMenuOptions,
-    private readonly _closeService: BackgroundClickService,
     @Optional() private readonly _directionality?: Directionality
   ) {
     this._setMenuStackListener();
@@ -190,8 +189,12 @@ export class CdkContextMenuTrigger implements OnDestroy {
       }
 
       this._overlayRef.attach(this._getMenuContent());
-
-      this._closeService.startListener(shouldCloseMenu, this._menuStack);
+      this._overlayRef.outsidePointerEvents().subscribe(event => {
+        if (!isClickInsideMenuOverlay(event.target as Element)) {
+          this._overlayRef?.dispose();
+          this._overlayRef = null;
+        }
+      });
     }
   }
 

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

@@ -28,27 +28,7 @@ import {CDK_MENU, Menu} from './menu-interface';
 import {CdkMenuItem} from './menu-item';
 import {MenuStack, MenuStackItem, FocusNext} from './menu-stack';
 import {getItemPointerEntries} from './item-pointer-entries';
-import {CLOSE_DECIDER, CloseDecider} from './background-click-service';
-
-/** Whether the menu stack should be closed when target is clicked.  */
-export function shouldCloseMenu(target: Element | null) {
-  while (target) {
-    if (
-      target.classList.contains('cdk-menu-bar') ||
-      (target.classList.contains('cdk-menu') && !target.classList.contains('cdk-menu-inline'))
-    ) {
-      return false;
-    }
-    target = target.parentElement;
-  }
-  return true;
-}
 
-/** Provider for the background click decider function for the MenuBar. */
-export const MENUBAR_CLOSE_PROVIDER: {
-  provide: InjectionToken<CloseDecider>;
-  useValue: (target: Element | null) => boolean;
-} = {provide: CLOSE_DECIDER, useValue: shouldCloseMenu};
 
 /**
  * Directive applied to an element which configures it as a MenuBar by setting the appropriate
@@ -69,7 +49,6 @@ export const MENUBAR_CLOSE_PROVIDER: {
     {provide: CdkMenuGroup, useExisting: CdkMenuBar},
     {provide: CDK_MENU, useExisting: CdkMenuBar},
     {provide: MenuStack, useClass: MenuStack},
-    MENUBAR_CLOSE_PROVIDER,
   ],
 })
 export class CdkMenuBar extends CdkMenuGroup implements Menu, AfterContentInit, OnDestroy {

src/cdk-experimental/menu/menu-bar.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {isClickInsideMenuOverlay} from '@angular/cdk-experimental/menu/menu';
 import {
   Directive,
   Input,
@@ -34,21 +35,7 @@ import {CdkMenuPanel} from './menu-panel';
 import {Menu, CDK_MENU} from './menu-interface';
 import {throwExistingMenuStackError} from './menu-errors';
 import {FocusNext, MenuStack} from './menu-stack';
-import {BackgroundClickService, CloseDecider, CLOSE_DECIDER} from './background-click-service';
-
-/** Whether the standalone menu should be closed. */
-function shouldCloseMenu(target: Element | null) {
-  while (target) {
-    if (
-      (target.classList.contains('cdk-menu') && !target.classList.contains('cdk-menu-inline')) ||
-      target.classList.contains('cdk-standalone-menu-item')
-    ) {
-      return false;
-    }
-    target = target.parentElement;
-  }
-  return true;
-}
+
 
 /**
  * A directive to be combined with CdkMenuItem which opens the Menu it is bound to. If the
@@ -64,7 +51,7 @@ function shouldCloseMenu(target: Element | null) {
   exportAs: 'cdkMenuTriggerFor',
   host: {
     '(keydown)': '_toggleOnKeydown($event)',
-    '(mouseenter)': '_toggleOnMouseEnter()',
+    //'(mouseenter)': '_toggleOnMouseEnter()',
     '(click)': 'toggle()',
     'aria-haspopup': 'menu',
     '[attr.aria-expanded]': 'isMenuOpen()',
@@ -116,22 +103,9 @@ export class CdkMenuItemTrigger implements OnDestroy {
     private readonly _elementRef: ElementRef<HTMLElement>,
     protected readonly _viewContainerRef: ViewContainerRef,
     private readonly _overlay: Overlay,
-    private readonly _closeService: BackgroundClickService,
-    @Optional()
-    @Inject(CLOSE_DECIDER)
-    private readonly _closeHandler?: CloseDecider,
     @Optional() @Inject(CDK_MENU) private readonly _parentMenu?: Menu,
     @Optional() private readonly _directionality?: Directionality
-  ) {
-    this._registerCloseHandler();
-
-    // If there is no parent menu, this is a standalone trigger so we use the standalone trigger
-    // close handler. If the parent is defined, the trigger should (optionally) inject the close
-    // handler (sub-menus shouldn't inject).
-    if (!_parentMenu) {
-      this._closeHandler = shouldCloseMenu;
-    }
-  }
+  ) {}
 
   /** Open/close the attached menu if the trigger has been configured with one */
   toggle() {
@@ -147,10 +121,12 @@ export class CdkMenuItemTrigger implements OnDestroy {
 
       this._overlayRef = this._overlayRef || this._overlay.create(this._getOverlayConfig());
       this._overlayRef.attach(this._getPortal());
-
-      if (this._closeHandler) {
-        this._closeService.startListener(this._closeHandler, this._getMenuStack());
-      }
+      this._overlayRef.outsidePointerEvents().subscribe(event => {
+        if (!isClickInsideMenuOverlay(event.target as Element)) {
+          this._overlayRef?.dispose();
+          this._overlayRef = null;
+        }
+      });
     }
   }
 

src/cdk-experimental/menu/menu-item-trigger.ts

@@ -347,3 +347,15 @@ export class CdkMenu extends CdkMenuGroup implements Menu, AfterContentInit, OnI
     this.closed.complete();
   }
 }
+
+export function isClickInsideMenuOverlay(target: Element): boolean {
+  while (target?.parentElement) {
+    if (target.classList.contains('cdk-menu')) {
+      return !!target?.parentElement?.classList?.contains('cdk-overlay-panel');
+    }
+
+    target = target.parentElement;
+  }
+
+  return false;
+}

src/cdk-experimental/menu/menu.ts

@@ -12,7 +12,6 @@ import {
   CdkMenuGroup,
   CDK_MENU,
   MenuStack,
-  MENUBAR_CLOSE_PROVIDER,
 } from '@angular/cdk-experimental/menu';
 
 /**
@@ -37,7 +36,6 @@ import {
     {provide: CdkMenuBar, useExisting: MatMenuBar},
     {provide: CDK_MENU, useExisting: MatMenuBar},
     {provide: MenuStack, useClass: MenuStack},
-    MENUBAR_CLOSE_PROVIDER,
   ],
 })
 export class MatMenuBar extends CdkMenuBar {}