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

Author: nikkithelegendarypokemonster

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

@@ -978,6 +978,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/js/core/utils/selection_filter.js

@@ -1,5 +1,5 @@
 import { getKeyHash, equalByValue } from './common';
-import { isString, isObject } from './type';
+import { isFunction, isString, isObject } from './type';
 import { compileGetter } from './data';
 
 export const SelectionFilterCreator = function(selectedItemKeys, isSelectAll) {
@@ -25,7 +25,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/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js

@@ -6659,6 +6659,94 @@ 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 $tagBox = $('#tagBox').dxTagBox({
+            dataSource: data,
+            valueExpr(x) {
+                return x && x.name + ' ' + x.scheme;
+            },
+            displayExpr: 'name',
+            hideSelectedItems: true,
+            opened: true
+        });
+        const instance = $tagBox.dxTagBox('instance');
+        const $listItem = getListItems($tagBox);
+        $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 = getListItems($tagBox);
+        $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 render initial tags correctly even if items are not loaded yet and valueExpr is a function', 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', 'name2 schema2'],
+            opened: true
+        });
+
+        const instance = $tagBox.dxTagBox('instance');
+        const $tags = instance.$element().find(`.${TAGBOX_TAG_CLASS}`);
+
+        assert.strictEqual($tags.length, 2, 'Two tag is rendered after init');
+        assert.strictEqual($tags.eq(0).text().trim(), 'name1', 'Correct first tag text is rendered');
+        assert.strictEqual($tags.eq(1).text().trim(), 'name2', 'Correct second tag text is rendered');
+        assert.strictEqual(instance.option('value')[0], 'name1 schema1', 'Correct first value is stored');
+        assert.strictEqual(instance.option('value')[1], 'name2 schema2', 'Correct second value is stored');
+    });
+
+    QUnit.test('Tagbox should render initial value correctly with function valueExpr', 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 +6905,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) {