diff --git a/packages/devextreme/js/__internal/ui/m_drop_down_button.ts b/packages/devextreme/js/__internal/ui/m_drop_down_button.ts index e07d95ab19c8..28fa8ddca71b 100644 --- a/packages/devextreme/js/__internal/ui/m_drop_down_button.ts +++ b/packages/devextreme/js/__internal/ui/m_drop_down_button.ts @@ -700,7 +700,7 @@ class DropDownButton extends Widget { } _updateItemCollection(optionName): void { - const selectedItemKey = this.option('selectedItemKey'); + const { selectedItemKey, useSelectMode } = this.option(); this._setListOption('selectedItem', null); // @ts-expect-error ts-error this._setWidgetOption('_list', [optionName]); @@ -708,8 +708,10 @@ class DropDownButton extends Widget { if (isDefined(selectedItemKey)) { this._loadSelectedItem() .done((selectedItem) => { - this._setListOption('selectedItemKeys', [selectedItemKey]); - this._setListOption('selectedItem', selectedItem); + if (useSelectMode) { + this._setListOption('selectedItemKeys', [selectedItemKey]); + this._setListOption('selectedItem', selectedItem); + } // eslint-disable-next-line @typescript-eslint/no-unused-vars }).fail((error) => { this._setListOption('selectedItemKeys', []); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/dropDownButton.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/dropDownButton.tests.js index 90219bab3bf1..0c4faa275ab1 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/dropDownButton.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/dropDownButton.tests.js @@ -32,6 +32,8 @@ const DROP_DOWN_EDITOR_OVERLAY_CLASS = 'dx-dropdowneditor-overlay'; const CUSTOM_CLASS = 'custom-class'; const LIST_CLASS = 'dx-list'; const LIST_ITEMS_CLASS = 'dx-list-items'; +const LIST_ITEM_CLASS = 'dx-list-item'; +const LIST_ITEM_SELECTED_CLASS = 'dx-list-item-selected'; const OVERLAY_CONTENT_LABEL = 'Dropdown'; @@ -1256,6 +1258,22 @@ QUnit.module('list integration', {}, () => { assert.deepEqual(list.option('selectedItemKeys'), [0], 'List has correct selection'); }); + + QUnit.test('list items should not have selected class from ddb selectedItemKey after set items at runtime (T1314783)', function(assert) { + const dropDownButton = new DropDownButton($('#dropDownButton'), { + items: ['item1'], + useSelectMode: false, + opened: true, + selectedItemKey: 'item1', + }); + const list = getList(dropDownButton); + + dropDownButton.option('items', ['item1']); + const $listItems = list.itemElements(); + + assert.strictEqual($listItems.length, 1, 'there is one list item'); + assert.strictEqual($listItems.hasClass(LIST_ITEM_SELECTED_CLASS), false, 'item does not have selected class'); + }); }); QUnit.module('common use cases', {