@syncfusion/ej2-dropdowns 25.1.37 → 25.1.40

package/dist/es6/ej2-dropdowns.es5.js

@@ -190,6 +190,10 @@ function resetIncrementalSearchValues(elementId) {
  * @returns {void}
  */
 function highlightSearch(element, query, ignoreCase, type) {
+    var isHtmlElement = /<[^>]*>/g.test(element.innerText);
+    if (isHtmlElement) {
+        element.innerText = element.innerText.replace(/[\u00A0-\u9999<>&]/g, function (match) { return "&#" + match.charCodeAt(0) + ";"; });
+    }
     if (query === '') {
         return;
     }
@@ -471,10 +475,8 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                     this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList);
                 }
                 var query = this.parent.getForQuery(this.parent.value).clone();
-                if (!this.parent.allowFiltering) { //need to check with allowFiltering false
-                    var skipvalue = this.parent.viewPortInfo.startIndex - this.parent.value.length >= 0 ? this.parent.viewPortInfo.startIndex - this.parent.value.length : 0;
-                    query = query.skip(skipvalue);
-                }
+                var skipvalue = this.parent.viewPortInfo.startIndex - this.parent.value.length >= 0 ? this.parent.viewPortInfo.startIndex - this.parent.value.length : 0;
+                query = query.skip(skipvalue);
                 this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                 isListUpdated = false;
             }
@@ -640,7 +642,9 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                         if (this.parent.keyboardEvent != null) {
                             this.parent.handleVirtualKeyboardActions(this.parent.keyboardEvent, this.parent.pageCount);
                         }
-                        this.parent.isCustomFilter = false;
+                        if (!this.parent.customFilterQuery) {
+                            this.parent.isCustomFilter = false;
+                        }
                         return [2 /*return*/];
                 }
             });
@@ -902,6 +906,9 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         _this.incrementalPreQueryString = '';
         _this.isObjectCustomValue = false;
         _this.appendUncheckList = false;
