TagBox: propagate maxFilterQueryLength option to a selection (T119176…

…0) (#25824) Co-authored-by: Alexander Bulychev <[email protected]>
DevExpress · Oct 17, 2023 · e68b976 · e68b976
1 parent 891e8f7
commit e68b976
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 0 deletions.
diff --git a/js/ui/tag_box.js b/js/ui/tag_box.js
@@ -705,6 +705,7 @@ const TagBox = SelectBox.inherit({
         const selectionMode = this.option('showSelectionControls') ? 'all' : 'multiple';
 
         return extend(this.callBase(), {
+            maxFilterLengthInRequest: this.option('maxFilterQueryLength'),
             selectionMode: selectionMode,
             selectAllText: this.option('selectAllText'),
             onSelectAllValueChanged: ({ value }) => {

diff --git a/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js b/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js
@@ -20,6 +20,7 @@ import ODataStore from 'data/odata/store';
 import TagBox from 'ui/tag_box';
 import { normalizeKeyName } from 'events/utils/index';
 import { getWidth, getHeight } from 'core/utils/size';
+import Guid from 'core/guid';
 
 import { TextEditorLabel } from 'ui/text_box/ui.text_editor.label.js';
 
@@ -7431,6 +7432,68 @@ QUnit.module('regression', {
 
         assert.ok(true, 'Widget rendered');
     });
+
+    QUnit.test('maxFilterQueryLength option should be propagated to selection and allow to exceed its default limit (T1191760)', function(assert) {
+        const arrayLength = 25;
+        const arraySource = Array(arrayLength).fill(null).map((_, idx) => ({
+            display: `Item ${idx}`,
+            value: new Guid().toString()
+        }));
+        const dataSource = new DataSource({
+            paginate: true,
+            store: new CustomStore({
+                key: 'value',
+                byKey: (key) => arraySource.find(item => item.value === key),
+                load: (loadOptions) => {
+                    const d = $.Deferred();
+
+                    setTimeout(() => {
+                        if(loadOptions.filter) {
+                            d.resolve({
+                                data: arraySource,
+                                request: { skip: 0, take: arrayLength },
+                                totalCount: arrayLength
+                            });
+                        } else if(loadOptions.skip === 0) {
+                            d.resolve({
+                                data: arraySource.slice(0, 19),
+                                request: { skip: 0, take: 20 },
+                                totalCount: arrayLength
+                            });
+                        } else if(loadOptions.skip === 20) {
+                            d.resolve({
+                                data: arraySource.slice(20),
+                                request: { skip: 20, take: 20 },
+                                totalCount: arrayLength
+                            });
+                        }
+                    }, 0);
+
+                    return d.promise();
+                }
+            })
+        });
+        const value = arraySource.map(o => o.value);
+        const $element = $('#tagBox')
+            .dxTagBox({
+                dataSource,
+                value,
+                keyExpr: 'value',
+                displayExpr: 'display',
+                showSelectionControls: true,
+                maxFilterQueryLength: 9999,
+                deferRendering: false,
+            });
+
+        const $inputWrapper = $element.find(`.${DROP_DOWN_EDITOR_INPUT_WRAPPER}`);
+
+        this.clock.tick(50);
+        $inputWrapper.trigger('dxclick');
+
+        const selectAllCheckBox = $(`.${SELECT_ALL_CHECKBOX_CLASS}`).dxCheckBox('instance');
+
+        assert.strictEqual(selectAllCheckBox.option('value'), true, 'the "select all" checkbox is checked');
+    });
 });
 
 QUnit.module('valueChanged should receive correct event parameter', {