Toolbar: The overflow menu shouldn’t close immediately when a template is used to define a nested dropdown item (T1298858) (#30370) (#30379)

Author: EugeniyKiyashko

packages/devextreme/js/__internal/ui/toolbar/internal/m_toolbar.menu.list.ts

@@ -1,5 +1,7 @@
+import type { ToolbarItemComponent } from '@js/common';
 import $ from '@js/core/renderer';
 import { each } from '@js/core/utils/iterator';
+import type { Item } from '@js/ui/toolbar';
 import { ListBase } from '@ts/ui/list/m_list.base';
 
 const TOOLBAR_MENU_ACTION_CLASS = 'dx-toolbar-menu-action';
@@ -9,6 +11,8 @@ const TOOLBAR_MENU_SECTION_CLASS = 'dx-toolbar-menu-section';
 const TOOLBAR_MENU_CUSTOM_CLASS = 'dx-toolbar-menu-custom';
 const TOOLBAR_MENU_LAST_SECTION_CLASS = 'dx-toolbar-menu-last-section';
 const SCROLLVIEW_CONTENT_CLASS = 'dx-scrollview-content';
+
+type ActionableComponents = Extract<ToolbarItemComponent, 'dxButton' | 'dxButtonGroup'>;
 export default class ToolbarMenuList extends ListBase {
   _activeStateUnit!: string;
 
@@ -75,15 +79,16 @@ export default class ToolbarMenuList extends ListBase {
     return itemElement;
   }
 
-  _getItemCssClasses(item): string[] {
+  _getItemCssClasses(item: Item): string[] {
     const cssClasses: string[] = [];
     const actionableComponents = this._getActionableComponents();
 
     if (this._getItemTemplateName({ itemData: item })) {
       cssClasses.push(TOOLBAR_MENU_CUSTOM_CLASS);
     }
 
-    if (!item.widget || actionableComponents.includes(item.widget)) {
+    if ((!item.location && !item.widget)
+      || actionableComponents.some((component) => component === item.widget)) {
       cssClasses.push(TOOLBAR_MENU_ACTION_CLASS);
     }
 
@@ -95,11 +100,15 @@ export default class ToolbarMenuList extends ListBase {
       cssClasses.push(TOOLBAR_HIDDEN_BUTTON_GROUP_CLASS);
     }
 
-    cssClasses.push(item.cssClass);
+    if (item.cssClass) {
+      cssClasses.push(item.cssClass);
+    }
+
     return cssClasses;
   }
 
-  _getActionableComponents() {
+  // eslint-disable-next-line class-methods-use-this
+  _getActionableComponents(): ActionableComponents[] {
     return ['dxButton', 'dxButtonGroup'];
   }
 

packages/devextreme/js/__internal/ui/toolbar/m_toolbar.ts

@@ -151,7 +151,7 @@ class Toolbar extends ToolbarBase {
   }
 
   _isMenuItem(itemData): boolean {
-    return itemData.location === 'menu' || itemData.locateInMenu === 'always';
+    return itemData.locateInMenu === 'always';
   }
 
   _isToolbarItem(itemData): boolean {

packages/devextreme/js/__internal/ui/toolbar/strategy/m_toolbar.singleline.ts

@@ -177,7 +177,7 @@ export class SingleLineStrategy {
       // @ts-expect-error
       const itemOverflow = overflowGetter(item, { functionsAsIs: true });
 
-      if (itemVisible !== false && (itemOverflow === 'auto' || itemOverflow === 'always') || item.location === 'menu') {
+      if (itemVisible !== false && (itemOverflow === 'auto' || itemOverflow === 'always')) {
         result = true;
       }
     });

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

@@ -587,8 +587,14 @@ QUnit.module('toolbar with menu', moduleConfig, () => {
             widget: 'dxDropDownButton',
             options: { items: ['item'] },
         },
+        {
+            locateInMenu: 'always',
+            location: 'after',
+            widget: 'dxDropDownButton',
+            options: { items: ['item'] },
+        }
     ].forEach(({ widget, options }) => {
-        QUnit.test(`click on editor component (${widget}) inside the toolbar menu should not close it (T1287462)`, function(assert) {
+        QUnit.test(`click on editor component (${widget}) inside the toolbar menu should not close it (T1287462, T1298858)`, function(assert) {
             this.instance.option('items', [{
                 locateInMenu: 'always',
                 widget,
@@ -1263,6 +1269,23 @@ QUnit.module('adaptivity', moduleConfig, () => {
         assert.ok($sections.eq(2).hasClass('dx-toolbar-menu-last-section'), 'border for last section is removed');
     });
 
+    QUnit.test('menu shouldn\'t be closed after click on editors', function(assert) {
+        const $beforeItem = $('<div>').width(150);
+
+        this.instance.option({
+            items: [
+                { location: 'before', locateInMenu: 'auto', template: () => $beforeItem },
+            ],
+            width: 100
+        });
+
+        this.overflowMenu.click();
+
+        $($beforeItem).trigger('dxclick');
+
+        assert.ok(this.overflowMenu.instance().option('opened'), 'dropdown isn\'t closed');
+    });
+
     QUnit.test('menu should be closed after click on button or menu items', function(assert) {
         this.instance.option({
             items: [
@@ -1568,30 +1591,6 @@ QUnit.module('adaptivity', moduleConfig, () => {
 });
 
 QUnit.module('default template', moduleConfig, () => {
-    QUnit.test('T430159 menu should be closed after click on item if location is defined', function(assert) {
-        const onClickActionStub = sinon.stub();
-
-        this.instance.option({
-            items: [
-                {
-                    location: 'center',
-                    text: '123',
-                    locateInMenu: 'always',
-                    onClick: onClickActionStub
-                }
-            ],
-            width: 100
-        });
-
-        this.overflowMenu.click();
-
-        const $menuItem = $(`.${TOOLBAR_MENU_SECTION_CLASS} .${LIST_ITEM_CLASS}`).eq(0);
-        $menuItem.trigger('dxclick');
-
-        assert.strictEqual(this.instance.option('overflowMenuVisible'), false, 'dropdown is closed');
-        assert.strictEqual(onClickActionStub.callCount, 1, 'onClick was fired');
-    });
-
     ['single', 'multiple'].forEach(selectionMode => {
         QUnit.test(`Click on buttonGroup item inside menu (T977105). selectionMode: ${selectionMode}`, function(assert) {
             const onClickActionStub = sinon.stub();