diff --git a/packages/devextreme/js/ui/toolbar/strategy/toolbar.singleline.js b/packages/devextreme/js/ui/toolbar/strategy/toolbar.singleline.js index d372d1752b48..3b128825e342 100644 --- 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 index 4f7cca4826d3..fe6d70f9b0fb 100644 --- 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 $('
').dxTextBox({ + width: 256 + }); + } + }]; + + for(let i = 0; i < 5; i++) { + items.push({ + location: 'before', + widget: 'dxButton', + locateInMenu: 'auto', + template() { + return $('
').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: [