TagBox: Fix removing grouped options behavior (T1329352) (#33742)

Co-authored-by: Andrei Vorobev <andrei.vorobev@devexpress.com>

Author: vorobey

packages/devextreme/js/__internal/ui/m_tag_box.ts

@@ -1396,10 +1396,12 @@ class TagBox<
   }
 
   _removeTagElement($tag) {
+    const { showMultiTagOnly, maxDisplayedTags } = this.option();
     if ($tag.hasClass(TAGBOX_MULTI_TAG_CLASS)) {
-      if (!this.option('showMultiTagOnly')) {
-        const { maxDisplayedTags } = this.option();
-        this.option('value', this._getValue().slice(0, maxDisplayedTags));
+      if (!showMultiTagOnly && isDefined(maxDisplayedTags)) {
+        const displayedTagsCount = Math.max(0, maxDisplayedTags - 1);
+        const newValue = this._getValue().slice(0, displayedTagsCount);
+        this.option('value', newValue);
       } else {
         this.clear();
       }

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js

@@ -1060,7 +1060,7 @@ QUnit.module('multi tag support', {
         assert.deepEqual($tag.text(), '3 selected', 'text is correct');
     });
 
-    QUnit.test('multi tag should deselect overflow tags only when showMultiTagOnly is false', function(assert) {
+    QUnit.test('multi tag remove should deselect all items grouped under it when showMultiTagOnly is false (T1329352)', function(assert) {
         const $tagBox = $('#tagBox').dxTagBox({
             items: [1, 2, 3, 4],
             value: [1, 2, 4],
@@ -1069,15 +1069,30 @@ QUnit.module('multi tag support', {
         });
 
         const tagBox = $tagBox.dxTagBox('instance');
-        const $multiTag = $tagBox.find('.' + TAGBOX_MULTI_TAG_CLASS);
+        const $multiTag = $tagBox.find(`.${TAGBOX_MULTI_TAG_CLASS}`);
 
         $($multiTag.find(`.${TAGBOX_TAG_REMOVE_BUTTON_CLASS}`)).trigger('dxclick');
 
-        assert.equal($tagBox.find('.' + TAGBOX_TAG_CLASS).length, 2, 'only 2 tags remain');
-        assert.deepEqual(tagBox.option('value'), [1, 2], 'value is correct');
-        assert.deepEqual(this.getTexts($tagBox.find('.' + TAGBOX_TAG_CLASS)), ['1', '2'], 'tags have correct text');
+        assert.equal($tagBox.find(`.${TAGBOX_TAG_CLASS}`).length, 1, 'only the individually rendered tag remains');
+        assert.deepEqual(tagBox.option('value'), [1], 'only the value visible as an individual tag remains');
     });
 
+    QUnit.test('multi tag remove should deselect all items when showMultiTagOnly is true (T1329352)', function(assert) {
+        const $tagBox = $('#tagBox').dxTagBox({
+            items: [1, 2, 3, 4],
+            value: [1, 2, 4],
+            maxDisplayedTags: 2,
+            showMultiTagOnly: true
+        });
+
+        const tagBox = $tagBox.dxTagBox('instance');
+        const $multiTag = $tagBox.find(`.${TAGBOX_MULTI_TAG_CLASS}`);
+
+        $($multiTag.find(`.${TAGBOX_TAG_REMOVE_BUTTON_CLASS}`)).trigger('dxclick');
+
+        assert.equal($tagBox.find(`.${TAGBOX_TAG_CLASS}`).length, 0, 'no tags remain');
+        assert.deepEqual(tagBox.option('value'), [], 'value is cleared');
+    });
 
     QUnit.test('TagBox should preserve reverse click order in leading tag when showMultiTagOnly is false', function(assert) {
         const $tagBox = $('#tagBox').dxTagBox({