diff --git a/js/ui/tag_box.js b/js/ui/tag_box.js index b4c2a7357944..dbd992e74978 100644 --- 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 index 00802452ba5a..ac92213f780c 100644 --- 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', {