diff --git a/packages/devextreme/js/ui/tag_box.js b/packages/devextreme/js/ui/tag_box.js index c6a6261b3a8c..71656faa7bce 100644 --- a/packages/devextreme/js/ui/tag_box.js +++ b/packages/devextreme/js/ui/tag_box.js @@ -876,11 +876,11 @@ const TagBox = SelectBox.inherit({ if(isValueExprSpecified && !isDefined(currentItem)) { loadItemPromises.push(this._loadItem(value, cache).always((item) => { - const newItem = this._createTagData(items, item, value, index); + const newItem = this._createTagData(item, value); items.splice(index, 0, newItem); })); } else { - const newItem = this._createTagData(items, currentItem, value, index); + const newItem = this._createTagData(currentItem, value); items.splice(index, 0, newItem); } }); @@ -893,7 +893,7 @@ const TagBox = SelectBox.inherit({ return d.promise(); }, - _createTagData: function(items, item, value, valueIndex) { + _createTagData: function(item, value) { if(isDefined(item)) { this._selectedItems.push(item); return item; @@ -1253,6 +1253,7 @@ const TagBox = SelectBox.inherit({ const value = this._getValue().slice(); this._removeTag(value, itemValue); this.option('value', value); + this.option('selectedItem', null); if(value.length === 0) { this._clearTagFocus(); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js index 74ebb63f004e..4f28de2b9ea7 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js @@ -4770,6 +4770,39 @@ QUnit.module('the \'acceptCustomValue\' option', moduleSetup, () => { assert.strictEqual($tags.length, 2, 'only two tags are added'); assert.deepEqual(tagBoxInstance.option('selectedItems'), ['custom', 1], 'selected items are correct'); }); + + QUnit.test('The editor must have the actual value after this value has been entered following its deletion(T1197444)', function(assert) { + const $tagBox = $('#tagBox').dxTagBox({ + acceptCustomValue: true, + searchEnabled: false, + openOnFieldClick: false, + onCustomItemCreating: function(args) { + const newValue = args.text; + const component = args.component; + const currentItems = component.option('items'); + currentItems.unshift(newValue); + component.option('items', currentItems); + args.customItem = newValue; + } + }); + + const tagBoxInstance = $tagBox.dxTagBox('instance'); + + const $input = $tagBox.find(`.${TEXTEDITOR_INPUT_CLASS}`); + const keyboard = keyboardMock($input); + + keyboard.type('1'); + $input.trigger('change'); + + $(`.${TAGBOX_TAG_REMOVE_BUTTON_CLASS}`) + .last() + .trigger('dxclick'); + + keyboard.type('1'); + $input.trigger('change'); + + assert.deepEqual(tagBoxInstance.option('value'), ['1']); + }); }); QUnit.module('the \'selectedItems\' option', moduleSetup, () => { @@ -4869,7 +4902,7 @@ QUnit.module('the \'selectedItems\' option', moduleSetup, () => { $(`.${SELECT_ALL_CHECKBOX_CLASS}`).trigger('dxclick'); $(`.${LIST_CHECKBOX_CLASS}`).first().trigger('dxclick'); - $('.dx-tag-remove-button').last().trigger('dxclick'); + $(`.${TAGBOX_TAG_REMOVE_BUTTON_CLASS}`).last().trigger('dxclick'); $(`.${SELECT_ALL_CHECKBOX_CLASS}`).trigger('dxclick'); @@ -5006,7 +5039,7 @@ QUnit.module('the \'onSelectionChanged\' option', moduleSetup, () => { onSelectionChanged: spy }).dxTagBox('instance'); - const $removeButtons = tagBox.$element().find('.dx-tag-remove-button'); + const $removeButtons = tagBox.$element().find(`.${TAGBOX_TAG_REMOVE_BUTTON_CLASS}`); $($removeButtons.eq(2)).trigger('dxclick'); @@ -6778,7 +6811,7 @@ QUnit.module('performance', () => { let filter = load.lastCall.args[0].filter; assert.deepEqual(filter, [['!', ['id', 1]]], 'filter is correct'); - $($tagBox.find('.dx-tag-remove-button').eq(0)).trigger('dxclick'); + $($tagBox.find(`.${TAGBOX_TAG_REMOVE_BUTTON_CLASS}`).eq(0)).trigger('dxclick'); filter = load.lastCall.args[0].filter; assert.deepEqual(filter, null, 'filter is correct');