fix(cdk-experimental/menu): ensure menu is closed out when clicking on an inline menu item (#20241)

Fixes an issue where clicking an item in an inline menu prevents any open popout menus from closing
out.

Author: andy9775

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

@@ -740,10 +740,11 @@ describe('MenuBar', () => {
   });
 
   describe('background click closeout', () => {
-    let fixture: ComponentFixture<MenuBarWithMenus>;
+    let fixture: ComponentFixture<MenuBarWithMenusAndInlineMenu>;
 
-    let menus: CdkMenu[];
+    let popoutMenus: CdkMenu[];
     let triggers: CdkMenuItemTrigger[];
+    let nativeInlineMenuItem: HTMLElement;
 
     /** open the attached menu. */
     function openMenu() {
@@ -753,8 +754,9 @@ describe('MenuBar', () => {
 
     /** set the menus and triggers arrays. */
     function grabElementsForTesting() {
-      menus = fixture.componentInstance.menus.toArray();
+      popoutMenus = fixture.componentInstance.menus.toArray().filter(el => !el._isInline());
       triggers = fixture.componentInstance.triggers.toArray();
+      nativeInlineMenuItem = fixture.componentInstance.nativeInlineMenuItem.nativeElement;
     }
 
     /** run change detection and, extract and set the rendered elements. */
@@ -766,77 +768,86 @@ describe('MenuBar', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [CdkMenuModule],
-        declarations: [MenuBarWithMenus],
+        declarations: [MenuBarWithMenusAndInlineMenu],
       }).compileComponents();
     }));
 
     beforeEach(() => {
-      fixture = TestBed.createComponent(MenuBarWithMenus);
+      fixture = TestBed.createComponent(MenuBarWithMenusAndInlineMenu);
       detectChanges();
     });
 
     it('should close out all open menus when clicked outside the menu tree', () => {
       openMenu();
-      expect(menus.length).toBe(1);
+      expect(popoutMenus.length).toBe(1);
 
       fixture.debugElement.query(By.css('#container')).nativeElement.click();
       detectChanges();
 
-      expect(menus.length).toBe(0);
+      expect(popoutMenus.length).toBe(0);
     });
 
     it('should not close open menus when clicking on a menu group', () => {
       openMenu();
-      expect(menus.length).toBe(1);
+      expect(popoutMenus.length).toBe(1);
 
       const menuGroups = fixture.debugElement.queryAll(By.directive(CdkMenuGroup));
       menuGroups[2].nativeElement.click();
       detectChanges();
 
-      expect(menus.length).toBe(1);
+      expect(popoutMenus.length).toBe(1);
     });
 
     it('should not close open menus when clicking on a menu', () => {
       openMenu();
-      expect(menus.length).toBe(1);
+      expect(popoutMenus.length).toBe(1);
 
       fixture.debugElement.query(By.directive(CdkMenu)).nativeElement.click();
       detectChanges();
 
-      expect(menus.length).toBe(1);
+      expect(popoutMenus.length).toBe(1);
     });
 
     it('should not close open menus when clicking on a menu bar', () => {
       openMenu();
-      expect(menus.length).toBe(1);
+      expect(popoutMenus.length).toBe(1);
 
       fixture.debugElement.query(By.directive(CdkMenuBar)).nativeElement.click();
       detectChanges();
 
-      expect(menus.length).toBe(1);
+      expect(popoutMenus.length).toBe(1);
     });
 
     it('should not close when clicking on a CdkMenuItemCheckbox element', () => {
       openMenu();
-      expect(menus.length).toBe(1);
+      expect(popoutMenus.length).toBe(1);
 
       fixture.debugElement.query(By.directive(CdkMenuItemCheckbox)).nativeElement.click();
       fixture.detectChanges();
 
-      expect(menus.length).toBe(1);
+      expect(popoutMenus.length).toBe(1);
     });
 
     it('should not close when clicking on a non-menu element inside menu', () => {
       openMenu();
-      expect(menus.length).toBe(1);
+      expect(popoutMenus.length).toBe(1);
 
       fixture.debugElement.query(By.css('#inner-element')).nativeElement.click();
       detectChanges();
 
-      expect(menus.length)
+      expect(popoutMenus.length)
         .withContext('menu should stay open if clicking on an inner span element')
         .toBe(1);
     });
+
+    it('should close the open menu when clicking on an inline menu item', () => {
+      openMenu();
+
+      nativeInlineMenuItem.click();
+      detectChanges();
+
+      expect(popoutMenus.length).toBe(0);
+    });
   });
 
   describe('Mouse handling', () => {
@@ -1171,10 +1182,16 @@ class MenuWithRadioButtons {
         </div>
       </ng-template>
     </div>
+
+    <div cdkMenu>
+      <button #inline_menu_item cdkMenuItem></button>
+    </div>
   `,
 })
-class MenuBarWithMenus {
+class MenuBarWithMenusAndInlineMenu {
   @ViewChildren(CdkMenu) menus: QueryList<CdkMenu>;
 
   @ViewChildren(CdkMenuItemTrigger) triggers: QueryList<CdkMenuItemTrigger>;
+
+  @ViewChild('inline_menu_item') nativeInlineMenuItem: ElementRef;
 }

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

@@ -29,12 +29,15 @@ import {MenuStack, MenuStackItem, FocusNext} from './menu-stack';
 import {getItemPointerEntries} from './item-pointer-entries';
 
 /**
- * Check if the given element is part of the cdk menu module.
+ * Whether the element is a menu bar or a popup menu.
  * @param target the element to check.
  * @return true if the given element is part of the menu module.
  */
 function isMenuElement(target: Element) {
-  return target.className.indexOf('cdk-menu') !== -1;
+  return (
+    target.classList.contains('cdk-menu-bar') ||
+    (target.classList.contains('cdk-menu') && !target.classList.contains('cdk-menu-inline'))
+  );
 }
 
 /**

src/cdk-experimental/menu/menu.ts

@@ -54,6 +54,7 @@ import {getItemPointerEntries} from './item-pointer-entries';
     '[tabindex]': '_isInline() ? 0 : null',
     'role': 'menu',
     'class': 'cdk-menu',
+    '[class.cdk-menu-inline]': '_isInline()',
     '[attr.aria-orientation]': 'orientation',
   },
   providers: [