@syncfusion/ej2-dropdowns 25.1.35 → 25.1.39

package/src/drop-down-tree/drop-down-tree.js

@@ -402,7 +402,7 @@ var DropDownTree = /** @class */ (function (_super) {
             cancel: false,
             preventDefaultAction: false,
             event: event,
-            text: value,
+            text: value.trim(),
             fields: filterFields
         };
         this.trigger('filtering', args, function (args) {
@@ -410,7 +410,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 var flag = false;
                 var fields = void 0;
                 _this.isFilteredData = true;
-                if (value === '') {
+                if (args.text === '') {
                     _this.isFilteredData = false;
                     _this.isFilterRestore = true;
                     _this.isFromFilterChange = false;
@@ -421,18 +421,18 @@ var DropDownTree = /** @class */ (function (_super) {
                 }
                 else {
                     if (_this.treeDataType === 1) {
-                        fields = _this.selfReferencefilter(value, args.fields);
+                        fields = _this.selfReferencefilter(args.text, args.fields);
                     }
                     else {
                         if (_this.fields.dataSource instanceof DataManager) {
-                            fields = _this.remoteDataFilter(value, args.fields);
+                            fields = _this.remoteDataFilter(args.text, args.fields);
                             fields.child = _this.fields.child;
                             _this.treeObj.fields = _this.getTreeFields(args.fields);
                             _this.treeObj.dataBind();
                             flag = true;
                         }
                         else {
-                            fields = _this.nestedFilter(value, args.fields);
+                            fields = _this.nestedFilter(args.text, args.fields);
                         }
                     }
                 }
@@ -1108,12 +1108,12 @@ var DropDownTree = /** @class */ (function (_super) {
     DropDownTree.prototype.createHiddenElement = function () {
         if (this.allowMultiSelection || this.showCheckBox) {
             this.hiddenElement = this.createElement('select', {
-                attrs: { 'aria-hidden': 'true', 'class': HIDDENELEMENT, 'tabindex': '-1', 'multiple': '' }
+                attrs: { 'aria-hidden': 'true', 'class': HIDDENELEMENT, 'tabindex': '-1', 'multiple': '', 'aria-label': this.getModuleName() }
             });
         }
         else {
             this.hiddenElement = this.createElement('select', {
-                attrs: { 'aria-hidden': 'true', 'tabindex': '-1', 'class': HIDDENELEMENT }
+                attrs: { 'aria-hidden': 'true', 'tabindex': '-1', 'class': HIDDENELEMENT, 'aria-label': this.getModuleName() }
             });
         }
         prepend([this.hiddenElement], this.inputWrapper);
@@ -1258,9 +1258,11 @@ var DropDownTree = /** @class */ (function (_super) {
     };
     DropDownTree.prototype.setAttributes = function () {
         this.inputEle.setAttribute('tabindex', '-1');
+        this.inputEle.setAttribute('aria-label', this.getModuleName());
         var id = this.element.getAttribute('id');
         this.hiddenElement.id = id + '_hidden';
         this.inputWrapper.setAttribute('tabindex', '0');
+        this.inputWrapper.setAttribute('aria-label', this.getModuleName());
         attributes(this.inputWrapper, this.getAriaAttributes());
     };
     DropDownTree.prototype.setHTMLAttributes = function () {
@@ -1605,7 +1607,12 @@ var DropDownTree = /** @class */ (function (_super) {
                         focusedElement.setAttribute('tabindex', '0');
                     }
                     else {
-                        focusedElement = _this.treeObj.element.querySelector('li');
+                        var oldFocussedNode = _this.treeObj.element.querySelector('.e-node-focus');
+                        focusedElement = _this.treeObj.element.querySelector('li:not(.e-disable):not(.e-prevent)');
+                        if (oldFocussedNode && oldFocussedNode != focusedElement) {
+                            oldFocussedNode.setAttribute('tabindex', '-1');
+                            removeClass([oldFocussedNode], 'e-node-focus');
+                        }
                     }
                     focusedElement.focus();
                     addClass([focusedElement], ['e-node-focus']);
@@ -2454,7 +2461,12 @@ var DropDownTree = /** @class */ (function (_super) {
     };
     DropDownTree.prototype.setFooterTemplate = function () {
         if (this.footer) {
-            this.footer.innerHTML = '';
+            if (this.isReact && typeof this.footerTemplate === 'function') {
+                this.clearTemplate(['footerTemplate']);
+            }
+            else {
+                this.footer.innerHTML = '';
+            }
         }
         else {
             this.footer = this.createElement('div');

package/src/list-box/list-box-model.d.ts

@@ -1,4 +1,4 @@
-import { Input, InputObject } from '@syncfusion/ej2-inputs';import { DropDownBase, dropDownBaseClasses, FilteringEventArgs, SelectEventArgs } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { EventHandler, closest, removeClass, addClass, Complex, Property, ChildProperty, BaseEventArgs, L10n, setValue } from '@syncfusion/ej2-base';import { ModuleDeclaration, NotifyPropertyChanges, getComponent, EmitType, Event, extend, detach, attributes } from '@syncfusion/ej2-base';import { getUniqueID, Browser, formatUnit, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';import { prepend, append } from '@syncfusion/ej2-base';import { cssClass, Sortable, moveTo } from '@syncfusion/ej2-lists';import { Button } from '@syncfusion/ej2-buttons';import { createSpinner, showSpinner, hideSpinner, getZindexPartial } from '@syncfusion/ej2-popups';import { DataManager, Query } from '@syncfusion/ej2-data';
+import { Input, InputObject } from '@syncfusion/ej2-inputs';import { DropDownBase, dropDownBaseClasses, FilteringEventArgs, SelectEventArgs } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { EventHandler, closest, removeClass, addClass, Complex, Property, ChildProperty, BaseEventArgs, L10n, setValue } from '@syncfusion/ej2-base';import { ModuleDeclaration, NotifyPropertyChanges, getComponent, EmitType, Event, extend, detach, attributes } from '@syncfusion/ej2-base';import { getUniqueID, Browser, formatUnit, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';import { prepend, append } from '@syncfusion/ej2-base';import { cssClass, Sortable, moveTo, SortOrder } from '@syncfusion/ej2-lists';import { Button } from '@syncfusion/ej2-buttons';import { createSpinner, showSpinner, hideSpinner, getZindexPartial } from '@syncfusion/ej2-popups';import { DataManager, Query } from '@syncfusion/ej2-data';
 import {SelectionMode,CheckBoxPosition,ToolBarPosition,BeforeItemRenderEventArgs,ListBoxChangeEventArgs,DropEventArgs,DragEventArgs} from "./list-box";
 import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
 
@@ -160,6 +160,18 @@ export interface ListBoxModel extends DropDownBaseModel{
      */
     filterBarPlaceholder?: string;
 
+    /**
+     * Specifies the `sortOrder` to sort the data source. The available type of sort orders are
+     * * `None` - The data source is not sorting.
+     * * `Ascending` - The data source is sorting with ascending order.
+     * * `Descending` - The data source is sorting with descending order.
+     *
+     * @default null
+     * @asptype object
+     * @aspjsonconverterignore
+     */
+    sortOrder?: SortOrder;
+
     /**
      * Triggers while rendering each list item.
      *

package/src/list-box/list-box.d.ts

@@ -3,6 +3,7 @@ import { DropDownBase, FilteringEventArgs, SelectEventArgs } from '../drop-down-
 import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';
 import { ChildProperty, BaseEventArgs } from '@syncfusion/ej2-base';
 import { ModuleDeclaration, EmitType } from '@syncfusion/ej2-base';
+import { SortOrder } from '@syncfusion/ej2-lists';
 import { SelectionSettingsModel, ListBoxModel, ToolbarSettingsModel } from './list-box-model';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 /**
@@ -215,6 +216,17 @@ export declare class ListBox extends DropDownBase {
      * @default null
      */
     filterBarPlaceholder: string;
+    /**
+     * Specifies the `sortOrder` to sort the data source. The available type of sort orders are
+     * * `None` - The data source is not sorting.
+     * * `Ascending` - The data source is sorting with ascending order.
+     * * `Descending` - The data source is sorting with descending order.
+     *
+     * @default null
+     * @asptype object
+     * @aspjsonconverterignore
+     */
+    sortOrder: SortOrder;
     /**
      * Triggers while rendering each list item.
      *

package/src/list-box/list-box.js

@@ -226,7 +226,7 @@ var ListBox = /** @class */ (function (_super) {
         }
     };
     ListBox.prototype.updateActionCompleteData = function (li, item, index) {
-        this.jsonData.splice(index, 0, item);
+        this.jsonData.splice(index === null ? this.jsonData.length : index, 0, item);
     };
     ListBox.prototype.initToolbar = function () {
         var pos = this.toolbarSettings.position;
@@ -2449,6 +2449,9 @@ var ListBox = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], ListBox.prototype, "filterBarPlaceholder", void 0);
+    __decorate([
+        Property('None')
+    ], ListBox.prototype, "sortOrder", void 0);
     __decorate([
         Event()
     ], ListBox.prototype, "beforeItemRender", void 0);

package/src/mention/mention.js

@@ -409,7 +409,7 @@ var Mention = /** @class */ (function (_super) {
             }
         }
         else if (this.allowSpaces && this.queryString !== '' && currentRange && currentRange.trim() !== '' && currentRange.replace('\u00a0', ' ').lastIndexOf(' ') < currentRange.length - 1 &&
-            e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 8 && this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0)) {
+            e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 8 && (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) || (this.liCollections && this.liCollections.length > 0))) {
             this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
             this.searchLists(e);
         }

package/src/multi-select/checkbox-selection.d.ts

@@ -16,6 +16,7 @@ export declare class CheckBoxSelection {
     list: HTMLElement;
     private activeLi;
     private activeEle;
+    private boundPreventListSelection;
     constructor(parent?: IMulitSelect);
     getModuleName(): string;
     addEventListener(): void;
@@ -34,6 +35,7 @@ export declare class CheckBoxSelection {
     protected setSearchBox(args: IUpdateListArgs): InputObject | void;
     private clickOnBackIcon;
     private clearText;
+    private preventListSelection;
     private setDeviceSearchBox;
     private setSearchBoxPosition;
     protected setPopupFullScreen(): void;

package/src/multi-select/checkbox-selection.js

@@ -312,13 +312,20 @@ var CheckBoxSelection = /** @class */ (function () {
         if (this.parent.allowFiltering && this.parent.targetInputElement.value === '') {
             this.parent.search(null);
         }
-        this.parent.refreshPopup();
         this.parent.refreshListItems(null);
+        this.parent.refreshPopup();
         this.clearIconElement.style.visibility = 'hidden';
         this.filterInput.focus();
         this.setReorder(e);
+        this.boundPreventListSelection = this.preventListSelection.bind(this);
+        this.parent.popupWrapper.addEventListener('mouseup', this.boundPreventListSelection, true);
         e.preventDefault();
     };
+    CheckBoxSelection.prototype.preventListSelection = function (e) {
+        e.stopPropagation();
+        this.parent.popupWrapper.removeEventListener('mouseup', this.boundPreventListSelection, true);
+        this.boundPreventListSelection = null;
+    };
     CheckBoxSelection.prototype.setDeviceSearchBox = function () {
         this.parent.popupObj.element.classList.add(device);
         this.parent.popupObj.element.classList.add(mobileFilter);

package/src/multi-select/multi-select-model.d.ts

@@ -1,4 +1,4 @@
-import { DropDownBase, SelectEventArgs, dropDownBaseClasses, PopupEventArgs, FilteringEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, BeforeOpenEventArgs, FilterType, FieldSettings, ResultData } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, FloatLabelType, Input } from '@syncfusion/ej2-inputs';import { attributes, setValue, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';import { EventHandler, Property, Event, compile, L10n, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, prepend, Complex } from '@syncfusion/ej2-base';import { Search } from '../common/incremental-search';import { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined, ModuleDeclaration } from '@syncfusion/ej2-base';import { DataManager, Query, Predicate, JsonAdaptor, DataOptions } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur, encodePlaceholder } from './float-label';
+import { DropDownBase, SelectEventArgs, dropDownBaseClasses, PopupEventArgs, FilteringEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, BeforeOpenEventArgs, FilterType, FieldSettings, ResultData } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { isCollide, Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, FloatLabelType, Input } from '@syncfusion/ej2-inputs';import { attributes, setValue, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';import { EventHandler, Property, Event, compile, L10n, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, prepend, Complex } from '@syncfusion/ej2-base';import { Search } from '../common/incremental-search';import { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined, ModuleDeclaration } from '@syncfusion/ej2-base';import { DataManager, Query, Predicate, JsonAdaptor, DataOptions } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur, encodePlaceholder } from './float-label';
 import {visualMode,MultiSelectChangeEventArgs,RemoveEventArgs,ISelectAllEventArgs,TaggingEventArgs,CustomValueEventArgs} from "./multi-select";
 import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
 

package/src/multi-select/multi-select.d.ts

@@ -738,6 +738,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
         [key: string]: Object;
     }[], fields: FieldSettingsModel): FieldSettingsModel;
     private renderPopup;
+    private checkCollision;
     private setHeaderTemplate;
     private setFooterTemplate;
     private updateInitialData;

package/src/multi-select/multi-select.js

@@ -21,7 +21,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 import { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';
 import { FieldSettings } from '../drop-down-base/drop-down-base';
-import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import { isCollide, Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
 import { Input } from '@syncfusion/ej2-inputs';
 import { attributes, setValue, getValue } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';
@@ -269,7 +269,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id });
                 _this.updateAriaActiveDescendant();
                 if (_this.isFirstClick) {
-                    if (_this.enableVirtualization && _this.mode === 'CheckBox' && _this.value) {
+                    if (_this.enableVirtualization && _this.mode === 'CheckBox' && _this.value && _this.enableSelectionOrder) {
                         _this.updateVirtualReOrderList();
                     }
                     _this.loadTemplate();
@@ -339,9 +339,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         if (this.enableVirtualization) {
             var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
-            if (focusedItem) {
-                this.scrollBottom(focusedItem);
-            }
+            this.scrollBottom(focusedItem);
         }
     };
     MultiSelect.prototype.focusAtFirstListItem = function () {
@@ -712,7 +710,7 @@ var MultiSelect = /** @class */ (function (_super) {
             && (this.mode === 'CheckBox' && this.showSelectAll))) || (this.enableVirtualization && this.mode === 'CheckBox' && this.showSelectAll && this.virtualSelectAll && this.value && this.value.length === this.totalItemCount)) {
             this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'check' });
         }
-        else if ((searchCount !== searchActiveCount) && (this.mode === 'CheckBox' && this.showSelectAll)) {
+        else if ((searchCount !== searchActiveCount) && (this.mode === 'CheckBox' && this.showSelectAll) && ((!this.enableVirtualization) || (this.enableVirtualization && !this.virtualSelectAll))) {
             this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });
         }
         if (this.enableGroupCheckBox && this.fields.groupBy && !this.enableSelectionOrder) {
@@ -773,7 +771,12 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.getQuery = function (query) {
         var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
         if (this.isFiltered) {
-            return filterQuery;
+            if ((this.enableVirtualization && !isNullOrUndefined(this.customFilterQuery))) {
+                filterQuery = this.customFilterQuery.clone();
+            }
+            else if (!this.enableVirtualization) {
+                return filterQuery;
+            }
         }
         if (this.filterAction) {
             if ((this.targetElement() !== null && !this.enableVirtualization) || (this.enableVirtualization && this.targetElement() !== null && this.targetElement().trim() !== '')) {
@@ -795,6 +798,15 @@ var MultiSelect = /** @class */ (function (_super) {
             if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && !this.virtualSelectAll && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
                 return this.virtualFilterQuery(filterQuery);
             }
+            else if (this.enableVirtualization && (this.dataSource instanceof DataManager && !this.virtualGroupDataSource)) {
+                for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                    if (filterQuery.queries[queryElements].fn === 'onSkip' || filterQuery.queries[queryElements].fn === 'onTake') {
+                        filterQuery.queries.splice(queryElements, 1);
+                        --queryElements;
+                    }
+                }
+                return filterQuery;
+            }
             return query ? query : this.query ? this.query : new Query();
         }
     };
@@ -814,6 +826,30 @@ var MultiSelect = /** @class */ (function (_super) {
                 isTake = false;
             }
         }
+        var queryTakeValue = 0;
+        if (filterQuery && filterQuery.queries.length > 0) {
+            for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                if (filterQuery.queries[queryElements].fn === 'onTake') {
+                    queryTakeValue = takeValue <= filterQuery.queries[queryElements].e.nos ? filterQuery.queries[queryElements].e.nos : takeValue;
+                }
+            }
+        }
+        if (queryTakeValue <= 0 && this.query && this.query.queries.length > 0) {
+            for (var queryElements = 0; queryElements < this.query.queries.length; queryElements++) {
+                if (this.query.queries[queryElements].fn === 'onTake') {
+                    queryTakeValue = takeValue <= this.query.queries[queryElements].e.nos ? this.query.queries[queryElements].e.nos : takeValue;
+                }
+            }
+        }
+        if (filterQuery && filterQuery.queries.length > 0) {
+            for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                if (filterQuery.queries[queryElements].fn === 'onTake') {
+                    queryTakeValue = filterQuery.queries[queryElements].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements].e.nos;
+                    filterQuery.queries.splice(queryElements, 1);
+                    --queryElements;
+                }
+            }
+        }
         if ((this.allowFiltering && isSkip) || !isReOrder || (!this.allowFiltering && isSkip)) {
             if (!isReOrder) {
                 filterQuery.skip(this.viewPortInfo.startIndex);
@@ -822,13 +858,14 @@ var MultiSelect = /** @class */ (function (_super) {
                 filterQuery.skip(this.virtualItemStartIndex);
             }
         }
-        if (isTake) {
-            if (this.isIncrementalRequest) {
-                filterQuery.take(this.incrementalEndIndex);
-            }
-            else {
-                filterQuery.take(takeValue);
-            }
+        if (this.isIncrementalRequest) {
+            filterQuery.take(this.incrementalEndIndex);
+        }
+        else if (queryTakeValue > 0) {
+            filterQuery.take(queryTakeValue);
+        }
+        else {
+            filterQuery.take(takeValue);
         }
         filterQuery.requiresCount();
         return filterQuery;
@@ -1151,7 +1188,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     parseInt(getComputedStyle(this.dropIcon).marginRight);
                 elementWidth = this.overAllWrapper.clientWidth - (downIconWidth + 2 * (parseInt(getComputedStyle(this.inputElement).paddingRight)));
             }
-            if (this.floatLabelType === 'Auto') {
+            if (this.floatLabelType !== 'Never') {
                 Input.calculateWidth(elementWidth, this.overAllWrapper, this.getModuleName());
             }
         }
@@ -2404,7 +2441,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 var currentText = [];
                 var value_1 = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) : this.value[this.value.length - 1];
                 temp = this.getTextByValue(value_1);
-                var textValues = this.text != null ? this.text + ',' + temp : temp;
+                var textValues = this.text != null && this.text != "" ? this.text + ',' + temp : temp;
                 currentText.push(textValues);
                 this.setProperties({ text: currentText.toString() }, true);
             }
@@ -2776,6 +2813,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         }
                     }
                 });
+                this.checkCollision(this.popupWrapper);
                 this.popupContentElement = this.popupObj.element.querySelector('.e-content');
                 if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
                     this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
@@ -2785,6 +2823,15 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
     };
+    MultiSelect.prototype.checkCollision = function (popupEle) {
+        if (!(this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering)) {
+            var collision = isCollide(popupEle);
+            if (collision.length > 0) {
+                popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';
+            }
+            this.popupObj.resolveCollision();
+        }
+    };
     MultiSelect.prototype.setHeaderTemplate = function () {
         var compiledString;
         if (this.header) {
@@ -3048,6 +3095,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             return;
                         }
                         _this.isFiltered = true;
+                        _this.customFilterQuery = query;
                         _this.remoteFilterAction = true;
                         _this.dataUpdater(dataSource, query, fields);
                     },
@@ -3336,7 +3384,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         (element && (element.getAttribute('aria-selected') === 'true' && this.hideSelectedItem) &&
                             (this.mode === 'Box' || this.mode === 'Default'))) || (this.enableVirtualization && value != null && text != null && !isCustomData)) {
                         var currentText = [];
-                        var textValues = this.text != null ? this.text + ',' + text : text;
+                        var textValues = this.text != null && this.text != "" ? this.text + ',' + text : text;
                         currentText.push(textValues);
                         this.setProperties({ text: currentText.toString() }, true);
                         this.addChip(text, value);
@@ -3364,7 +3412,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             this.wireListEvents();
                         }
                         var currentText = [];
-                        var textValues = this.text != null ? this.text + ',' + text : text;
+                        var textValues = this.text != null && this.text != "" ? this.text + ',' + text : text;
                         currentText.push(textValues);
                         this.setProperties({ text: currentText.toString() }, true);
                         this.addChip(text, value);
@@ -4234,7 +4282,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (this.enableVirtualization) {
                     if (state) {
                         this.virtualSelectAll = true;
-                        this.resetList(this.dataSource, this.fields, new Query().skip(this.viewPortInfo.startIndex));
+                        this.resetList(this.dataSource, this.fields, new Query());
                         if (this.virtualSelectAllData instanceof Array) {
                             for (var i = 0; i < this.virtualSelectAllData.length; i++) {
                                 if (li[this.skeletonCount + i]) {
@@ -4304,8 +4352,12 @@ var MultiSelect = /** @class */ (function (_super) {
                         }
                         this.value = [];
                         this.virtualSelectAll = false;
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var ulElement = this.renderItems(this.listData, this.fields);
+                        if (!isNullOrUndefined(this.viewPortInfo.startIndex) && !isNullOrUndefined(this.viewPortInfo.endIndex)) {
+                            this.notify("setCurrentViewDataAsync", {
+                                component: this.getModuleName(),
+                                module: "VirtualScroll",
+                            });
+                        }
                     }
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var virtualTrackElement = this.list.getElementsByClassName('e-virtual-ddl')[0];
@@ -4794,6 +4846,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 duration: 100,
                 delay: delay ? delay : 0
             };
+            this.customFilterQuery = null;
             var eventArgs = { popup: this.popupObj, cancel: false, animation: animModel, event: e || null };
             this.trigger('close', eventArgs, function (eventArgs) {
                 if (!eventArgs.cancel) {
@@ -4816,7 +4869,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     if (_this.mode === 'CheckBox' && _this.showSelectAll) {
                         EventHandler.remove(_this.popupObj.element, 'click', _this.clickHandler);
                     }
-                    if (_this.enableVirtualization && _this.mode === 'CheckBox') {
+                    if (_this.enableVirtualization && _this.mode === 'CheckBox' && _this.enableSelectionOrder) {
                         _this.viewPortInfo.startIndex = _this.virtualItemStartIndex = 0;
                         _this.viewPortInfo.endIndex = _this.virtualItemEndIndex = _this.viewPortInfo.startIndex > 0 ? _this.viewPortInfo.endIndex : _this.itemCount;
                         _this.previousStartIndex = 0;

package/styles/fluent-dark.css

@@ -1346,7 +1346,7 @@ ejs-dropdownlist {
 
 .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
 .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
-  margin-top: -1.5em;
+  margin-top: -1.6em;
 }
 
 .e-multiselect.e-input-group .e-ddl-icon::before {

package/styles/fluent.css

@@ -1346,7 +1346,7 @@ ejs-dropdownlist {
 
 .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
 .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
-  margin-top: -1.5em;
+  margin-top: -1.6em;
 }
 
 .e-multiselect.e-input-group .e-ddl-icon::before {

package/styles/list-box/_layout.scss

@@ -278,11 +278,15 @@
     }
 
     .e-input-group {
-      padding: 4px 8px;
+      @if $skin-name != 'tailwind' {
+        padding: 4px 8px;
+      }
     }
 
     .e-input-focus {
-      padding: 4px 4px 4px 8px;
+      @if $skin-name != 'tailwind' {
+        padding: 4px 4px 4px 8px;
+      }
     }
 
     .e-hidden-select {

package/styles/list-box/tailwind-dark.css

@@ -373,16 +373,6 @@
   right: 0;
   top: 30%;
 }
-.e-listbox-wrapper .e-input-group,
-.e-listbox-container .e-input-group,
-.e-listboxtool-wrapper .e-input-group {
-  padding: 4px 8px;
-}
-.e-listbox-wrapper .e-input-focus,
-.e-listbox-container .e-input-focus,
-.e-listboxtool-wrapper .e-input-focus {
-  padding: 4px 4px 4px 8px;
-}
 .e-listbox-wrapper .e-hidden-select,
 .e-listbox-container .e-hidden-select,
 .e-listboxtool-wrapper .e-hidden-select {

package/styles/list-box/tailwind.css

@@ -373,16 +373,6 @@
   right: 0;
   top: 30%;
 }
-.e-listbox-wrapper .e-input-group,
-.e-listbox-container .e-input-group,
-.e-listboxtool-wrapper .e-input-group {
-  padding: 4px 8px;
-}
-.e-listbox-wrapper .e-input-focus,
-.e-listbox-container .e-input-focus,
-.e-listboxtool-wrapper .e-input-focus {
-  padding: 4px 4px 4px 8px;
-}
 .e-listbox-wrapper .e-hidden-select,
 .e-listbox-container .e-hidden-select,
 .e-listboxtool-wrapper .e-hidden-select {

package/styles/material-dark.css

@@ -1527,6 +1527,15 @@ ejs-dropdownlist {
     transform: rotate(360deg);
   }
 }
+.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] {
+  padding: 1px 0;
+}
+
+.e-small .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text],
+.e-small.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] {
+  padding: 0;
+}
+
 .e-multiselect.e-input-group .e-ddl-icon::before {
   content: "\e969";
   font-family: "e-icons";

package/styles/material.css

@@ -1582,6 +1582,15 @@ ejs-dropdownlist {
     transform: rotate(360deg);
   }
 }
+.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] {
+  padding: 1px 0;
+}
+
+.e-small .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text],
+.e-small.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] {
+  padding: 0;
+}
+
 .e-multiselect.e-input-group .e-ddl-icon::before {
   content: "\e969";
   font-family: "e-icons";

package/styles/multi-select/_fluent-definition.scss

@@ -241,6 +241,6 @@ $ddl-small-clear-icon-width: 12px !default;
 
   .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
   .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
-    margin-top: -1.5em;
+    margin-top: -1.6em;
   }
 }

package/styles/multi-select/_material-dark-definition.scss

@@ -228,3 +228,14 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
 $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
 $filled-multiselect-chip-bg-color: $grey-800 !default;
 $filled-multiselect-chip-hover-bg-color: $grey-700 !default;
+
+@include export-module('multiselect-material-dark') {
+  .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type = 'text'] {
+    padding: 1px 0;
+  }
+
+  .e-small .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type = 'text'],
+  .e-small.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type = 'text'] {
+    padding: 0;
+  }
+}

package/styles/multi-select/_material-definition.scss

@@ -221,3 +221,14 @@ $outline-multiselect-disabled-font-color: rgba($grey-light-font, .38) !default;
 $outline-multiselect-disabled-chip-bg-color: $grey-100 !default;
 $filled-multiselect-chip-bg-color: darken($grey-300, 7%) !default;
 $filled-multiselect-chip-hover-bg-color: darken($grey-300, 7%) !default;
+
+@include export-module('multiselect-material') {
+  .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type = 'text'] {
+    padding: 1px 0;
+  }
+
+  .e-small .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type = 'text'],
+  .e-small.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type = 'text'] {
+    padding: 0;
+  }
+}

package/styles/multi-select/fluent-dark.css

@@ -94,7 +94,7 @@
 
 .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
 .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
-  margin-top: -1.5em;
+  margin-top: -1.6em;
 }
 
 .e-multiselect.e-input-group .e-ddl-icon::before {

package/styles/multi-select/fluent.css

@@ -94,7 +94,7 @@
 
 .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
 .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
-  margin-top: -1.5em;
+  margin-top: -1.6em;
 }
 
 .e-multiselect.e-input-group .e-ddl-icon::before {