fix: only focus parent item if sub-menu contained focus (#7519) (#7522)

Co-authored-by: Serhii Kulykov <[email protected]>

packages/context-menu/src/vaadin-contextmenu-items-mixin.js

@@ -361,6 +361,10 @@ export const ItemsMixin = (superClass) =>
       if (item) {
         const { children } = item._item;
 
+        // Check if the sub-menu was focused before closing it.
+        const child = subMenu._overlayElement.getFirstChild();
+        const isSubmenuFocused = child && child.focused;
+
         if (subMenu.items !== children) {
           subMenu.close();
         }
@@ -374,8 +378,12 @@ export const ItemsMixin = (superClass) =>
           // Forward parent overlay class
           const { overlayClass } = this;
           this.__openSubMenu(subMenu, item, overlayClass);
-        } else {
+        } else if (isSubmenuFocused) {
+          // If the sub-menu item was focused, focus its parent item.
           subMenu.listenOn.focus();
+        } else if (!this._listBox.focused) {
+          // Otherwise, focus the overlay part to handle arrow keys.
+          this._overlayElement.$.overlay.focus();
         }
       }
     }

packages/context-menu/test/items.common.js

@@ -261,6 +261,22 @@ describe('items', () => {
     expect(focusSpy.called).to.be.true;
   });
 
+  (isTouch ? it.skip : it)('should focus overlay part on closing sub-menu without focused item', async () => {
+    const parent = getMenuItems(rootMenu)[3];
+    await openMenu(parent);
+    const nonParent = getMenuItems(rootMenu)[1];
+    const focusSpy = sinon.spy(rootOverlay.$.overlay, 'focus');
+    await openMenu(nonParent);
+    expect(focusSpy.called).to.be.true;
+  });
+
+  (isTouch ? it.skip : it)('should not focus overlay part if the parent menu list-box has focus', async () => {
+    await openMenu(getMenuItems(rootMenu)[1]);
+    const focusSpy = sinon.spy(rootOverlay.$.overlay, 'focus');
+    await openMenu(getMenuItems(rootMenu)[2]);
+    expect(focusSpy.called).to.be.false;
+  });
+
   it('should not close the menu if root item has keep open', () => {
     getMenuItems(rootMenu)[2].click();
     expect(rootMenu.opened).to.be.true;