@syncfusion/ej2-dropdowns 25.1.35 → 25.1.39

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

@@ -185,6 +185,10 @@ function resetIncrementalSearchValues(elementId) {
  * @returns {void}
  */
 function highlightSearch(element, query, ignoreCase, type) {
+    const isHtmlElement = /<[^>]*>/g.test(element.innerText);
+    if (isHtmlElement) {
+        element.innerText = element.innerText.replace(/[\u00A0-\u9999<>&]/g, (match) => `&#${match.charCodeAt(0)};`);
+    }
     if (query === '') {
         return;
     }
@@ -423,10 +427,8 @@ class VirtualScroll {
                     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;
             }
@@ -587,7 +589,9 @@ class VirtualScroll {
             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;
+            }
         });
     }
     scrollListener(scrollArgs) {
@@ -824,6 +828,9 @@ let DropDownBase = class DropDownBase extends Component {
         this.incrementalPreQueryString = '';
         this.isObjectCustomValue = false;
         this.appendUncheckList = false;
+        this.getInitialData = false;
+        this.preventPopupOpen = true;
+        this.customFilterQuery = new Query();
         this.virtualListInfo = {
             currentPageNumber: null,
             direction: null,
@@ -1135,6 +1142,7 @@ let DropDownBase = class DropDownBase extends Component {
         const 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;
     }
     GetVirtualTrackHeight() {
@@ -1228,6 +1236,7 @@ let DropDownBase = class DropDownBase extends Component {
      */
     initialize(e) {
         this.bindEvent = true;
+        this.preventPopupOpen = true;
         this.actionFailureTemplateId = `${this.element.id}${ACTIONFAILURETEMPLATE_PROPERTY}`;
         if (this.element.tagName === 'UL') {
             const jsonElement = ListBase.createJsonFromElement(this.element);
@@ -1411,6 +1420,12 @@ let DropDownBase = class DropDownBase extends Component {
                                     }
                                     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((e) => {
@@ -1482,6 +1497,11 @@ let DropDownBase = class DropDownBase extends Component {
                                     this.renderGroupTemplate(ulElement);
                                 }
                                 this.bindChildItems(localDataArgs.result, ulElement, fields);
+                                if (this.getInitialData) {
+                                    this.getInitialData = false;
+                                    this.preventPopupOpen = false;
+                                    return;
+                                }
                                 setTimeout(() => {
                                     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();
@@ -1582,7 +1602,7 @@ let DropDownBase = class DropDownBase extends Component {
     onActionComplete(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",
             });
@@ -1804,6 +1824,9 @@ let DropDownBase = class DropDownBase extends Component {
         this.fixedHeaderElement.style.display = 'block';
     }
     getValidLi() {
+        if (this.isVirtualizationEnabled) {
+            return this.liCollections[0].classList.contains('e-virtual-list') ? this.liCollections[this.skeletonCount] : this.liCollections[0];
+        }
         return this.liCollections[0];
     }
     /**
@@ -1878,7 +1901,7 @@ let DropDownBase = class DropDownBase extends Component {
                     }
                     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);
@@ -2222,6 +2245,7 @@ let DropDownBase = class DropDownBase extends Component {
             }
         }
         const itemsCount = this.getItems().length;
+        const isListboxEmpty = itemsCount === 0;
         const selectedItemValue = this.list.querySelector('.' + dropDownBaseClasses.selected);
         items = (items instanceof Array ? items : [items]);
         let index;
@@ -2256,11 +2280,24 @@ let DropDownBase = class DropDownBase extends Component {
             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 });
         }
@@ -4123,6 +4160,10 @@ let DropDownList = class DropDownList extends DropDownBase {
                     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);
@@ -4171,13 +4212,13 @@ let DropDownList = class DropDownList extends DropDownBase {
             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 !== '')) {
                 const 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();
@@ -4192,26 +4233,36 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
             let queryTakeValue = 0;
             let querySkipValue = 0;
-            if (this.query && this.query.queries.length > 0) {
-                for (let queryElements = 0; queryElements < this.query.queries.length; queryElements++) {
-                    if (this.query.queries[queryElements].fn === 'onSkip') {
-                        querySkipValue = this.query.queries[queryElements].e.nos;
+            if (filterQuery && filterQuery.queries.length > 0) {
+                for (let 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 (let 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;
                     }
                 }
             }
             let skipExists = false;
-            let takeExists = false;
             if (filterQuery && filterQuery.queries.length > 0) {
                 for (let 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;
                     }
                 }
             }
@@ -4227,17 +4278,23 @@ let DropDownList = class DropDownList extends DropDownBase {
                 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 (let 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;
     }
     getSelectionPoints() {
@@ -4263,6 +4320,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                         return;
                     }
                     this.isCustomFilter = true;
+                    this.customFilterQuery = query;
                     this.filteringAction(dataSource, query, fields);
                 },
                 baseEventArgs: e,
@@ -4290,7 +4348,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     }
     filteringAction(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;
             let isNoData = this.list.classList.contains(dropDownBaseClasses.noData);
             if (this.filterInput.value.trim() === '' && !this.itemTemplate) {
@@ -4298,6 +4356,12 @@ let DropDownList = class DropDownList extends DropDownBase {
                 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);
@@ -4466,6 +4530,13 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.isNotSearchList = false;
             return;
         }
+        if (this.getInitialData) {
+            this.updateActionCompleteDataValues(ulElement, list);
+        }
+        if (!this.preventPopupOpen && this.getModuleName() === 'combobox') {
+            this.beforePopupOpen = true;
+            this.preventPopupOpen = true;
+        }
         let tempItemCount = this.itemCount;
         if (this.isActive || !isNullOrUndefined(ulElement)) {
             const selectedItem = this.selectedLI ? this.selectedLI.cloneNode(true) : null;
@@ -4643,7 +4714,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         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);
         }
     }
@@ -4698,7 +4769,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 popupEle.setAttribute('aria-label', this.element.id);
                 popupEle.setAttribute('role', 'dialog');
                 const 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);
                 }
@@ -4713,6 +4784,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                     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',
@@ -5017,7 +5090,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             const 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')))) {
             const firstItem = this.isEmptyList() ? this.list : this.liCollections[0];
             width = (parseInt(width, 10) + (parseInt(getComputedStyle(firstItem).textIndent, 10) -
@@ -5315,7 +5388,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             // 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();
         }
@@ -5436,7 +5509,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         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') {
@@ -6077,6 +6150,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
         }
         this.isVirtualTrackHeight = false;
+        this.customFilterQuery = null;
         this.closePopup(0, e);
         const dataItem = this.getItemData();
         let isSelectVal = !isNullOrUndefined(this.selectedLI);
@@ -6114,7 +6188,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         addClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);
         this.onFocus(e);
-        if (this.floatLabelType === 'Auto') {
+        if (this.floatLabelType !== 'Never') {
             Input.calculateWidth(this.inputElement, this.inputWrapper.container);
         }
     }
@@ -6136,7 +6210,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             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);
         }
     }
@@ -6187,17 +6261,18 @@ let DropDownList = class DropDownList extends DropDownBase {
             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;
@@ -6214,9 +6289,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             floatLabelType: this.floatLabelType,
             properties: this.properties
         }, this.clearButton);
-        if (this.isAngular) {
-            this.inputElement = null;
-        }
+        this.clearButton = null;
+        this.inputElement = null;
         super.destroy();
     }
     /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
@@ -6714,7 +6788,7 @@ let DropDownTree = class DropDownTree extends Component {
             cancel: false,
             preventDefaultAction: false,
             event: event,
-            text: value,
+            text: value.trim(),
             fields: filterFields
         };
         this.trigger('filtering', args, (args) => {
@@ -6722,7 +6796,7 @@ let DropDownTree = class DropDownTree extends Component {
                 let flag = false;
                 let fields;
                 this.isFilteredData = true;
-                if (value === '') {
+                if (args.text === '') {
                     this.isFilteredData = false;
                     this.isFilterRestore = true;
                     this.isFromFilterChange = false;
@@ -6733,18 +6807,18 @@ let DropDownTree = class DropDownTree extends Component {
                 }
                 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);
                         }
                     }
                 }
@@ -7412,12 +7486,12 @@ let DropDownTree = class DropDownTree extends Component {
     createHiddenElement() {
         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);
@@ -7561,9 +7635,11 @@ let DropDownTree = class DropDownTree extends Component {
     }
     setAttributes() {
         this.inputEle.setAttribute('tabindex', '-1');
+        this.inputEle.setAttribute('aria-label', this.getModuleName());
         const 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());
     }
     setHTMLAttributes() {
@@ -7905,7 +7981,12 @@ let DropDownTree = class DropDownTree extends Component {
                         focusedElement.setAttribute('tabindex', '0');
                     }
                     else {
-                        focusedElement = this.treeObj.element.querySelector('li');
+                        let 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']);
@@ -8752,7 +8833,12 @@ let DropDownTree = class DropDownTree extends Component {
     }
     setFooterTemplate() {
         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');
@@ -10079,7 +10165,7 @@ let ComboBox = class ComboBox extends DropDownList {
             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) {
@@ -10332,9 +10418,6 @@ let ComboBox = class ComboBox extends DropDownList {
     render() {
         super.render();
         this.setSearchBox();
-        if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {
-            super.renderList();
-        }
         this.renderComplete();
     }
     /**
@@ -10627,12 +10710,17 @@ let AutoComplete = class AutoComplete extends ComboBox {
         return 'EJS-AUTOCOMPLETE';
     }
     getQuery(query) {
-        const filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
+        let filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
         let value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
         const filterType = (this.queryString === '' && !isNullOrUndefined(value)) ? 'equal' : this.filterType;
         const 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 !== '') {
             const dataType = this.typeOfData(this.dataSource).typeof;
@@ -10658,48 +10746,61 @@ let AutoComplete = class AutoComplete extends ComboBox {
         if (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
             let queryTakeValue = 0;
             let querySkipValue = 0;
-            if (this.query && this.query.queries.length > 0) {
-                for (let 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 (let 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 (let 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;
                     }
                 }
             }
-            let skipExists = false;
-            let takeExists = false;
             if (filterQuery && filterQuery.queries.length > 0) {
                 for (let 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 (let 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;
     }
     searchLists(e) {
@@ -10727,6 +10828,7 @@ let AutoComplete = class AutoComplete extends ComboBox {
                     return;
                 }
                 this.isFiltered = true;
+                this.customFilterQuery = query;
                 this.filterAction(dataSource, query, fields);
             },
             cancel: false
@@ -10856,10 +10958,6 @@ let AutoComplete = class AutoComplete extends ComboBox {
                         }, 0);
                     }
                     else {
-                        const isHtmlElement = /<[^>]*>/g.test(e.item.innerText);
-                        if (isHtmlElement) {
-                            e.item.innerText = e.item.innerText.replace(/[\u00A0-\u9999<>&]/g, (match) => `&#${match.charCodeAt(0)};`);
-                        }
                         highlightSearch(e.item, this.queryString, this.ignoreCase, this.filterType);
                     }
                 }
@@ -11002,11 +11100,12 @@ let AutoComplete = class AutoComplete extends ComboBox {
     renderHightSearch() {
         if (this.highlight) {
             for (let i = 0; i < this.liCollections.length; i++) {
-                const isHighlight = this.ulElement.querySelector('.e-active');
+                let isHighlight = this.ulElement.querySelector('.e-active');
                 if (!isHighlight) {
                     revertHighlightSearch(this.liCollections[i]);
                     highlightSearch(this.liCollections[i], this.queryString, this.ignoreCase, this.filterType);
                 }
+                isHighlight = null;
             }
         }
     }
@@ -11480,7 +11579,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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();
@@ -11550,9 +11649,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         if (this.enableVirtualization) {
             const focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
-            if (focusedItem) {
-                this.scrollBottom(focusedItem);
-            }
+            this.scrollBottom(focusedItem);
         }
     }
     focusAtFirstListItem() {
@@ -11923,7 +12020,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             && (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) {
@@ -11982,9 +12079,14 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.dataUpdater(dataSource, query, fields);
     }
     getQuery(query) {
-        const filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
+        let 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() !== '')) {
@@ -12006,6 +12108,15 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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 (let 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();
         }
     }
@@ -12013,7 +12124,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         var takeValue = this.getTakeValue();
         var isReOrder = true;
         var isSkip = true;
-        var isTake = true;
         for (let 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;
@@ -12022,7 +12132,31 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 isSkip = false;
             }
             if (filterQuery.queries[queryElements].fn === 'onTake') {
-                isTake = false;
+                
+            }
+        }
+        let queryTakeValue = 0;
+        if (filterQuery && filterQuery.queries.length > 0) {
+            for (let 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 (let 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 (let 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)) {
@@ -12033,13 +12167,14 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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;
@@ -12362,7 +12497,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     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());
             }
         }
@@ -13603,7 +13738,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 let currentText = [];
                 const value = 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);
-                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);
             }
@@ -13972,6 +14107,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         }
                     }
                 });
+                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' });
@@ -13981,6 +14117,15 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         }
     }
+    checkCollision(popupEle) {
+        if (!(this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering)) {
+            const collision = isCollide(popupEle);
+            if (collision.length > 0) {
+                popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';
+            }
+            this.popupObj.resolveCollision();
+        }
+    }
     setHeaderTemplate() {
         let compiledString;
         if (this.header) {
@@ -14242,6 +14387,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             return;
                         }
                         this.isFiltered = true;
+                        this.customFilterQuery = query;
                         this.remoteFilterAction = true;
                         this.dataUpdater(dataSource, query, fields);
                     },
@@ -14530,7 +14676,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         (element && (element.getAttribute('aria-selected') === 'true' && this.hideSelectedItem) &&
                             (this.mode === 'Box' || this.mode === 'Default'))) || (this.enableVirtualization && value != null && text != null && !isCustomData)) {
                         let 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);
@@ -14558,7 +14704,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             this.wireListEvents();
                         }
                         let 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);
@@ -15425,7 +15571,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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]) {
@@ -15495,8 +15641,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         }
                         this.value = [];
                         this.virtualSelectAll = false;
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        let 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
                     const virtualTrackElement = this.list.getElementsByClassName('e-virtual-ddl')[0];
@@ -15980,6 +16130,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 duration: 100,
                 delay: delay ? delay : 0
             };
+            this.customFilterQuery = null;
             const eventArgs = { popup: this.popupObj, cancel: false, animation: animModel, event: e || null };
             this.trigger('close', eventArgs, (eventArgs) => {
                 if (!eventArgs.cancel) {
@@ -16002,7 +16153,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     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;
@@ -17018,13 +17169,20 @@ class CheckBoxSelection {
         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();
     }
+    preventListSelection(e) {
+        e.stopPropagation();
+        this.parent.popupWrapper.removeEventListener('mouseup', this.boundPreventListSelection, true);
+        this.boundPreventListSelection = null;
+    }
     setDeviceSearchBox() {
         this.parent.popupObj.element.classList.add(device);
         this.parent.popupObj.element.classList.add(mobileFilter);
@@ -17423,7 +17581,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
     }
     updateActionCompleteData(li, item, index) {
-        this.jsonData.splice(index, 0, item);
+        this.jsonData.splice(index === null ? this.jsonData.length : index, 0, item);
     }
     initToolbar() {
         const pos = this.toolbarSettings.position;
@@ -19612,6 +19770,9 @@ __decorate$6([
 __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);
@@ -20061,7 +20222,7 @@ let Mention = class Mention extends DropDownBase {
             }
         }
         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);
         }