Toolbar: buttons declared via template should be hidden if there is n…

…o enough free space for them (T1191856) (#25740)
DevExpress · Oct 4, 2023 · 5257b67 · 5257b67
1 parent d762aca
commit 5257b67
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/packages/devextreme/js/ui/toolbar/strategy/toolbar.singleline.js b/packages/devextreme/js/ui/toolbar/strategy/toolbar.singleline.js
@@ -1,5 +1,5 @@
 
-import { getWidth, getOuterWidth } from '../../../core/utils/size';
+import { getWidth } from '../../../core/utils/size';
 import $ from '../../../core/renderer';
 import { each } from '../../../core/utils/iterator';
 import { grep, deferRender } from '../../../core/utils/common';
@@ -193,8 +193,8 @@ export class SingleLineStrategy {
 
         while(overflowItems.length && elementWidth < itemsWidth) {
             const $item = overflowItems.eq(-1);
-            itemsWidth -= getOuterWidth($item);
             $item.addClass(TOOLBAR_HIDDEN_ITEM);
+            itemsWidth = this._getItemsWidth();
             overflowItems.splice(-1, 1);
         }
     }

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/toolbar.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/toolbar.tests.js
@@ -6,8 +6,9 @@ import resizeCallbacks from 'core/utils/resize_callbacks';
 import themes from 'ui/themes';
 import { deferUpdate } from 'core/utils/common';
 
-import 'ui/text_box';
 import 'generic_light.css!';
+
+import 'ui/text_box';
 import 'ui/drop_down_button';
 import 'ui/tabs';
 import 'ui/toolbar';
@@ -930,6 +931,39 @@ QUnit.module('adaptivity', moduleConfig, () => {
         assert.strictEqual($visibleItems.length, 3, 'two items was hidden');
     });
 
+    QUnit.test('Buttons declared via template should be hidden if there is no enough free space for them (T1191856)', function(assert) {
+        const items = [{
+            location: 'after',
+            locateInMenu: 'never',
+            template() {
+                return $('<div />').dxTextBox({
+                    width: 256
+                });
+            }
+        }];
+
+        for(let i = 0; i < 5; i++) {
+            items.push({
+                location: 'before',
+                widget: 'dxButton',
+                locateInMenu: 'auto',
+                template() {
+                    return $('<div />').dxButton({
+                        text: 'Button long text'
+                    });
+                }
+            });
+        }
+
+        this.instance.option({
+            items,
+            width: 500
+        });
+
+        const $visibleItems = this.$element.find(`.${TOOLBAR_ITEM_CLASS}:visible`);
+        assert.strictEqual($visibleItems.length, 2, 'two items are visible');
+    });
+
     QUnit.test('overflow items should be shown if there is free space for them after resize', function(assert) {
         this.instance.option({
             items: [