From 47aa1f4726226427bea258eb7f0f7c8cdab62878 Mon Sep 17 00:00:00 2001
From: TarunAdobe <ttomar@adobe.com>
Date: Tue, 1 Oct 2024 14:34:15 +0530
Subject: [PATCH] fix(menu): allow keyboard events to propogate from menu-items

chore(menu): added tests

fix(menu): allow keyboard events to propagate from opened menu
---
 packages/menu/src/Menu.ts       |  8 +++++++-
 packages/menu/test/menu.test.ts | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/packages/menu/src/Menu.ts b/packages/menu/src/Menu.ts
index 5a64c94aa0..a553818994 100644
--- a/packages/menu/src/Menu.ts
+++ b/packages/menu/src/Menu.ts
@@ -590,7 +590,11 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
 
     protected navigateBetweenRelatedMenus(event: KeyboardEvent): void {
         const { key } = event;
-        event.stopPropagation();
+
+        if (key === 'ArrowRight' || key === 'ArrowLeft') {
+            event.preventDefault();
+        }
+
         const shouldOpenSubmenu =
             (this.isLTR && key === 'ArrowRight') ||
             (!this.isLTR && key === 'ArrowLeft');
@@ -598,6 +602,7 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
             (this.isLTR && key === 'ArrowLeft') ||
             (!this.isLTR && key === 'ArrowRight');
         if (shouldOpenSubmenu) {
+            event.stopPropagation();
             const lastFocusedItem = this.childItems[this.focusedItemIndex];
             if (lastFocusedItem?.hasSubmenu) {
                 // Remove focus while opening overlay from keyboard or the visible focus
@@ -605,6 +610,7 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
                 lastFocusedItem.openOverlay();
             }
         } else if (shouldCloseSelfAsSubmenu && this.isSubmenu) {
+            event.stopPropagation();
             this.dispatchEvent(new Event('close', { bubbles: true }));
             this.updateSelectedItemIndex();
         }
diff --git a/packages/menu/test/menu.test.ts b/packages/menu/test/menu.test.ts
index 74d2d41396..96f6ddff39 100644
--- a/packages/menu/test/menu.test.ts
+++ b/packages/menu/test/menu.test.ts
@@ -419,6 +419,38 @@ describe('Menu', () => {
         el.dispatchEvent(arrowDownEvent());
         expect(secondItem.focused, 'second').to.be.true;
     });
+
+    it('allows keyboard events to bubble up', async () => {
+        const el = await fixture<Menu>(html`
+            <sp-menu id="test">
+                <sp-menu-item class="first">Deselect</sp-menu-item>
+                <sp-menu-item>Invert Selection</sp-menu-item>
+                <sp-menu-item>Feather...</sp-menu-item>
+                <sp-menu-item>Select and Mask...</sp-menu-item>
+                <sp-menu-item selected class="selected">
+                    Save Selection
+                </sp-menu-item>
+            </sp-menu>
+        `);
+
+        await elementUpdated(el);
+        await nextFrame();
+        el.focus();
+
+        expect(document.activeElement).to.equal(el);
+
+        // Add a listener to the document to check if the event bubbles up
+        const eventSpy = spy();
+        document.addEventListener('keydown', eventSpy);
+
+        // press a key
+        await sendKeys({
+            press: 'S',
+        });
+
+        expect(eventSpy.callCount).to.equal(1);
+    });
+
     it('handles focus across focused MenuItem removals', async () => {
         const el = await fixture<Menu>(html`
             <sp-menu id="test">