TagBox: fix tag rendering when valueExpr is a function (T1234032)

packages/devextreme/js/__internal/core/utils/m_selection_filter.ts

@@ -1,6 +1,6 @@
 import { equalByValue, getKeyHash } from '@js/core/utils/common';
 import { compileGetter } from '@js/core/utils/data';
-import { isObject, isString } from '@js/core/utils/type';
+import { isFunction, isObject, isString } from '@js/core/utils/type';
 
 export const SelectionFilterCreator = function (selectedItemKeys, isSelectAll?: boolean) {
   this.getLocalFilter = function (keyGetter, equalKeys, equalByReference, keyExpr) {
@@ -24,7 +24,7 @@ export const SelectionFilterCreator = function (selectedItemKeys, isSelectAll?:
         filterExpr.push(isSelectAll ? 'and' : 'or');
       }
 
-      if (isString(keyExpr)) {
+      if (isString(keyExpr) || isFunction(keyExpr)) {
         filterExprPart = getFilterForPlainKey(keyExpr, key);
       } else {
         filterExprPart = getFilterForCompositeKey(keyExpr, key);

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

@@ -977,6 +977,7 @@ const TagBox = (SelectBox as any).inherit({
 
   _getSelectedItemsFromList(values) {
     const listSelectedItems = this._list?.option('selectedItems');
+
     let selectedItems = [];
     if (values.length === listSelectedItems?.length) {
       selectedItems = this._filterSelectedItems(listSelectedItems, values);

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

@@ -6659,6 +6659,108 @@ QUnit.module('dataSource integration', moduleSetup, () => {
         assert.ok(true, 'TagBox rendered');
     });
 
+    QUnit.test('Tagbox should render tag correctly when hideSelectedItems = true and valueExpr is a function (T1234032)', function(assert) {
+        const data = [
+            {
+                id: 1,
+                scheme: 'schema1',
+                name: 'name1',
+            },
+            {
+                id: 2,
+                scheme: 'schema1',
+                name: 'name2',
+            }];
+        const instance = $('#tagBox').dxTagBox({
+            dataSource: data,
+            valueExpr(x) {
+                return x && x.name + ' ' + x.scheme;
+            },
+            displayExpr: 'name',
+            hideSelectedItems: true,
+            opened: true
+        }).dxTagBox('instance');
+
+        const $listItem = $(instance._list.$element().find(`.${LIST_ITEM_CLASS}`).eq(0));
+        $listItem.trigger('dxclick');
+
+        const $tags = instance.$element().find(`.${TAGBOX_TAG_CLASS}`);
+        assert.strictEqual($tags.length, 1, 'One tag is rendered after click');
+        assert.strictEqual($tags.eq(0).text().trim(), 'name1', 'Correct tag text is rendered');
+        assert.strictEqual(instance.option('value')[0], 'name1 schema1', 'Correct value is stored');
+
+        const $secondItem = $(instance._list.$element().find(`.${LIST_ITEM_CLASS}`).eq(0));
+        $secondItem.trigger('dxclick');
+
+        const $updatedTags = instance.$element().find(`.${TAGBOX_TAG_CLASS}`);
+        assert.strictEqual($updatedTags.length, 2, 'Two tags are rendered after selecting the second item');
+        assert.strictEqual($updatedTags.eq(1).text().trim(), 'name2', 'Second tag is rendered correctly');
+        assert.strictEqual(instance.option('value')[1], 'name2 schema1', 'Correct value is stored');
+    });
+
+    QUnit.test('TagBox should update tags when custom dataSource is used (T1234032)', function(assert) {
+        const data = [
+            { name: 'name1', scheme: 'schema1', value: 1 },
+            { name: 'name2', scheme: 'schema2', value: 2 },
+        ];
+
+        const dataSource = new DataSource({
+            store: new ArrayStore(data),
+            paginate: true,
+            pageSize: 1,
+        });
+
+        const $tagBox = $('#tagBox').dxTagBox({
+            dataSource,
+            displayExpr: 'name',
+            hideSelectedItems: true,
+            valueExpr(x) {
+                return x && `${x.name} ${x.scheme}`;
+            },
+            value: ['name1 schema1'],
+            opened: true
+        });
+
+        const instance = $tagBox.dxTagBox('instance');
+        instance._list.reload();
+        const $tags = instance.$element().find(`.${TAGBOX_TAG_CLASS}`);
+
+        assert.strictEqual($tags.length, 1, 'One tag is rendered after reload');
+        assert.strictEqual($tags.eq(0).text().trim(), 'name1', 'Correct tag text is rendered');
+        assert.strictEqual(instance.option('value')[0], 'name1 schema1', 'Correct value is stored');
+
+        const $secondItem = $(instance._list.$element().find(`.${LIST_ITEM_CLASS}`).eq(0));
+        $secondItem.trigger('dxclick');
+        const $updatedTags = instance.$element().find(`.${TAGBOX_TAG_CLASS}`);
+
+        assert.strictEqual($updatedTags.length, 2, 'Two tags are rendered after selecting the second item');
+        assert.strictEqual($updatedTags.eq(1).text().trim(), 'name2', 'Second tag is rendered correctly');
+        assert.strictEqual(instance.option('value')[1], 'name2 schema2', 'Correct value is stored');
+    });
+
+    QUnit.test('Tagbox should render initial value correctly with function valueExpr (T1234032)', function(assert) {
+        const data = [
+            { id: 1, scheme: 'schema1', name: 'name1' },
+            { id: 2, scheme: 'schema1', name: 'name2' }
+        ];
+
+        const instance = $('#tagBox').dxTagBox({
+            dataSource: data,
+            valueExpr(x) {
+                return x && `${x.name} ${x.scheme}`;
+            },
+            displayExpr: 'name',
+            hideSelectedItems: true,
+            value: ['name1 schema1'],
+            opened: true
+        }).dxTagBox('instance');
+
+        const $tags = instance.$element().find(`.${TAGBOX_TAG_CLASS}`);
+        assert.strictEqual($tags.length, 1, 'One tag is rendered initially');
+        assert.strictEqual($tags.eq(0).text().trim(), 'name1', 'Correct tag text is rendered');
+        assert.strictEqual(instance.option('value')[0], 'name1 schema1', 'Initial value is correct');
+    });
+
     QUnit.test('TagBox should correctly handle disposing on data loading', function(assert) {
         assert.expect(1);
 
@@ -6817,9 +6919,8 @@ QUnit.module('performance', () => {
         const $item = $(getList(tagBox).find('.dx-list-item').eq(0));
 
         $item.trigger('dxclick');
-
         const filter = load.lastCall.args[0].filter;
-        assert.ok($.isFunction(filter), 'filter is function');
+        assert.ok($.isFunction(filter[0]), 'filter is function');
     });
 
     QUnit.test('loadOptions.filter should be correct when user filter is also used', function(assert) {