TagBox: Fix tag label display when valueExpr is set to function and hideSelectedItems is enabled (T1234032) (Draft)

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

@@ -967,7 +967,15 @@ const TagBox = (SelectBox as any).inherit({
   },
 
   _shouldGetItemsFromPlain(values) {
-    return values && this._dataController.isLoaded() && values.length <= this._getPlainItems().length;
+    if (!values || !this._dataController.isLoaded()) {
+      return false;
+    }
+
+    if (this.option('hideSelectedItems')) {
+      return true;
+    }
+
+    return values.length <= this._getPlainItems().length;
   },
 
   _getItemsFromPlain(values) {
@@ -977,6 +985,10 @@ const TagBox = (SelectBox as any).inherit({
     if (needFilterPlainItems) {
       const plainItems = this._getPlainItems();
       selectedItems = this._filterSelectedItems(plainItems, values);
+
+      if (this.option('hideSelectedItems')) {
+        selectedItems = (selectedItems || []).concat(this.option('selectedItems') || []);
+      }
     }
 
     return selectedItems;

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

@@ -6822,6 +6822,45 @@ QUnit.module('performance', () => {
         assert.ok($.isFunction(filter), 'filter is function');
     });
 
+    [false, true].forEach(changeAtRuntime => {
+        QUnit.test(`tag labels should be correctly displayed with valueExpr as function and hideSelectedItems enabled ${changeAtRuntime ? 'at runtime' : ''} (T1234032)`, function(assert) {
+            const dataSource = [
+                { id: 1, scheme: 'schema 1', name: 'item1' },
+                { id: 2, scheme: 'schema 2', name: 'item2' },
+                { id: 3, scheme: 'schema 3', name: 'item3' },
+            ];
+
+            const $tagBox = $('#tagBox').dxTagBox({
+                dataSource,
+                valueExpr(x) {
+                    return x && x.name + ' ' + x.scheme;
+                },
+                displayExpr: 'name',
+                hideSelectedItems: !changeAtRuntime,
+                opened: true,
+            });
+
+            const tagBox = $tagBox.dxTagBox('instance');
+            const $list = tagBox._list.$element();
+
+            if(changeAtRuntime) {
+                tagBox.option('hideSelectedItems', true);
+            }
+
+            $($list.find('.dx-list-item').eq(0)).trigger('dxclick');
+
+            tagBox.open();
+            $($list.find('.dx-list-item').eq(0)).trigger('dxclick');
+
+            tagBox.open();
+            $($list.find('.dx-list-item').eq(0)).trigger('dxclick');
+
+            const $tagContainer = $tagBox.find(`.${TAGBOX_TAG_CONTAINER_CLASS}`);
+
+            assert.strictEqual($.trim($tagContainer.text()), 'item1item2item3', 'label values are displayed correctly');
+        });
+    });
+
     QUnit.test('loadOptions.filter should be correct when user filter is also used', function(assert) {
         const load = sinon.stub().returns([{ id: 1, text: 'item 1' }, { id: 2, text: 'item 2' }]);