TagBox - Fix custom item rendering after deleting equal value(T119744…

…4) (#26240)
DevExpress · Dec 12, 2023 · 36e069a · 36e069a
1 parent 5ce1c95
commit 36e069a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git a/js/ui/tag_box.js b/js/ui/tag_box.js
@@ -887,11 +887,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);
             }
         });
@@ -904,7 +904,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;
@@ -1264,6 +1264,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/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js b/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js
@@ -4738,6 +4738,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, () => {
@@ -4837,7 +4870,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');
 
@@ -4974,7 +5007,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');
 
@@ -6746,7 +6779,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');