+        _this.getInitialData = false;
+        _this.preventPopupOpen = true;
+        _this.customFilterQuery = new Query();
         _this.virtualListInfo = {
             currentPageNumber: null,
             direction: null,
@@ -1216,6 +1223,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         var actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
         this.skeletonCount = actualCount * 2 < this.itemCount ? this.itemCount : actualCount * 2;
         this.itemCount = retainSkeleton ? this.itemCount : this.skeletonCount;
+        this.virtualItemCount = this.itemCount;
         this.skeletonCount = Math.floor(this.skeletonCount / 2) + 2;
     };
     DropDownBase.prototype.GetVirtualTrackHeight = function () {
@@ -1309,6 +1317,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
      */
     DropDownBase.prototype.initialize = function (e) {
         this.bindEvent = true;
+        this.preventPopupOpen = true;
         this.actionFailureTemplateId = "" + this.element.id + ACTIONFAILURETEMPLATE_PROPERTY;
         if (this.element.tagName === 'UL') {
             var jsonElement = ListBase.createJsonFromElement(this.element);
@@ -1494,6 +1503,12 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                                     }
                                     _this.isRequested = false;
                                     _this.bindChildItems(listItems, ulElement, fields, e);
+                                    if (_this.getInitialData) {
+                                        _this.setListData(dataSource, fields, query, event);
+                                        _this.getInitialData = false;
+                                        _this.preventPopupOpen = false;
+                                        return;
+                                    }
                                 }
                             });
                         }).catch(function (e) {
@@ -1565,6 +1580,11 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                                     _this.renderGroupTemplate(ulElement);
                                 }
                                 _this.bindChildItems(localDataArgs.result, ulElement, fields);
+                                if (_this.getInitialData) {
+                                    _this.getInitialData = false;
+                                    _this.preventPopupOpen = false;
+                                    return;
+                                }
                                 setTimeout(function () {
                                     if (_this.getModuleName() === 'multiselect' && _this.itemTemplate != null && (ulElement.childElementCount > 0 && (ulElement.children[0].childElementCount > 0 || (_this.fields.groupBy && ulElement.children[1] && ulElement.children[1].childElementCount > 0)))) {
                                         _this.updateDataList();
@@ -1666,7 +1686,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
     DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {
         /* eslint-enable @typescript-eslint/no-unused-vars */
         this.listData = list;
-        if (this.isVirtualizationEnabled && !this.isCustomDataUpdated) {
+        if (this.isVirtualizationEnabled && !this.isCustomDataUpdated && !this.virtualSelectAll) {
             this.notify("setGeneratedData", {
                 module: "VirtualScroll",
             });
@@ -1888,6 +1908,9 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         this.fixedHeaderElement.style.display = 'block';
     };
     DropDownBase.prototype.getValidLi = function () {
+        if (this.isVirtualizationEnabled) {
+            return this.liCollections[0].classList.contains('e-virtual-list') ? this.liCollections[this.skeletonCount] : this.liCollections[0];
+        }
         return this.liCollections[0];
     };
     /**
@@ -1962,7 +1985,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                     }
                     this.updateListElements(listData);
                 }
-                else if ((!virtualUlElement)) {
+                else if ((!virtualUlElement) || (!virtualUlElement.firstChild)) {
                     this.list.innerHTML = '';
                     this.createVirtualContent();
                     this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
@@ -2307,6 +2330,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
         var itemsCount = this.getItems().length;
+        var isListboxEmpty = itemsCount === 0;
         var selectedItemValue = this.list.querySelector('.' + dropDownBaseClasses.selected);
         items = (items instanceof Array ? items : [items]);
         var index;
@@ -2341,11 +2365,24 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             li.setAttribute('role', 'option');
             this.notify('addItem', { module: 'CheckBoxSelection', item: li });
             liCollections.push(li);
-            this.listData.push(item);
+            if (this.getModuleName() === 'listbox') {
+                this.listData.splice(isListboxEmpty ? this.listData.length : index, 0, item);
+                if (this.listData.length !== this.sortedData.length) {
+                    this.sortedData = this.listData;
+                }
+            }
+            else {
+                this.listData.push(item);
+            }
             if (this.sortOrder === 'None' && isNullOrUndefined(itemIndex) && index === 0) {
                 index = null;
             }
-            this.updateActionCompleteData(li, item, index);
+            if (this.getModuleName() === 'listbox') {
+                this.updateActionCompleteData(li, item, isListboxEmpty ? null : index);
+            }
+            else {
+                this.updateActionCompleteData(li, item, index);
+            }
             //Listbox event
             this.trigger('beforeItemRender', { element: li, item: item });
         }
@@ -4232,6 +4269,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     e.preventDefault();
                     break;
                 default:
+                    if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {
+                        this.getInitialData = true;
+                        this.renderList();
+                    }
                     this.typedString = this.filterInput.value;
                     this.preventAutoFill = false;
                     this.searchLists(e);
@@ -4280,13 +4321,13 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                 filterQuery.where('', filterType, this.typedString, this.ignoreCase, this.ignoreAccent);
             }
-            else {
+            else if (((this.getModuleName() !== 'combobox') || this.enableVirtualization) || (this.isFiltering() && this.getModuleName() === 'combobox' && this.typedString !== '')) {
                 var fields = (this.fields.text) ? this.fields.text : '';
                 filterQuery.where(fields, filterType, this.typedString, this.ignoreCase, this.ignoreAccent);
             }
         }
         else {
-            filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
+            filterQuery = (this.enableVirtualization && !isNullOrUndefined(this.customFilterQuery)) ? this.customFilterQuery.clone() : query ? query.clone() : this.query ? this.query.clone() : new Query();
         }
         if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
             var takeValue = this.getTakeValue();
@@ -4301,26 +4342,36 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             }
             var queryTakeValue = 0;
             var querySkipValue = 0;
-            if (this.query && this.query.queries.length > 0) {
-                for (var queryElements_1 = 0; queryElements_1 < this.query.queries.length; queryElements_1++) {
-                    if (this.query.queries[queryElements_1].fn === 'onSkip') {
-                        querySkipValue = this.query.queries[queryElements_1].e.nos;
+            if (filterQuery && filterQuery.queries.length > 0) {
+                for (var queryElements_1 = 0; queryElements_1 < filterQuery.queries.length; queryElements_1++) {
+                    if (filterQuery.queries[queryElements_1].fn === 'onSkip') {
+                        querySkipValue = filterQuery.queries[queryElements_1].e.nos;
+                    }
+                    if (filterQuery.queries[queryElements_1].fn === 'onTake') {
+                        queryTakeValue = takeValue <= filterQuery.queries[queryElements_1].e.nos ? filterQuery.queries[queryElements_1].e.nos : takeValue;
                     }
-                    if (this.query.queries[queryElements_1].fn === 'onTake') {
-                        queryTakeValue = takeValue <= this.query.queries[queryElements_1].e.nos ? this.query.queries[queryElements_1].e.nos : takeValue;
+                }
+            }
+            if (queryTakeValue <= 0 && this.query && this.query.queries.length > 0) {
+                for (var queryElements_2 = 0; queryElements_2 < this.query.queries.length; queryElements_2++) {
+                    if (this.query.queries[queryElements_2].fn === 'onTake') {
+                        queryTakeValue = takeValue <= this.query.queries[queryElements_2].e.nos ? this.query.queries[queryElements_2].e.nos : takeValue;
                     }
                 }
             }
             var skipExists = false;
-            var takeExists = false;
             if (filterQuery && filterQuery.queries.length > 0) {
-                for (var queryElements_2 = 0; queryElements_2 < filterQuery.queries.length; queryElements_2++) {
-                    if (filterQuery.queries[queryElements_2].fn === 'onSkip') {
-                        skipExists = true;
+                for (var queryElements_3 = 0; queryElements_3 < filterQuery.queries.length; queryElements_3++) {
+                    if (filterQuery.queries[queryElements_3].fn === 'onSkip') {
+                        querySkipValue = filterQuery.queries[queryElements_3].e.nos;
+                        filterQuery.queries.splice(queryElements_3, 1);
+                        --queryElements_3;
+                        continue;
                     }
-                    if (filterQuery.queries[queryElements_2].fn === 'onTake') {
-                        takeExists = true;
-                        filterQuery.queries[queryElements_2].e.nos = filterQuery.queries[queryElements_2].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements_2].e.nos;
+                    if (filterQuery.queries[queryElements_3].fn === 'onTake') {
+                        queryTakeValue = filterQuery.queries[queryElements_3].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements_3].e.nos;
+                        filterQuery.queries.splice(queryElements_3, 1);
+                        --queryElements_3;
                     }
                 }
             }
@@ -4336,17 +4387,23 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 filterQuery.take(this.incrementalEndIndex);
             }
             else {
-                if (!takeExists) {
-                    if (queryTakeValue > 0) {
-                        filterQuery.take(queryTakeValue);
-                    }
-                    else {
-                        filterQuery.take(takeValue);
-                    }
+                if (queryTakeValue > 0) {
+                    filterQuery.take(queryTakeValue);
+                }
+                else {
+                    filterQuery.take(takeValue);
                 }
             }
             filterQuery.requiresCount();
         }
+        else if (this.enableVirtualization && (this.dataSource instanceof DataManager && !this.virtualGroupDataSource)) {
+            for (var queryElements_4 = 0; queryElements_4 < filterQuery.queries.length; queryElements_4++) {
+                if (filterQuery.queries[queryElements_4].fn === 'onSkip' || filterQuery.queries[queryElements_4].fn === 'onTake') {
+                    filterQuery.queries.splice(queryElements_4, 1);
+                    --queryElements_4;
+                }
+            }
+        }
         return filterQuery;
     };
     DropDownList.prototype.getSelectionPoints = function () {
@@ -4373,6 +4430,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         return;
                     }
                     _this.isCustomFilter = true;
+                    _this.customFilterQuery = query;
                     _this.filteringAction(dataSource, query, fields);
                 },
                 baseEventArgs: e,
@@ -4400,7 +4458,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     };
     DropDownList.prototype.filteringAction = function (dataSource, query, fields) {
         if (!isNullOrUndefined(this.filterInput)) {
-            this.beforePopupOpen = (!this.isPopupOpen && this.getModuleName() === 'combobox' && this.filterInput.value === '') ?
+            this.beforePopupOpen = ((!this.isPopupOpen && this.getModuleName() === 'combobox' && this.filterInput.value === '') || this.getInitialData) ?
                 false : true;
             var isNoData = this.list.classList.contains(dropDownBaseClasses.noData);
             if (this.filterInput.value.trim() === '' && !this.itemTemplate) {
@@ -4408,6 +4466,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 this.isTyped = false;
                 if (!isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list)) {
                     if (this.enableVirtualization) {
+                        if (this.isFiltering()) {
+                            this.isPreventScrollAction = true;
+                            this.list.scrollTop = 0;
+                            this.previousStartIndex = 0;
+                            this.virtualListInfo = null;
+                        }
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
                         this.resetList(dataSource, fields, query);
@@ -4578,6 +4642,13 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.isNotSearchList = false;
             return;
         }
+        if (this.getInitialData) {
+            this.updateActionCompleteDataValues(ulElement, list);
+        }
+        if (!this.preventPopupOpen && this.getModuleName() === 'combobox') {
+            this.beforePopupOpen = true;
+            this.preventPopupOpen = true;
+        }
         var tempItemCount = this.itemCount;
         if (this.isActive || !isNullOrUndefined(ulElement)) {
             var selectedItem = this.selectedLI ? this.selectedLI.cloneNode(true) : null;
@@ -4761,7 +4832,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         else {
             this.actionCompleteData.ulElement.appendChild(li.cloneNode(true));
         }
-        if (this.isFiltering() && this.actionCompleteData.list.indexOf(item) < 0) {
+        if (this.isFiltering() && this.actionCompleteData.list && this.actionCompleteData.list.indexOf(item) < 0) {
             this.actionCompleteData.list.push(item);
         }
     };
@@ -4817,7 +4888,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 popupEle.setAttribute('aria-label', _this.element.id);
                 popupEle.setAttribute('role', 'dialog');
                 var searchBox = _this.setSearchBox(popupEle);
-                _this.listContainerHeight = formatUnit(_this.popupHeight);
+                _this.listContainerHeight = _this.allowFiltering && _this.getModuleName() === 'dropdownlist' && Browser.isDevice ? formatUnit(Math.round(window.outerHeight).toString() + 'px') : formatUnit(_this.popupHeight);
                 if (_this.headerTemplate) {
                     _this.setHeaderTemplate(popupEle);
                 }
@@ -4832,6 +4903,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     _this.listItemHeight = listitems.length > 0 ? Math.ceil(listitems[0].getBoundingClientRect().height) : 0;
                 }
                 if (_this.enableVirtualization && !_this.list.classList.contains(dropDownBaseClasses.noData)) {
+                    _this.getSkeletonCount();
+                    _this.skeletonCount = _this.totalItemCount < (_this.itemCount * 2) ? 0 : _this.skeletonCount;
                     if (!_this.list.querySelector('.e-virtual-ddl-content')) {
                         _this.list.appendChild(_this.createElement('div', {
                             className: 'e-virtual-ddl-content',
@@ -5138,7 +5211,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             var inputWidth = this.inputWrapper.container.offsetWidth * parseFloat(width) / 100;
             width = inputWidth.toString() + 'px';
         }
-        if (Browser.isDevice && (!this.allowFiltering && (this.getModuleName() === 'dropdownlist' ||
+        if (Browser.isDevice && (width.indexOf('px') > -1) && (!this.allowFiltering && (this.getModuleName() === 'dropdownlist' ||
             (this.isDropDownClick && this.getModuleName() === 'combobox')))) {
             var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];
             width = (parseInt(width, 10) + (parseInt(getComputedStyle(firstItem).textIndent, 10) -
@@ -5442,7 +5515,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             dataSourceCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
         }
-        if (this.enableVirtualization && this.isFiltering() && this.value != null && isFilterValue && this.totalItemCount !== dataSourceCount) {
+        if (this.enableVirtualization && this.isFiltering() && isFilterValue && this.totalItemCount !== dataSourceCount) {
             this.updateInitialData();
             this.checkAndResetCache();
         }
@@ -5563,7 +5636,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         this.setFields();
         this.inputWrapper.container.style.width = formatUnit(this.width);
         this.inputWrapper.container.classList.add('e-ddl');
-        if (this.floatLabelType === 'Auto') {
+        if (this.floatLabelType !== 'Never') {
             Input.calculateWidth(this.inputElement, this.inputWrapper.container);
         }
         if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never') {
@@ -6213,6 +6286,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             }
         }
         this.isVirtualTrackHeight = false;
+        this.customFilterQuery = null;
         this.closePopup(0, e);
         var dataItem = this.getItemData();
         var isSelectVal = !isNullOrUndefined(this.selectedLI);
@@ -6250,7 +6324,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         addClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);
         this.onFocus(e);
-        if (this.floatLabelType === 'Auto') {
+        if (this.floatLabelType !== 'Never') {
             Input.calculateWidth(this.inputElement, this.inputWrapper.container);
         }
     };
@@ -6272,7 +6346,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.targetElement().blur();
         }
         removeClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);
-        if (this.floatLabelType === 'Auto' && this.inputElement.value === '') {
+        if (this.floatLabelType !== 'Never') {
             Input.calculateWidth(this.inputElement, this.inputWrapper.container);
         }
     };
@@ -6323,17 +6397,18 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             detach(this.inputWrapper.container);
         }
         this.hiddenElement = null;
+        this.filterInput = null;
         this.inputWrapper = null;
         this.keyboardModule = null;
         this.ulElement = null;
         this.list = null;
+        this.clearIconElement = null;
         this.popupObj = null;
         this.popupContentElement = null;
         this.rippleFun = null;
         this.selectedLI = null;
         this.liCollections = null;
         this.item = null;
-        this.inputWrapper = null;
         this.footer = null;
         this.header = null;
         this.previousSelectedLI = null;
@@ -6350,9 +6425,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             floatLabelType: this.floatLabelType,
             properties: this.properties
         }, this.clearButton);
-        if (this.isAngular) {
-            this.inputElement = null;
-        }
+        this.clearButton = null;
+        this.inputElement = null;
         _super.prototype.destroy.call(this);
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
@@ -6878,7 +6952,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             cancel: false,
             preventDefaultAction: false,
             event: event,
-            text: value,
+            text: value.trim(),
             fields: filterFields
         };
         this.trigger('filtering', args, function (args) {
@@ -6886,7 +6960,7 @@ var DropDownTree = /** @__PURE__ @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;
@@ -6897,18 +6971,18 @@ var DropDownTree = /** @__PURE__ @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);
                         }
                     }
                 }
@@ -7584,12 +7658,12 @@ var DropDownTree = /** @__PURE__ @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);
@@ -7734,9 +7808,11 @@ var DropDownTree = /** @__PURE__ @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 () {
@@ -8081,7 +8157,12 @@ var DropDownTree = /** @__PURE__ @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']);
@@ -8929,7 +9010,12 @@ var DropDownTree = /** @__PURE__ @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');
@@ -10148,7 +10234,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
         }
     };
     ComboBox.prototype.setValue = function (e) {
-        if (e && e.type === 'keydown' && e.action === 'enter') {
+        if ((e && e.type === 'keydown' && e.action === 'enter') || (e && e.type === 'click')) {
             this.removeFillSelection();
         }
         if (this.autofill && this.getModuleName() === 'combobox' && e && e.type === 'keydown' && e.action !== 'enter') {
@@ -10273,7 +10359,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
             this.preventAutoFill = this.inputElement.value === '' ? false : this.preventAutoFill;
             this.setAutoFill(activeElement, isKeyNavigate);
         }
-        else if (this.inputElement.value === '') {
+        else if (!isNullOrUndefined(this.inputElement) && this.inputElement.value === '') {
             this.activeIndex = null;
             if (!isNullOrUndefined(this.list)) {
                 if (!this.enableVirtualization) {
@@ -10530,9 +10616,6 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
     ComboBox.prototype.render = function () {
         _super.prototype.render.call(this);
         this.setSearchBox();
-        if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {
-            _super.prototype.renderList.call(this);
-        }
         this.renderComplete();
     };
     /**
@@ -10846,7 +10929,12 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
         var filterType = (this.queryString === '' && !isNullOrUndefined(value)) ? 'equal' : this.filterType;
         var queryString = (this.queryString === '' && !isNullOrUndefined(value)) ? value : this.queryString;
         if (this.isFiltered) {
-            return filterQuery;
+            if ((this.enableVirtualization && !isNullOrUndefined(this.customFilterQuery))) {
+                filterQuery = this.customFilterQuery.clone();
+            }
+            else if (!this.enableVirtualization) {
+                return filterQuery;
+            }
         }
         if (this.queryString !== null && this.queryString !== '') {
             var dataType = this.typeOfData(this.dataSource).typeof;
@@ -10872,48 +10960,61 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
         if (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
             var queryTakeValue = 0;
             var querySkipValue = 0;
-            if (this.query && this.query.queries.length > 0) {
-                for (var queryElements = 0; queryElements < this.query.queries.length; queryElements++) {
-                    if (this.query.queries[queryElements].fn === 'onSkip') {
-                        querySkipValue = this.query.queries[queryElements].e.nos;
+            var takeValue = this.getTakeValue();
+            if (filterQuery && filterQuery.queries.length > 0) {
+                for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                    if (filterQuery.queries[queryElements].fn === 'onSkip') {
+                        querySkipValue = filterQuery.queries[queryElements].e.nos;
+                    }
+                    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;
                     }
                 }
             }
-            var skipExists = false;
-            var takeExists = false;
             if (filterQuery && filterQuery.queries.length > 0) {
                 for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
                     if (filterQuery.queries[queryElements].fn === 'onSkip') {
-                        skipExists = true;
+                        querySkipValue = filterQuery.queries[queryElements].e.nos;
+                        filterQuery.queries.splice(queryElements, 1);
+                        --queryElements;
+                        continue;
                     }
                     if (filterQuery.queries[queryElements].fn === 'onTake') {
-                        takeExists = true;
-                        filterQuery.queries[queryElements].e.nos = filterQuery.queries[queryElements].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements].e.nos;
+                        queryTakeValue = filterQuery.queries[queryElements].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements].e.nos;
+                        filterQuery.queries.splice(queryElements, 1);
+                        --queryElements;
                     }
                 }
             }
-            var takeValue = this.getTakeValue();
-            if (!skipExists) {
-                if (querySkipValue > 0 && this.virtualItemStartIndex <= querySkipValue) {
-                    filterQuery.skip(querySkipValue);
-                }
-                else {
-                    filterQuery.skip(this.virtualItemStartIndex);
-                }
+            if (querySkipValue > 0 && this.virtualItemStartIndex <= querySkipValue) {
+                filterQuery.skip(querySkipValue);
             }
-            if (!takeExists) {
-                if (queryTakeValue > 0 && takeValue <= queryTakeValue) {
-                    filterQuery.take(queryTakeValue);
-                }
-                else {
-                    filterQuery.take(takeValue);
-                }
+            else {
+                filterQuery.skip(this.virtualItemStartIndex);
+            }
+            if (queryTakeValue > 0 && takeValue <= queryTakeValue) {
+                filterQuery.take(queryTakeValue);
+            }
+            else {
+                filterQuery.take(takeValue);
             }
             filterQuery.requiresCount();
         }
+        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;
     };
     AutoComplete.prototype.searchLists = function (e) {
@@ -10942,6 +11043,7 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
                     return;
                 }
                 _this_1.isFiltered = true;
+                _this_1.customFilterQuery = query;
                 _this_1.filterAction(dataSource, query, fields);
             },
             cancel: false
@@ -11072,10 +11174,6 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
                         }, 0);
                     }
                     else {
-                        var isHtmlElement = /<[^>]*>/g.test(e.item.innerText);
-                        if (isHtmlElement) {
-                            e.item.innerText = e.item.innerText.replace(/[\u00A0-\u9999<>&]/g, function (match) { return "&#" + match.charCodeAt(0) + ";"; });
-                        }
                         highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);
                     }
                 }
@@ -11224,6 +11322,7 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
                     revertHighlightSearch(this.liCollections[i]);
                     highlightSearch(this.liCollections[i], this.queryString, this.ignoreCase, this.filterType);
                 }
+                isHighlight = null;
             }
         }
     };
@@ -11715,7 +11814,7 @@ var MultiSelect = /** @__PURE__ @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();
@@ -11785,9 +11884,7 @@ var MultiSelect = /** @__PURE__ @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 () {
@@ -12158,7 +12255,7 @@ var MultiSelect = /** @__PURE__ @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) {
@@ -12219,7 +12316,12 @@ var MultiSelect = /** @__PURE__ @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() !== '')) {
@@ -12241,6 +12343,15 @@ var MultiSelect = /** @__PURE__ @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();
         }
     };
@@ -12248,7 +12359,6 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         var takeValue = this.getTakeValue();
         var isReOrder = true;
         var isSkip = true;
-        var isTake = true;
         for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
             if (this.getModuleName() === 'multiselect' && ((filterQuery.queries[queryElements].e && filterQuery.queries[queryElements].e.condition == 'or') || (filterQuery.queries[queryElements].e && filterQuery.queries[queryElements].e.operator == 'equal'))) {
                 isReOrder = false;
@@ -12257,7 +12367,31 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 isSkip = false;
             }
             if (filterQuery.queries[queryElements].fn === 'onTake') {
-                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)) {
@@ -12268,13 +12402,14 @@ var MultiSelect = /** @__PURE__ @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;
@@ -12597,7 +12732,7 @@ var MultiSelect = /** @__PURE__ @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());
             }
         }
@@ -13849,7 +13984,7 @@ var MultiSelect = /** @__PURE__ @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);
             }
@@ -14503,6 +14638,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                             return;
                         }
                         _this.isFiltered = true;
+                        _this.customFilterQuery = query;
                         _this.remoteFilterAction = true;
                         _this.dataUpdater(dataSource, query, fields);
                     },
@@ -14791,7 +14927,7 @@ var MultiSelect = /** @__PURE__ @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);
@@ -14819,7 +14955,7 @@ var MultiSelect = /** @__PURE__ @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);
@@ -15689,7 +15825,7 @@ var MultiSelect = /** @__PURE__ @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]) {
@@ -15759,8 +15895,12 @@ var MultiSelect = /** @__PURE__ @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];
@@ -16249,6 +16389,7 @@ var MultiSelect = /** @__PURE__ @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) {
@@ -16271,7 +16412,7 @@ var MultiSelect = /** @__PURE__ @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;
@@ -17734,7 +17875,7 @@ var ListBox = /** @__PURE__ @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;
@@ -18005,12 +18146,14 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             else {
                 scrollParent = wrapper;
             }
-            boundRect = scrollParent.getBoundingClientRect();
-            if ((boundRect.y + scrollParent.offsetHeight) - (event.clientY + scrollMoved) < 1) {
-                this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, true); }, 70);
-            }
-            else if ((event.clientY - scrollMoved) - boundRect.y < 1) {
-                this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, false); }, 70);
+            if (scrollParent) {
+                boundRect = scrollParent.getBoundingClientRect();
+                if ((boundRect.y + scrollParent.offsetHeight) - (event.clientY + scrollMoved) < 1) {
+                    this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, true); }, 70);
+                }
+                else if ((event.clientY - scrollMoved) - boundRect.y < 1) {
+                    this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, false); }, 70);
+                }
             }
         }
         if (args.target === null) {
@@ -18433,6 +18576,9 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         if (this.listData.length === 0) {
             this.l10nUpdate();
         }
+        if (this.listData.length !== this.sortedData.length) {
+            this.sortedData = this.listData;
+        }
         this.value = [];
         this.updateToolBarState();
     };
@@ -19155,6 +19301,9 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         var jsonData = [].slice.call(tListBox.jsonData);
         var isRefresh = tListBox.sortOrder !== 'None' || (tListBox.selectionSettings.showCheckbox !==
             fListBox.selectionSettings.showCheckbox) || tListBox.fields.groupBy || tListBox.itemTemplate || fListBox.itemTemplate;
+        var tempLiColl = [];
+        var tempData = [];
+        var flistboxarray = [];
         this.removeSelected(fListBox, fListBox.getSelectedItems());
         var tempItems = [].slice.call(fListBox.listData);
         var localDataArgs = { cancel: false, items: tempItems, eventName: this.toolbarAction };
@@ -19174,23 +19323,43 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                 fListBox.ulElement.removeChild(noRecElem);
             }
         }
-        moveTo(fListBox.ulElement, tListBox.ulElement, 
-        // eslint-disable-next-line prefer-spread
-        Array.apply(null, { length: fListBox.ulElement.childElementCount }).map(Number.call, Number), index);
+        if (fListBox.listData.length > 0) {
+            // eslint-disable-next-line prefer-spread
+            flistboxarray = Array.apply(null, { length: fListBox.ulElement.childElementCount }).map(Number.call, Number);
+        }
+        var _loop_3 = function (i) {
+            if (fListBox.ulElement.childNodes[i].classList.contains('e-disabled')) {
+                flistboxarray = flistboxarray.filter(function (item) { return item !== i; });
+                tempLiColl.push(fListBox.ulElement.childNodes[i]);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                tempData.push(fListBox.listData[i]);
+            }
+        };
+        for (var i = 0; i < fListBox.ulElement.childElementCount; i++) {
+            _loop_3(i);
+        }
+        moveTo(fListBox.ulElement, tListBox.ulElement, flistboxarray, index);
         this.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
         if (isKey) {
             this.list.focus();
         }
         index = (index) ? index : listData.length;
-        for (var i = 0; i < fListBox.listData.length; i++) {
-            listData.splice(index + i, 0, fListBox.listData[i]);
+        for (var i = 0; i < flistboxarray.length; i++) {
+            listData.splice(index + i, 0, fListBox.listData[flistboxarray[i]]);
         }
-        for (var i = 0; i < fListBox.jsonData.length; i++) {
-            jsonData.splice(index + i, 0, fListBox.jsonData[i]);
+        for (var i = 0; i < flistboxarray.length; i++) {
+            jsonData.splice(index + i, 0, fListBox.jsonData[flistboxarray[i]]);
+        }
+        var fliCollections = [];
+        if (tempLiColl.length > 0) {
+            fListBox.liCollections = tempLiColl;
+            fliCollections = [].slice.call(fListBox.liCollections);
+        }
+        else {
+            fliCollections = [].slice.call(fListBox.liCollections);
+            fListBox.liCollections = [];
         }
-        var fliCollections = [].slice.call(fListBox.liCollections);
         var tliCollections = [].slice.call(tListBox.liCollections);
-        fListBox.liCollections = [];
         if (index) {
             var toColl = tliCollections.splice(0, index);
             tListBox.liCollections = toColl.concat(fliCollections).concat(tliCollections);
@@ -19210,7 +19379,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         }
         tListBox.listData = listData;
         if (fListBox.listData.length === fListBox.jsonData.length) {
-            fListBox.listData = fListBox.sortedData = fListBox.jsonData = [];
+            fListBox.listData = fListBox.sortedData = fListBox.jsonData = tempData;
         }
         else if (fListBox.allowFiltering) {
             for (var i = 0; i < fListBox.listData.length; i++) {
@@ -19231,6 +19400,11 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             tListBox.sortedData = listData;
         }
         fListBox.updateSelectedOptions();
+        if (tempLiColl.length > 0) {
+            var wrap = this.list.parentElement.getElementsByClassName('e-listbox-tool')[0];
+            var btn = wrap.querySelector('[data-value="' + this.toolbarAction + '"]');
+            btn.disabled = true;
+        }
         if (fListBox.listData.length === 0) {
             fListBox.l10nUpdate();
         }
@@ -19451,6 +19625,9 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                             if (!args.cancel && !_this.isCustomFiltering && !args.preventDefaultAction) {
                                 _this.inputString = _this.filterInput.value;
                                 _this.filteringAction(_this.jsonData, new Query(), _this.fields);
+                                if (_this.toolbarSettings.items.length > 0) {
+                                    _this.updateToolBarState();
+                                }
                             }
                             if (!_this.isFiltered && !_this.isCustomFiltering && !args.preventDefaultAction) {
                                 _this.dataUpdater(_this.jsonData, new Query(), _this.fields);
@@ -19957,6 +20134,9 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
     __decorate$6([
         Property(null)
     ], ListBox.prototype, "filterBarPlaceholder", void 0);
+    __decorate$6([
+        Property('None')
+    ], ListBox.prototype, "sortOrder", void 0);
     __decorate$6([
         Event()
     ], ListBox.prototype, "beforeItemRender", void 0);
@@ -20423,7 +20603,7 @@ var Mention = /** @__PURE__ @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);
         }