fix: ensure that entering an ancestor Menu Item without a submen clos…

…es related submenus
adobe · Jun 22, 2022 · efe5fa1 · efe5fa1
1 parent c8cde1e
commit efe5fa1
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 2 deletions.
diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts
@@ -27,6 +27,7 @@ import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 import { openOverlay } from '@spectrum-web-components/overlay/src/loader.js';
+import { OverlayCloseEvent } from '@spectrum-web-components/overlay/src/overlay-events.js';
 
 import menuItemStyles from './menu-item.css.js';
 import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
@@ -331,9 +332,18 @@ export class MenuItem extends LikeAnchor(Focusable) {
         if (!this.hasAttribute('id')) {
             this.id = `sp-menu-item-${MenuItem.instanceCount++}`;
         }
+        this.addEventListener('pointerenter', this.closeOverlaysForRoot);
     }
 
-    public closeOverlay?: (leave?: boolean) => Promise<void>;
+    protected closeOverlaysForRoot(): void {
+        if (this.open) return;
+        const overalyCloseEvent = new OverlayCloseEvent({
+            root: this.menuData.focusRoot,
+        });
+        this.dispatchEvent(overalyCloseEvent);
+    }
+
+    public closeOverlay?: () => Promise<void>;
 
     protected handleSubmenuClick(): void {
         this.openOverlay();
@@ -354,7 +364,7 @@ export class MenuItem extends LikeAnchor(Focusable) {
         if (this.hasSubmenu && this.open) {
             this.leaveTimeout = setTimeout(() => {
                 delete this.leaveTimeout;
-                if (this.closeOverlay) this.closeOverlay(true);
+                if (this.closeOverlay) this.closeOverlay();
             }, POINTERLEAVE_TIMEOUT);
         }
     }
@@ -420,6 +430,7 @@ export class MenuItem extends LikeAnchor(Focusable) {
         this.closeOverlay = closeSubmenu;
         const cleanup = (event: CustomEvent<OverlayOpenCloseDetail>): void => {
             event.stopPropagation();
+            delete this.closeOverlay;
             returnSubmenu();
             this.open = false;
             this.active = false;

diff --git a/packages/menu/test/submenu.test.ts b/packages/menu/test/submenu.test.ts
@@ -767,6 +767,65 @@ describe('Submenu', () => {
         expect(activeOverlays.length).to.equal(0);
     });
 
+    it('closes decendent menus when Menu Item in ancestor without a submenu is pointerentered', async () => {
+        const el = await styledFixture<ActionMenu>(html`
+            <sp-action-menu>
+                <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
+                <sp-menu-group role="none">
+                    <span slot="header">New York</span>
+                    <sp-menu-item id="no-submenu">Bronx</sp-menu-item>
+                    <sp-menu-item id="submenu-item-1">
+                        Brooklyn
+                        <sp-menu slot="submenu">
+                            <sp-menu-item id="submenu-item-2">
+                                Ft. Greene
+                            </sp-menu-item>
+                            <sp-menu-item disabled>Park Slope</sp-menu-item>
+                            <sp-menu-item id="ancestor-item">
+                                Williamsburg
+                            </sp-menu-item>
+                        </sp-menu>
+                    </sp-menu-item>
+                    <sp-menu-item id="submenu-item-3">
+                        Manhattan
+                        <sp-menu slot="submenu">
+                            <sp-menu-item disabled>SoHo</sp-menu-item>
+                            <sp-menu-item>Union Square</sp-menu-item>
+                            <sp-menu-item>Upper East Side</sp-menu-item>
+                        </sp-menu>
+                    </sp-menu-item>
+                </sp-menu-group>
+            </sp-action-menu>
+        `);
+
+        const rootMenu = el.querySelector('#submenu-item-1') as MenuItem;
+        const noSubmenu = el.querySelector('#no-submenu') as MenuItem;
+
+        expect(el.open).to.be.false;
+        let opened = oneEvent(el, 'sp-opened');
+        el.click();
+        await opened;
+        expect(el.open).to.be.true;
+
+        let activeOverlays = document.querySelectorAll('active-overlay');
+        expect(activeOverlays.length).to.equal(1);
+        opened = oneEvent(rootMenu, 'sp-opened');
+        rootMenu.dispatchEvent(
+            new PointerEvent('pointerenter', { bubbles: true })
+        );
+        await opened;
+        activeOverlays = document.querySelectorAll('active-overlay');
+        expect(activeOverlays.length).to.equal(2);
+
+        const closed = oneEvent(rootMenu, 'sp-closed');
+        noSubmenu.dispatchEvent(
+            new PointerEvent('pointerenter', { bubbles: true })
+        );
+        await closed;
+        activeOverlays = document.querySelectorAll('active-overlay');
+        expect(activeOverlays.length).to.equal(1);
+    });
+
     it('closes decendent menus when Menu Item in ancestor is clicked', async () => {
         const el = await styledFixture<ActionMenu>(html`
             <sp-action-menu>

diff --git a/packages/overlay/src/overlay-events.ts b/packages/overlay/src/overlay-events.ts
@@ -0,0 +1,25 @@
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+export class OverlayCloseEvent extends Event {
+    root?: HTMLElement;
+    constructor({ root }: { root?: HTMLElement }) {
+        super('sp-overlay-close', { bubbles: true, composed: true });
+        this.root = root;
+    }
+}
+
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'sp-overlay-close': CustomEvent<OverlayCloseEvent>;
+    }
+}
diff --git a/packages/overlay/src/overlay-stack.ts b/packages/overlay/src/overlay-stack.ts
@@ -21,6 +21,7 @@ import {
     findOverlaysRootedInOverlay,
     parentOverlayOf,
 } from './overlay-utils.js';
+import { OverlayCloseEvent } from './overlay-events.js';
 
 function isLeftClick(event: MouseEvent): boolean {
     return event.button === 0;
@@ -223,9 +224,19 @@ export class OverlayStack {
         this.document.addEventListener('click', this.handleMouseCapture, true);
         this.document.addEventListener('click', this.handleMouse);
         this.document.addEventListener('keyup', this.handleKeyUp);
+        this.document.addEventListener(
+            'sp-overlay-close',
+            this.handleOverlayClose as EventListener
+        );
         window.addEventListener('resize', this.handleResize);
     }
 
+    handleOverlayClose = (event: OverlayCloseEvent): void => {
+        const { root } = event;
+        if (!root) return;
+        this.closeOverlaysForRoot(root);
+    };
+
     private isClickOverlayActiveForTrigger(trigger: HTMLElement): boolean {
         return this.overlays.some(
             (item) => trigger === item.trigger && item.interaction === 'click'