Menu: clear focusedElement on submenu hiding (T1291581) (#29854)

Author: anna-shakhova

packages/devextreme/js/__internal/ui/context_menu/m_menu_base.ts

@@ -38,7 +38,9 @@ const DX_ICON_WITH_URL_CLASS = 'dx-icon-with-url';
 const ITEM_URL_CLASS = 'dx-item-url';
 
 // @ts-expect-error ts-error
-export type Properties = dxMenuBaseOptions<MenuBase, Item>;
+export interface Properties extends dxMenuBaseOptions<MenuBase, Item> {
+  focusedElement?: dxElementWrapper;
+}
 
 class MenuBase extends HierarchicalCollectionWidget<Properties> {
   static ItemClass = MenuItem;

packages/devextreme/js/__internal/ui/menu/m_menu.ts

@@ -64,7 +64,7 @@ class Menu extends MenuBase {
 
   _submenus!: Submenu[];
 
-  _visibleSubmenu?: Submenu;
+  _visibleSubmenu?: Submenu | null;
 
   _overlay!: dxOverlay<OverlayProperties>;
 
@@ -264,7 +264,6 @@ class Menu extends MenuBase {
   }
 
   _initMarkup(): void {
-    // @ts-expect-error
     this._visibleSubmenu = null;
 
     this.$element().addClass(DX_MENU_CLASS);
@@ -693,9 +692,20 @@ class Menu extends MenuBase {
 
     this._actions.onSubmenuHiding(eventArgs);
 
+    const { focusedElement } = this.option();
+    const { focusedElement: submenuFocusedElement } = submenu.option();
+
+    const isVisibleSubmenuHiding = this._visibleSubmenu === submenu;
+    const isFocusedElementHiding = focusedElement === submenuFocusedElement;
+
+    if (isVisibleSubmenuHiding && isFocusedElementHiding) {
+      this.option('focusedElement', $menuAnchorItem);
+    }
+
     if (!eventArgs.cancel) {
-      // @ts-expect-error
-      if (this._visibleSubmenu === submenu) this._visibleSubmenu = null;
+      if (isVisibleSubmenuHiding) {
+        this._visibleSubmenu = null;
+      }
       $border.hide();
       $menuAnchorItem.removeClass(DX_MENU_ITEM_EXPANDED_CLASS);
     }
@@ -904,7 +914,6 @@ class Menu extends MenuBase {
     }
 
     if (this._visibleSubmenu === submenu) {
-      // @ts-expect-error
       this._visibleSubmenu = null;
     }
     // @ts-expect-error

packages/devextreme/testing/tests/DevExpress.ui.widgets/menu.tests.js

@@ -2584,7 +2584,6 @@ QUnit.module('keyboard navigation', {
         itemClickHandler.resetHistory();
 
         this.keyboard
-            .press('down')
             .press('down')
             .press('right')
             .press('down')
@@ -2631,10 +2630,12 @@ QUnit.module('keyboard navigation', {
             .press('down')
             .press('down')
             .press('down')
-            .press('down')
-            .press('space');
+            .press('down');
 
         assert.equal(isRenderer(this.instance.option('focusedElement')), !!config().useJQuery, 'focusedElement is correct');
+
+        this.keyboard.press('space');
+
         assert.equal(this.instance.option('selectedItem').text, 'item2-3', 'correct item is selected');
     });
 
@@ -2947,6 +2948,62 @@ QUnit.module('keyboard navigation', {
 
         assert.equal($(this.instance._visibleSubmenu.option('focusedElement')).text(), 'Item 113');
     });
+
+    QUnit.test('focusedElement should be set to main menu item after hiding submenu', function(assert) {
+        this.instance.option({
+            orientation: 'horizontal',
+            items: [
+                {
+                    text: 'Item 1',
+                    items: [
+                        { text: 'Item 11', items: [ { text: 'Item 111' }, { text: 'Item 112' }, { text: 'Item 113' } ] },
+                        { text: 'Item 12' }
+                    ],
+                },
+            ]
+        });
+
+        this.keyboard.press('enter')
+            .press('down')
+            .press('down');
+
+        assert.strictEqual($(this.instance.option('focusedElement')).text(), 'Item 12', 'focusedElement is submenu item');
+
+        this.keyboard.press('enter');
+
+        const mainMenuItemText = $(this.instance.itemElements()[0]).text();
+
+        assert.strictEqual($(this.instance.option('focusedElement')).text(), mainMenuItemText, 'focusedElement is main menu item');
+    });
+
+    QUnit.test('focusedElement should be set to main menu item after hiding nested submenu', function(assert) {
+        this.instance.option({
+            orientation: 'horizontal',
+            items: [
+                {
+                    text: 'Item 1',
+                    items: [
+                        { text: 'Item 11', items: [ { text: 'Item 111' }, { text: 'Item 112' }, { text: 'Item 113' } ] },
+                        { text: 'Item 12' }
+                    ],
+                },
+            ]
+        });
+
+        this.keyboard.press('enter')
+            .press('down')
+            .press('enter')
+            .press('right')
+            .press('down');
+
+        assert.strictEqual($(this.instance.option('focusedElement')).text(), 'Item 112', 'focusedElement is submenu item');
+
+        this.keyboard.press('enter');
+
+        const mainMenuItemText = $(this.instance.itemElements()[0]).text();
+
+        assert.strictEqual($(this.instance.option('focusedElement')).text(), mainMenuItemText, 'focusedElement is main menu item');
+    });
 });
 
 QUnit.module('Menu with templates', {