ContextMenu: show submenu synchronously if submenu delay set to 0 (T1247739) (#29437)

Author: anna-shakhova

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

@@ -6,6 +6,7 @@ import { asyncNoop, noop } from '@js/core/utils/common';
 import { extend } from '@js/core/utils/extend';
 import { each } from '@js/core/utils/iterator';
 import { isDefined, isObject, isPlainObject } from '@js/core/utils/type';
+import type { DxEvent } from '@js/events';
 import type { dxMenuBaseOptions } from '@js/ui/context_menu/ui.menu_base';
 import type { Item } from '@js/ui/menu';
 import { render } from '@js/ui/widget/utils.ink_ripple';
@@ -202,7 +203,7 @@ class MenuBase extends HierarchicalCollectionWidget<Properties> {
     const { items } = itemData;
     let $popOutContainer;
 
-    if (items && items.length) {
+    if (items?.length) {
       const $popOutImage = $('<div>').addClass(DX_MENU_ITEM_POPOUT_CLASS);
       $popOutContainer = $('<span>').addClass(DX_MENU_ITEM_POPOUT_CONTAINER_CLASS).append($popOutImage);
     }
@@ -312,16 +313,22 @@ class MenuBase extends HierarchicalCollectionWidget<Properties> {
     return `.${DX_MENU_ITEM_WRAPPER_CLASS}`;
   }
 
-  _hoverStartHandler(e) {
+  _hoverStartHandler(e: DxEvent): void {
     const $itemElement = this._getItemElementByEventArgs(e);
 
     if (!$itemElement || this._isItemDisabled($itemElement)) return;
 
     e.stopPropagation();
 
     if (this._getShowSubmenuMode() === 'onHover') {
-      clearTimeout(this._showSubmenusTimeout);
-      this._showSubmenusTimeout = setTimeout(this._showSubmenu.bind(this, $itemElement), this._getSubmenuDelay('show'));
+      const submenuDelay = this._getSubmenuDelay('show');
+
+      if (submenuDelay === 0) {
+        this._showSubmenu($itemElement);
+      } else {
+        clearTimeout(this._showSubmenusTimeout);
+        this._showSubmenusTimeout = setTimeout(this._showSubmenu.bind(this, $itemElement), submenuDelay);
+      }
     }
   }
 
@@ -382,7 +389,7 @@ class MenuBase extends HierarchicalCollectionWidget<Properties> {
   }
 
   _hasSubmenu(node) {
-    return node && node.internalFields.childrenKeys.length;
+    return node?.internalFields.childrenKeys.length;
   }
 
   _renderContentImpl() {
@@ -459,7 +466,7 @@ class MenuBase extends HierarchicalCollectionWidget<Properties> {
 
     const $node = $nodeElement ?? this._createDOMElement($nodeContainer);
 
-    if (items[index + 1] && items[index + 1].beginGroup) {
+    if (items[index + 1]?.beginGroup) {
       $node.addClass(DX_MENU_ITEM_LAST_GROUP_ITEM);
     }
 

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

@@ -1161,6 +1161,30 @@ QUnit.module('Showing and hiding submenus', moduleConfig, () => {
         assert.ok($rootItem.hasClass(DX_MENU_ITEM_EXPANDED_CLASS), 'expanded class was not removed');
     });
 
+    [0, { show: 0 }].forEach((delay) => {
+        QUnit.test(`submenu should be shown synchronously if showSubmenuMode.delay=${JSON.stringify(delay)} (T1247739)`, function(assert) {
+            if(!isDeviceDesktop(assert)) {
+                return;
+            }
+
+            const instance = new ContextMenu(this.$element, {
+                items: [{ text: 1, items: [{ text: 11 }] }],
+                visible: true,
+                showSubmenuMode: { name: 'onHover', delay },
+            });
+
+            const $itemsContainer = instance.itemsContainer();
+            const $rootItem = $itemsContainer.find(`.${DX_MENU_ITEM_CLASS}`).eq(0);
+
+            $($itemsContainer).trigger($.Event('dxhoverstart', { target: $rootItem.get(0) }));
+
+            const $submenus = $rootItem.find(`.${DX_SUBMENU_CLASS}`);
+
+            assert.strictEqual($submenus.length, 1, 'submenu was rendered');
+            assert.strictEqual($submenus.eq(0).is(':visible'), true, 'submenu was expanded');
+        });
+    });
+
     QUnit.test('context menu should not blink after second hover on root item', function(assert) {
         if(!isDeviceDesktop(assert)) {
             return;