@syncfusion/ej2-dropdowns 27.2.5 → 28.1.33

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

@@ -132,7 +132,7 @@ function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId,
  * @param {string} [type] - Specifies the type.
  * @returns {{ item: Element | null, index: number | null }} Returns the search matched items.
  */
-function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, type) {
+function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, type, ignoreAccent) {
     const listItems = items;
     ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;
     const itemData = { item: null, index: null };
@@ -156,8 +156,12 @@ function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, typ
                     });
                 });
             }
-            const text = dataSource && filterValue ? (ignoreCase ? filterValue.toString().toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
+            let text = dataSource && filterValue ? (ignoreCase ? filterValue.toString().toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
             /* eslint-disable security/detect-non-literal-regexp */
+            if (ignoreAccent && text && queryStr) {
+                text = text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+                queryStr = queryStr.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+            }
             if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, 'g').test(text))) {
                 itemData.item = item;
                 itemData.index = i;
@@ -689,7 +693,8 @@ class VirtualScroll {
             direction: direction, sentinelInfo: info, offsets: e,
             startIndex: this.parent.previousStartIndex, endIndex: this.parent.previousEndIndex
         };
-        const vHeight = this.parent.popupContentElement.getBoundingClientRect().height;
+        const vHeight = this.parent.popupContentElement ?
+            this.parent.popupContentElement.getBoundingClientRect().height : 0;
         //Row Start and End Index calculation
         const rowHeight = this.parent.listItemHeight;
         const exactTopIndex = e.top / rowHeight;
@@ -1775,10 +1780,16 @@ let DropDownBase = class DropDownBase extends Component {
             }
         }
         /* eslint-enable @typescript-eslint/no-unused-vars */
-        const focusItem = this.fields.disabled ? listElement.querySelector('.' + dropDownBaseClasses.li + ':not(.e-disabled') : listElement.querySelector('.' + dropDownBaseClasses.li);
+        let focusItem = this.fields.disabled ? listElement.querySelector('.' + dropDownBaseClasses.li + ':not(.e-disabled') : listElement.querySelector('.' + dropDownBaseClasses.li);
         const selectedItem = listElement.querySelector('.' + dropDownBaseClasses.selected);
         if (focusItem && !selectedItem) {
-            focusItem.classList.add(dropDownBaseClasses.focus);
+            if (this.isVirtualizationEnabled && this.viewPortInfo.startIndex !== 0) {
+                const elements = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                focusItem = elements && elements.length > 0 ? elements[2] : focusItem;
+            }
+            if (focusItem) {
+                focusItem.classList.add(dropDownBaseClasses.focus);
+            }
         }
         if (list.length <= 0) {
             this.l10nUpdate();
@@ -1994,6 +2005,12 @@ let DropDownBase = class DropDownBase extends Component {
                 new DataManager(dataSource).executeLocal(new Query().take(100))
                 : dataSource;
             ulElement = this.templateListItem((this.getModuleName() === 'autocomplete') ? spliceData : dataSource, fields);
+            if (this.isIncrementalRequest) {
+                this.incrementalLiCollections = ulElement.querySelectorAll('.' + dropDownBaseClasses.li);
+                this.incrementalUlElement = ulElement;
+                this.incrementalListData = listData;
+                return ulElement;
+            }
             if (this.isVirtualizationEnabled) {
                 const oldUlElement = this.list.querySelector('.e-list-parent');
                 const virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
@@ -2281,7 +2298,7 @@ let DropDownBase = class DropDownBase extends Component {
                 updateData.dataSource = this.dataSource;
             }
             if (this.getModuleName() === 'listbox') {
-                if (!this.isReact || (this.isReact && !isNullOrUndefined(newProp.dataSource))) {
+                if (!this.isReact || (this.isReact && (!isNullOrUndefined(newProp.dataSource) || !isNullOrUndefined(newProp.sortOrder)))) {
                     this.updateDataSource(updateData, oldProp);
                 }
             }
@@ -2757,6 +2774,7 @@ const dropDownListClasses = {
     backIcon: 'e-input-group-icon e-back-icon e-icons',
     filterBarClearIcon: 'e-input-group-icon e-clear-icon e-icons',
     filterInput: 'e-input-filter',
+    resizeIcon: 'e-resizer-right e-icons',
     filterParent: 'e-filter-parent',
     mobileFilter: 'e-ddl-device-filter',
     footer: 'e-ddl-footer',
@@ -2798,6 +2816,8 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.isTouched = false;
         this.isFocused = false;
         this.autoFill = false;
+        this.isUpdateHeaderHeight = false;
+        this.isUpdateFooterHeight = false;
     }
     /**
      * Initialize the event handler.
@@ -2939,6 +2959,10 @@ let DropDownList = class DropDownList extends DropDownBase {
             (this.allowObjectBinding && this.previousValue &&
                 this.isObjectInArray(this.previousValue, [this.allowCustom ? this.value ? this.value : dataItem :
                         dataItem.value ? this.getDataByValue(dataItem.value) : dataItem]))) {
+            this.checkAndResetCache();
+            if (this.enableVirtualization && this.list) {
+                this.updateInitialData();
+            }
             return;
         }
         this.onChangeEvent(e);
@@ -3253,6 +3277,22 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.updateIconState();
         this.isFocused = true;
     }
+    resizingWireEvent() {
+        // Mouse events
+        EventHandler.add(document, 'mousemove', this.resizePopup, this);
+        EventHandler.add(document, 'mouseup', this.stopResizing, this);
+        // Touch events
+        EventHandler.add(document, 'touchmove', this.resizePopup, this);
+        EventHandler.add(document, 'touchend', this.stopResizing, this);
+    }
+    resizingUnWireEvent() {
+        // Mouse events
+        EventHandler.remove(document, 'mousemove', this.resizePopup);
+        EventHandler.remove(document, 'mouseup', this.stopResizing);
+        // Touch events
+        EventHandler.remove(document, 'touchmove', this.resizePopup);
+        EventHandler.remove(document, 'touchend', this.stopResizing);
+    }
     resetValueHandler(e) {
         const formElement = closest(this.inputElement, 'form');
         if (formElement && e.target === formElement) {
@@ -3347,6 +3387,68 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.incrementalSearch(e);
         }
     }
+    startResizing(event) {
+        this.isResizing = true;
+        this.trigger('resizeStart', event);
+        // Get initial touch or mouse coordinates
+        const clientX = (event instanceof MouseEvent) ? event.clientX : event.touches[0].clientX;
+        const clientY = (event instanceof MouseEvent) ? event.clientY : event.touches[0].clientY;
+        // Store the initial dimensions of the popup
+        if (this.list && this.list.parentElement) {
+            this.originalWidth = this.list.parentElement.offsetWidth;
+            this.originalHeight = this.list.parentElement.offsetHeight;
+            this.originalMouseX = clientX;
+            this.originalMouseY = clientY;
+        }
+        // Wire up events for resizing
+        this.resizingWireEvent();
+        if (event) {
+            event.preventDefault(); // Prevent selection behavior if event exists
+        }
+    }
+    resizePopup(event) {
+        if (!this.isResizing) {
+            return;
+        }
+        this.trigger('resizing', event);
+        // Get the current touch or mouse position
+        const clientX = (event instanceof MouseEvent) ? event.clientX : event.touches[0].clientX;
+        const clientY = (event instanceof MouseEvent) ? event.clientY : event.touches[0].clientY;
+        // Calculate the new width and height based on drag
+        const dx = clientX - this.originalMouseX;
+        const dy = clientY - this.originalMouseY;
+        if (this.list && this.list.parentElement) {
+            // Minimum width and height (100px)
+            let minWidth = parseInt(window.getComputedStyle(this.list.parentElement).minWidth, 10);
+            let minHeight = parseInt(window.getComputedStyle(this.list.parentElement).minHeight, 10);
+            minWidth = minWidth || 100;
+            minHeight = minHeight || 120;
+            // Ensure the new width and height are not less than the minimum
+            this.resizeWidth = Math.max(this.originalWidth + dx, minWidth);
+            this.resizeHeight = Math.max(this.originalHeight + dy, minHeight);
+            this.list.parentElement.style.width = `${this.resizeWidth}px`;
+            this.list.parentElement.style.height = `${this.resizeHeight}px`;
+            this.list.parentElement.style.maxHeight = `${this.resizeHeight}px`;
+            this.list.style.maxHeight = `${this.resizeHeight}px`;
+            if (this.fixedHeaderElement && this.ulElement) {
+                this.fixedHeaderElement.style.width = `${this.ulElement.offsetWidth}px`;
+            }
+        }
+        if (event) {
+            event.preventDefault(); // Prevent selection behavior if event exists
+        }
+    }
+    stopResizing(event) {
+        if (this.isResizing) {
+            this.isResizing = false;
+            this.trigger('resizeStop', event);
+            // Unwire the resize event listeners
+            this.resizingUnWireEvent();
+        }
+        if (event) {
+            event.preventDefault(); // Prevent selection behavior if event exists
+        }
+    }
     onMouseClick(e) {
         const target = e.target;
         this.keyboardEvent = null;
@@ -3818,6 +3920,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
                 return;
             }
+            if (!this.enableVirtualization && this.liCollections[findLi] && this.liCollections[findLi].classList.contains('e-disabled')) {
+                return;
+            }
             this.setSelection(this.liCollections[findLi], e);
         }
     }
@@ -3913,6 +4018,19 @@ let DropDownList = class DropDownList extends DropDownBase {
     }
     pageUpSelection(steps, event, isVirtualKeyAction) {
         let previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];
+        if (!this.enableVirtualization && previousItem && previousItem.classList.contains('e-disabled')) {
+            let validIndex = steps >= 0 ? steps + 1 : 0;
+            while (validIndex < this.liCollections.length) {
+                previousItem = this.liCollections[validIndex];
+                if (previousItem && !previousItem.classList.contains('e-disabled')) {
+                    break;
+                }
+                validIndex--;
+                if (validIndex < 0) {
+                    return;
+                }
+            }
+        }
         if ((this.enableVirtualization && this.activeIndex == null)) {
             previousItem = (this.liCollections.length >= steps && steps >= 0) ?
                 this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[0];
@@ -3945,6 +4063,15 @@ let DropDownList = class DropDownList extends DropDownBase {
     pageDownSelection(steps, event, isVirtualKeyAction) {
         const list = this.getItems();
         let previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];
+        if (!this.enableVirtualization && previousItem && previousItem.classList.contains('e-disabled')) {
+            while (steps >= 0 && steps < this.liCollections.length) {
+                previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];
+                if (previousItem && !previousItem.classList.contains('e-disabled')) {
+                    break;
+                }
+                steps++;
+            }
+        }
         if (this.enableVirtualization && this.skeletonCount > 0) {
             steps = this.getModuleName() === 'dropdownlist' && this.allowFiltering ? steps + 1 : steps;
             previousItem = steps < list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
@@ -4717,7 +4844,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                                 const virualElement = this.createElement('div', {
                                     id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
                                 });
-                                document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
+                                this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virualElement);
                             }
                         }
                     }
@@ -4756,7 +4883,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                         const virualElement = this.createElement('div', {
                             id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
                         });
-                        document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
+                        this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virualElement);
                     }
                 }
             }
@@ -5107,7 +5234,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     }
     updateSelectionList() {
         const selectedItem = this.list && this.list.querySelector('.' + 'e-active');
-        if (!selectedItem && !isNullOrUndefined(this.value)) {
+        if (!selectedItem && !isNullOrUndefined(this.value) && this.getModuleName() !== 'autocomplete') {
             const value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
             const findEle = this.findListElement(this.list, 'li', 'data-value', value);
             if (findEle) {
@@ -5139,10 +5266,12 @@ let DropDownList = class DropDownList extends DropDownBase {
                     formatUnit(Math.round(window.outerHeight).toString() + 'px') : formatUnit(this.popupHeight);
                 if (this.headerTemplate) {
                     this.setHeaderTemplate(popupEle);
+                    this.isUpdateHeaderHeight = this.header.offsetHeight !== 0;
                 }
                 append([this.list], popupEle);
                 if (this.footerTemplate) {
                     this.setFooterTemplate(popupEle);
+                    this.isUpdateFooterHeight = this.footer.offsetHeight !== 0;
                 }
                 document.body.appendChild(popupEle);
                 popupEle.style.top = '0px';
@@ -5306,12 +5435,57 @@ let DropDownList = class DropDownList extends DropDownBase {
                         if (!isNullOrUndefined(this.popupObj)) {
                             this.popupObj.show(new Animation(eventArgs.animation), (this.zIndex === 1000) ? this.element : null);
                         }
+                        if (this.isReact) {
+                            setTimeout(() => {
+                                if (this.popupHeight && this.list && this.popupHeight !== 'auto' && !(this.getModuleName() === 'dropdownlist' && this.allowFiltering)) {
+                                    const popupHeightValue = typeof this.popupHeight === 'string' ? parseInt(this.popupHeight, 10) : this.popupHeight;
+                                    if (!this.isUpdateHeaderHeight && this.headerTemplate && this.header) {
+                                        const listHeight = this.list.style.maxHeight === '' ? popupHeightValue : parseInt(this.list.style.maxHeight, 10);
+                                        this.list.style.maxHeight = (listHeight - this.header.offsetHeight).toString() + 'px';
+                                        this.isUpdateHeaderHeight = true;
+                                    }
+                                    if (!this.isUpdateFooterHeight && this.footerTemplate && this.footer) {
+                                        const listHeight = this.list.style.maxHeight === '' ? popupHeightValue : parseInt(this.list.style.maxHeight, 10);
+                                        this.list.style.maxHeight = (listHeight - this.footer.offsetHeight).toString() + 'px';
+                                        this.isUpdateFooterHeight = true;
+                                    }
+                                }
+                            }, 15);
+                        }
                     }
                     else {
                         this.beforePopupOpen = false;
                         this.destroyPopup();
                     }
                 });
+                if (this.allowResize) {
+                    const resizePaddingBottom = 16;
+                    // Create the resizer div
+                    this.resizer = this.createElement('div', {
+                        id: this.element.id + '_resize-popup',
+                        className: dropDownListClasses.resizeIcon // Adding class for styling
+                    });
+                    // Add the resizer div to the popup
+                    if (this.list && this.list.parentElement) {
+                        this.list.parentElement.classList.add('e-resize');
+                        if (this.popupHeight.toString().toLowerCase() !== 'auto') {
+                            this.list.parentElement.style.height = '100%';
+                        }
+                        this.list.parentElement.style.paddingBottom = (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.searchBoxHeight) ? (this.searchBoxHeight + resizePaddingBottom).toString() + 'px' : resizePaddingBottom.toString() + 'px';
+                        if (this.header || this.footer || this.itemTemplate) {
+                            this.list.parentElement.style.paddingBottom = ((parseInt(this.list.parentElement.style.maxHeight, 10) - parseInt(this.list.style.maxHeight, 10)) + resizePaddingBottom).toString() + 'px';
+                        }
+                        this.list.parentElement.appendChild(this.resizer);
+                        //hold the popup resize
+                        this.list.parentElement.style.width = `${this.resizeWidth}px`;
+                        this.list.parentElement.style.height = `${this.resizeHeight}px`;
+                        this.list.parentElement.style.maxHeight = `${this.resizeHeight}px`;
+                        this.list.style.maxHeight = `${this.resizeHeight}px`;
+                    }
+                    // Attach mouse and touch events to the resizer
+                    EventHandler.add(this.resizer, 'mousedown', this.startResizing, this);
+                    EventHandler.add(this.resizer, 'touchstart', this.startResizing, this);
+                }
             }
             else {
                 this.beforePopupOpen = false;
@@ -5545,7 +5719,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
                 else {
                     this.list.scrollTop = this.virtualListInfo && this.virtualListInfo.startIndex ?
-                        this.virtualListInfo.startIndex * this.listItemHeight : 0;
+                        isInitial && this.virtualListInfo.startIndex ? this.virtualListInfo.startIndex * this.listItemHeight +
+                            (this.listItemHeight * 2) : this.virtualListInfo.startIndex * this.listItemHeight : 0;
                 }
                 isScrollerCHanged = this.isKeyBoardAction;
             }
@@ -5692,15 +5867,6 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.keyboardEvent = null;
         EventHandler.remove(document, 'mousedown', this.onDocumentClick);
         this.isActive = false;
-        if (this.getModuleName() === 'dropdownlist') {
-            Input.destroy({
-                element: this.filterInput,
-                floatLabelType: this.floatLabelType,
-                properties: { placeholder: this.filterBarPlaceholder },
-                buttons: this.clearIconElement
-            }, this.clearIconElement);
-        }
-        this.filterInputObj = null;
         this.isDropDownClick = false;
         this.preventAutoFill = false;
         const scrollableParentElements = this.popupObj.getScrollableParent(this.inputWrapper.container);
@@ -5772,6 +5938,15 @@ let DropDownList = class DropDownList extends DropDownBase {
         const popupInstance = this.popupObj;
         const eventArgs = { popup: popupInstance, cancel: false, animation: animModel, event: e || null };
         this.trigger('close', eventArgs, (eventArgs) => {
+            if (this.getModuleName() === 'dropdownlist') {
+                Input.destroy({
+                    element: this.filterInput,
+                    floatLabelType: this.floatLabelType,
+                    properties: { placeholder: this.filterBarPlaceholder },
+                    buttons: this.clearIconElement
+                }, this.clearIconElement);
+            }
+            this.filterInputObj = null;
             if (!isNullOrUndefined(this.popupObj) &&
                 !isNullOrUndefined(this.popupObj.element.querySelector('.e-fixed-head'))) {
                 const fixedHeader = this.popupObj.element.querySelector('.e-fixed-head');
@@ -5842,6 +6017,12 @@ let DropDownList = class DropDownList extends DropDownBase {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
         }
+        else if (!this.list.querySelector('.e-virtual-ddl')) {
+            const virualElement = this.createElement('div', {
+                id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+            });
+            this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virualElement);
+        }
         if (this.getModuleName() !== 'autocomplete' && this.totalItemCount !== 0 && this.totalItemCount > (this.itemCount * 2)) {
             this.getSkeletonCount();
         }
@@ -5860,6 +6041,10 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.isFilterFocus = false;
         this.inputElement.removeAttribute('aria-controls');
         if (this.popupObj) {
+            if (this.resizer) {
+                EventHandler.remove(this.resizer, 'mousedown', this.startResizing);
+                EventHandler.remove(this.resizer, 'touchstart', this.startResizing);
+            }
             this.popupObj.destroy();
             detach(this.popupObj.element);
         }
@@ -6570,6 +6755,15 @@ let DropDownList = class DropDownList extends DropDownBase {
                 isOpen: true
             });
         }
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const proxy = this;
+        const duration = (this.element.tagName === this.getNgDirective() && this.itemTemplate) ? 500 : 100;
+        if (!this.isSecondClick && this.isReact && !this.isDropDownClick && this.isFiltering() && this.itemTemplate != null) {
+            setTimeout(() => {
+                proxy.cloneElements();
+                proxy.isSecondClick = true;
+            }, duration);
+        }
     }
     invokeRenderPopup(e) {
         if (Browser.isDevice && this.isFilterLayout()) {
@@ -6907,6 +7101,9 @@ __decorate$1([
 __decorate$1([
     Property(false)
 ], DropDownList.prototype, "enableVirtualization", void 0);
+__decorate$1([
+    Property(false)
+], DropDownList.prototype, "allowResize", void 0);
 __decorate$1([
     Property(null)
 ], DropDownList.prototype, "text", void 0);
@@ -6946,6 +7143,15 @@ __decorate$1([
 __decorate$1([
     Event()
 ], DropDownList.prototype, "focus", void 0);
+__decorate$1([
+    Event()
+], DropDownList.prototype, "resizeStop", void 0);
+__decorate$1([
+    Event()
+], DropDownList.prototype, "resizing", void 0);
+__decorate$1([
+    Event()
+], DropDownList.prototype, "resizeStart", void 0);
 DropDownList = __decorate$1([
     NotifyPropertyChanges
 ], DropDownList);
@@ -10715,7 +10921,7 @@ let ComboBox = class ComboBox extends DropDownList {
             const inputValue = this.inputElement.value;
             const dataSource = this.sortedData;
             const type = this.typeOfData(dataSource).typeof;
-            let activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);
+            let activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type, this.ignoreAccent);
             if (this.enableVirtualization && inputValue !== '' && this.getModuleName() !== 'autocomplete' && this.isTyped && !this.allowFiltering) {
                 let updatingincrementalindex = false;
                 const isEndIndexValid = this.viewPortInfo.endIndex >= this.incrementalEndIndex &&
@@ -11671,11 +11877,11 @@ let AutoComplete = class AutoComplete extends ComboBox {
                     });
                     this.list.appendChild(virtualElement).appendChild(this.list.querySelector('.e-list-parent'));
                 }
-                if (!this.list.querySelector('.e-virtual-ddl') && document.getElementsByClassName('e-popup') && document.getElementsByClassName('e-popup')[0]) {
+                if (!this.list.querySelector('.e-virtual-ddl') && this.list.parentElement) {
                     const virtualElement = this.createElement('div', {
                         id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
                     });
-                    document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virtualElement);
+                    this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virtualElement);
                 }
             }
             if ((this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount !== 0)) {
@@ -11710,6 +11916,9 @@ let AutoComplete = class AutoComplete extends ComboBox {
         if (!isNullOrUndefined(item)) {
             removeClass([item], dropDownListClasses.focus);
         }
+        if (!isNullOrUndefined(this.itemData) && !this.enableVirtualization) {
+            this.focusIndexItem();
+        }
         this.postBackAction();
     }
     postBackAction() {
@@ -12202,6 +12411,7 @@ const BOX_ELEMENT = 'e-multiselect-box';
 const FILTERPARENT = 'e-filter-parent';
 const CUSTOM_WIDTH = 'e-search-custom-width';
 const FILTERINPUT = 'e-input-filter';
+const RESIZE_ICON = 'e-resizer-right e-icons';
 /**
  * The Multiselect allows the user to pick a more than one value from list of predefined values.
  * ```html
@@ -12232,6 +12442,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         super(option, element);
         this.clearIconWidth = 0;
         this.previousFilterText = '';
+        this.storedSelectAllHeight = 0;
+        this.isUpdateHeaderHeight = false;
+        this.isUpdateFooterHeight = false;
         this.isValidKey = false;
         this.selectAllEventData = [];
         this.selectAllEventEle = [];
@@ -12379,7 +12592,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         const eventArgs = { popup: this.popupObj, event: e, cancel: false, animation: animModel };
         this.trigger('open', eventArgs, (eventArgs) => {
             if (!eventArgs.cancel) {
-                this.focusAtFirstListItem();
+                this.focusAtFirstListItem(true);
                 if (this.popupObj) {
                     document.body.appendChild(this.popupObj.element);
                 }
@@ -12394,6 +12607,23 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 if (this.popupObj) {
                     this.popupObj.show(eventArgs.animation, (this.zIndex === 1000) ? this.element : null);
                 }
+                if (this.isReact) {
+                    setTimeout(() => {
+                        if (this.popupHeight && this.list && this.popupHeight !== 'auto') {
+                            const popupHeightValue = typeof this.popupHeight === 'string' ? parseInt(this.popupHeight, 10) : this.popupHeight;
+                            if (!this.isUpdateHeaderHeight && this.headerTemplate && this.header) {
+                                const listHeight = this.list.style.maxHeight === '' ? popupHeightValue : parseInt(this.list.style.maxHeight, 10);
+                                this.list.style.maxHeight = (listHeight - this.header.offsetHeight).toString() + 'px';
+                                this.isUpdateHeaderHeight = true;
+                            }
+                            if (!this.isUpdateFooterHeight && this.footerTemplate && this.footer) {
+                                const listHeight = this.list.style.maxHeight === '' ? popupHeightValue : parseInt(this.list.style.maxHeight, 10);
+                                this.list.style.maxHeight = (listHeight - this.footer.offsetHeight).toString() + 'px';
+                                this.isUpdateFooterHeight = true;
+                            }
+                        }
+                    }, 15);
+                }
                 attributes(this.inputElement, {
                     'aria-expanded': 'true', 'aria-owns': this.element.id + '_popup', 'aria-controls': this.element.id
                 });
@@ -12470,16 +12700,16 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 : this.value[this.value.length - 1];
             const valueEle = this.findListElement((this.hideSelectedItem ? this.ulElement : this.list), 'li', 'data-value', value);
             if (!isNullOrUndefined(valueEle)) {
-                this.scrollBottom(valueEle);
+                this.scrollBottom(valueEle, undefined, false, null, true);
             }
         }
         if (this.enableVirtualization) {
             const focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
             this.isKeyBoardAction = false;
-            this.scrollBottom(focusedItem);
+            this.scrollBottom(focusedItem, undefined, false, null, true);
         }
     }
-    focusAtFirstListItem() {
+    focusAtFirstListItem(isOpen) {
         if (this.ulElement && this.ulElement.querySelector('li.'
             + dropDownBaseClasses.li)) {
             let element;
@@ -12492,10 +12722,18 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     if (this.fields.disabled) {
                         element = this.ulElement.querySelector('li.'
                             + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)' + ':not(.' + DISABLED$1 + ')');
+                        if (isOpen && this.viewPortInfo && this.viewPortInfo.startIndex !== 0) {
+                            const elements = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                            element = elements && elements.length > 0 ? elements[2] : element;
+                        }
                     }
                     else {
                         element = this.ulElement.querySelector('li.'
                             + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                        if (isOpen && this.viewPortInfo && this.viewPortInfo.startIndex !== 0) {
+                            const elements = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                            element = elements && elements.length > 0 ? elements[2] : element;
+                        }
                     }
                 }
                 else {
@@ -12792,7 +13030,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     if (this.hideSelectedItem && element.classList.contains(dropDownBaseClasses.focus)) {
                         removeClass([element], dropDownBaseClasses.focus);
                         const listEle = element.parentElement.querySelectorAll('.' +
-                            dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');
+                            dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.' + DISABLED$1 + ')');
                         if (listEle.length > 0) {
                             addClass([listEle[0]], dropDownBaseClasses.focus);
                             this.updateAriaActiveDescendant();
@@ -12961,7 +13199,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                     filterQuery.where('', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
                 }
-                else if ((this.enableVirtualization && this.targetElement() !== '') || !this.enableVirtualization) {
+                else if ((this.enableVirtualization && this.targetElement() !== '' && !this.isClearAllAction) || !this.enableVirtualization) {
                     const fields = this.fields;
                     filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
                 }
@@ -12969,6 +13207,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (this.enableVirtualization && (this.viewPortInfo.endIndex !== 0) && !this.virtualSelectAll) {
                 return this.virtualFilterQuery(filterQuery);
             }
+            if (this.virtualSelectAll) {
+                return query ? query.take(this.maximumSelectionLength).requiresCount() : this.query ?
+                    this.query.take(this.maximumSelectionLength).requiresCount() :
+                    new Query().take(this.maximumSelectionLength).requiresCount();
+            }
             return filterQuery;
         }
         else {
@@ -13154,6 +13397,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.getFilteringSkeletonCount();
         }
         this.refreshPopup();
+        if (this.allowResize) {
+            this.setResize();
+        }
         if (this.mode === 'CheckBox') {
             this.removeFocus();
         }
@@ -13487,6 +13733,15 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             ':not(.' + HIDE_LIST + ')' +
             ':not(.e-reorder-hide)');
         let previousItem = steps >= 0 ? collection[steps + 1] : collection[0];
+        if (this.fields.disabled && previousItem && !this.enableVirtualization) {
+            while (previousItem && (previousItem.classList.contains('e-disabled') || previousItem.classList.contains(HIDE_LIST) ||
+                previousItem.classList.contains('.e-reorder-hide') || previousItem.classList.contains('e-list-group-item'))) {
+                previousItem = previousItem.previousElementSibling;
+            }
+            if (!previousItem) {
+                return;
+            }
+        }
         if (this.enableVirtualization && isVirtualKeyAction) {
             previousItem = (this.liCollections.length >= steps && steps >= 0)
                 ? this.liCollections[steps]
@@ -13518,6 +13773,15 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         const collection = this.list.querySelectorAll('li.'
             + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
         let previousItem = steps <= collection.length ? collection[steps - 1] : collection[collection.length - 1];
+        if (this.fields.disabled && previousItem && !this.enableVirtualization) {
+            while (previousItem && (previousItem.classList.contains('e-disabled') || previousItem.classList.contains(HIDE_LIST) ||
+                previousItem.classList.contains('.e-reorder-hide') || previousItem.classList.contains('e-list-group-item'))) {
+                previousItem = previousItem.nextElementSibling;
+            }
+            if (!previousItem) {
+                return;
+            }
+        }
         if (this.enableVirtualization && this.skeletonCount > 0) {
             previousItem = steps < list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
         }
@@ -13568,6 +13832,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (this.isPopupOpen()) {
                 this.refreshPopup();
             }
+            if (this.allowResize) {
+                this.setResize();
+            }
             setTimeout(() => {
                 this.calculateWidth();
             }, 150);
@@ -13804,6 +14071,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     if (this.mode === 'CheckBox') {
                         this.inputElement.focus();
                     }
+                    this.isKeyBoardAction = false;
                     return;
                 case 13:
                     e.preventDefault();
@@ -13812,10 +14080,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         this.selectByKey(e);
                     }
                     this.checkPlaceholderSize();
+                    this.isKeyBoardAction = false;
                     return;
                 case 32:
                     this.isKeyBoardAction = true;
                     this.spaceKeySelection(e);
+                    this.isKeyBoardAction = false;
                     return;
                 case 9:
                     e.preventDefault();
@@ -13857,6 +14127,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (!(this.mode === 'CheckBox' && this.showSelectAll)) {
             this.refreshPopup();
         }
+        if (this.allowResize) {
+            this.setResize();
+        }
         this.isKeyBoardAction = false;
     }
     arrowDown(e, isVirtualKeyAction) {
@@ -13981,7 +14254,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.makeTextBoxEmpty();
     }
-    scrollBottom(selectedLI, activeIndex, isInitialSelection = false, keyCode = null) {
+    scrollBottom(selectedLI, activeIndex, isInitialSelection = false, keyCode = null, isInitial = false) {
         if ((!isNullOrUndefined(selectedLI) && selectedLI.classList.contains('e-virtual-list')) ||
             (this.enableVirtualization && isNullOrUndefined(selectedLI))) {
             selectedLI = this.liCollections[this.skeletonCount];
@@ -14035,8 +14308,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 }
             }
             else {
-                this.list.scrollTop = this.virtualListInfo &&
-                    this.virtualListInfo.startIndex ? this.virtualListInfo.startIndex * this.listItemHeight : 0;
+                this.list.scrollTop = this.virtualListInfo && this.virtualListInfo.startIndex ?
+                    isInitial && this.virtualListInfo.startIndex ? this.virtualListInfo.startIndex * this.listItemHeight +
+                        (this.listItemHeight * 2) : this.virtualListInfo.startIndex * this.listItemHeight : 0;
             }
             isScrollerCHanged = this.isKeyBoardAction;
         }
@@ -14237,6 +14511,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.getDataByValue(this.getFormattedValue(selectedElem.getAttribute('data-value'))) :
                 selectedElem.getAttribute('data-value');
             this.removeValue(currentChip, e);
+            this.updateDelimeter(this.delimiterChar, e);
             this.makeTextBoxEmpty();
         }
         if (this.closePopupOnSelect) {
@@ -14359,7 +14634,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 return;
             }
             const index = this.getIndexByValue(focusedLi.getAttribute('data-value'));
-            if (index === 0 && this.mode !== 'CheckBox') {
+            if (index === 0) {
                 position = 1;
             }
             if (index === (this.list.querySelectorAll('.e-list-item:not(.e-hide-listitem)').length - 1)) {
@@ -15005,6 +15280,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 if (this.headerTemplate) {
                     this.setHeaderTemplate();
                     overAllHeight -= this.header.offsetHeight;
+                    this.isUpdateHeaderHeight = this.header.offsetHeight !== 0;
                 }
                 append([this.list], this.popupWrapper);
                 if (!this.list.classList.contains(dropDownBaseClasses.noData) && this.getItems()[1]) {
@@ -15042,6 +15318,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 if (this.footerTemplate) {
                     this.setFooterTemplate();
                     overAllHeight -= this.footer.offsetHeight;
+                    this.isUpdateFooterHeight = this.footer.offsetHeight !== 0;
                 }
                 if (this.mode === 'CheckBox' && this.showSelectAll) {
                     this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
@@ -15159,6 +15436,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering && this.isDeviceFullScreen) {
                     this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
                 }
+                if (this.allowResize) {
+                    this.setResize();
+                }
                 this.popupObj.close();
                 this.popupWrapper.style.visibility = '';
             }
@@ -15282,6 +15562,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.enabled && !this.readonly) {
             let temp;
             this.setDynValue = false;
+            this.isClearAllAction = true;
             if (this.value && this.value.length > 0) {
                 if (this.allowFiltering) {
                     this.refreshListItems(null);
@@ -15328,6 +15609,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.previousStartIndex = 0;
                 this.previousEndIndex = 0;
             }
+            this.isClearAllAction = false;
         }
         this.isClearAllItem = true;
         EventHandler.add(document, 'mouseup', this.preventSelection, this);
@@ -15358,6 +15640,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.isPopupOpen()) {
             this.refreshPopup();
         }
+        if (this.allowResize) {
+            this.setResize();
+        }
         if (!this.inputFocus) {
             if (this.changeOnBlur) {
                 this.updateValueState(e, this.value, tempValues);
@@ -16160,6 +16445,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     }
                     this.checkSelectAll();
                     this.refreshPopup();
+                    if (this.allowResize) {
+                        this.setResize();
+                    }
                     if (this.hideSelectedItem) {
                         this.focusAtFirstListItem();
                     }
@@ -16674,6 +16962,22 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
         }
     }
+    resizingWireEvent() {
+        // Mouse events
+        EventHandler.add(document, 'mousemove', this.resizePopup, this);
+        EventHandler.add(document, 'mouseup', this.stopResizing, this);
+        // Touch events
+        EventHandler.add(document, 'touchmove', this.resizePopup, this);
+        EventHandler.add(document, 'touchend', this.stopResizing, this);
+    }
+    resizingUnWireEvent() {
+        // Mouse events
+        EventHandler.remove(document, 'mousemove', this.resizePopup);
+        EventHandler.remove(document, 'mouseup', this.stopResizing);
+        // Touch events
+        EventHandler.remove(document, 'touchmove', this.resizePopup);
+        EventHandler.remove(document, 'touchend', this.stopResizing);
+    }
     selectAllItem(state, event, list) {
         let li;
         if (!isNullOrUndefined(this.list)) {
@@ -17195,6 +17499,20 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.enableRTL(newProp.enableRtl);
                     super.onPropertyChanged(newProp, oldProp);
                     break;
+                case 'allowResize':
+                    this.allowResize = newProp.allowResize;
+                    if (!this.allowResize && this.popupObj) {
+                        const overAllHeight = parseInt(this.popupHeight, 10);
+                        if (this.popupHeight !== 'auto') {
+                            this.list.style.maxHeight = formatUnit(overAllHeight);
+                            this.popupWrapper.style.height = formatUnit(this.popupHeight);
+                            this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);
+                        }
+                        else {
+                            this.list.style.maxHeight = formatUnit(this.popupHeight);
+                        }
+                    }
+                    break;
                 case 'readonly':
                     this.updateReadonly(newProp.readonly);
                     this.hidePopup();
@@ -17437,6 +17755,24 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     if (this.mode === 'CheckBox' && this.showSelectAll) {
                         EventHandler.remove(this.popupObj.element, 'click', this.clickHandler);
                     }
+                    if (this.list && this.list.parentElement && this.allowResize) {
+                        if (this.resizer && this.list.parentElement.contains(this.resizer)) {
+                            this.list.parentElement.removeChild(this.resizer);
+                        }
+                        if (this.list.parentElement.classList.contains('e-resize')) {
+                            this.list.parentElement.classList.remove('e-resize');
+                        }
+                        this.list.parentElement.style.boxSizing = '';
+                        this.list.parentElement.style.paddingBottom = '';
+                        const overAllHeight = parseInt(this.popupHeight, 10);
+                        this.list.style.maxHeight = formatUnit(overAllHeight);
+                        this.list.parentElement.style.height = formatUnit(this.popupHeight);
+                        this.list.parentElement.style.maxHeight = formatUnit(this.popupHeight);
+                    }
+                    if (this.resizer) {
+                        EventHandler.remove(this.resizer, 'mousedown', this.startResizing);
+                        this.resizer.remove();
+                    }
                     if (this.enableVirtualization && this.mode === 'CheckBox' && this.value && this.value.length > 0 &&
                         this.enableSelectionOrder) {
                         this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
@@ -17552,6 +17888,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         }
                     }
                 }
+                if (this.allowResize) {
+                    this.setResize();
+                }
                 this.preventSetCurrentData = true;
             }
         });
@@ -17736,6 +18075,102 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.renderComplete();
     }
+    setResize() {
+        const resizePaddingBottom = 16;
+        if (this.list && this.list.parentElement && isNullOrUndefined(this.list.parentElement.querySelector('.e-resizer-right.e-icons'))) {
+            this.resizer = this.createElement('div', {
+                id: this.element.id + '_resize-popup',
+                className: RESIZE_ICON
+            });
+        }
+        if (this.mode === 'CheckBox' && this.showSelectAll && this.selectAllHeight && this.selectAllHeight !== 0) {
+            this.storedSelectAllHeight = this.selectAllHeight;
+        }
+        if (this.list && this.list.parentElement) {
+            this.list.parentElement.classList.add('e-resize');
+            if (this.popupHeight.toString().toLowerCase() !== 'auto') {
+                this.list.parentElement.style.height = '100%';
+            }
+            this.list.parentElement.style.boxSizing = 'border-box'; // Ensures padding doesn't affect element size
+            const paddingBottom = this.mode === 'CheckBox' && this.searchBoxHeight ? this.searchBoxHeight + resizePaddingBottom + (this.showSelectAll ? this.storedSelectAllHeight : 0) : resizePaddingBottom;
+            this.list.parentElement.style.paddingBottom = `${paddingBottom}px`;
+            this.list.parentElement.appendChild(this.resizer);
+            this.list.parentElement.style.width = this.resizeWidth + 'px';
+            this.list.parentElement.style.height = this.resizeHeight + 'px';
+            this.list.parentElement.style.maxHeight = this.resizeHeight + 'px';
+            this.list.style.maxHeight = `${this.resizeHeight}px`;
+        }
+        if (this.resizer) {
+            EventHandler.add(this.resizer, 'mousedown', this.startResizing, this);
+            EventHandler.add(this.resizer, 'touchstart', this.startResizing, this);
+        }
+    }
+    startResizing(event) {
+        this.isResizing = true;
+        this.trigger('resizeStart', event);
+        // Get initial touch or mouse coordinates
+        const clientX = (event instanceof MouseEvent) ? event.clientX : event.touches[0].clientX;
+        const clientY = (event instanceof MouseEvent) ? event.clientY : event.touches[0].clientY;
+        if (this.list && this.list.parentElement) {
+            this.originalWidth = this.list.parentElement.offsetWidth;
+            this.originalHeight = this.list.parentElement.offsetHeight;
+            this.originalMouseX = clientX;
+            this.originalMouseY = clientY;
+        }
+        this.resizingWireEvent();
+        // Prevent default behavior like text selection
+        if (event) {
+            event.preventDefault();
+        }
+    }
+    resizePopup(event) {
+        if (!this.isResizing) {
+            return;
+        }
+        this.trigger('resizing', event);
+        // Get the current touch or mouse position
+        const clientX = (event instanceof MouseEvent) ? event.clientX : event.touches[0].clientX;
+        const clientY = (event instanceof MouseEvent) ? event.clientY : event.touches[0].clientY;
+        // Calculate the new width and height based on drag
+        const dx = clientX - this.originalMouseX;
+        const dy = clientY - this.originalMouseY;
+        // Set minimum width and height (100px)
+        const minWidth = 100;
+        const minHeight = 130;
+        // Ensure the new width and height are not smaller than the minimum
+        this.resizeWidth = Math.max(this.originalWidth + dx, minWidth);
+        this.resizeHeight = Math.max(this.originalHeight + dy, minHeight);
+        if (this.list && this.list.parentElement) {
+            // Set minimum width and height (100px)
+            let minWidth = parseInt(window.getComputedStyle(this.list.parentElement).minWidth, 10);
+            let minHeight = parseInt(window.getComputedStyle(this.list.parentElement).minHeight, 10);
+            minWidth = minWidth || 100;
+            minHeight = minHeight || 120;
+            // Ensure the new width and height are not smaller than the minimum
+            this.resizeWidth = Math.max(this.originalWidth + dx, minWidth);
+            this.resizeHeight = Math.max(this.originalHeight + dy, minHeight);
+            this.list.parentElement.style.width = `${this.resizeWidth}px`;
+            this.list.parentElement.style.height = `${this.resizeHeight}px`;
+            this.list.parentElement.style.maxHeight = `${this.resizeHeight}px`;
+            this.list.style.maxHeight = `${this.resizeHeight}px`;
+            if (this.fixedHeaderElement && this.ulElement) {
+                this.fixedHeaderElement.style.width = `${this.ulElement.offsetWidth}px`;
+            }
+        }
+        if (event) {
+            event.preventDefault();
+        }
+    }
+    stopResizing(event) {
+        if (this.isResizing) {
+            this.isResizing = false;
+            this.trigger('resizeStop', event);
+            this.resizingUnWireEvent();
+        }
+        if (event) {
+            event.preventDefault();
+        }
+    }
     getListHeight() {
         const listParent = this.createElement('div', {
             className: 'e-dropdownbase'
@@ -18121,6 +18556,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.inputElement = null;
         this.delimiterWrapper = null;
         this.liCollections = null;
+        this.popupContentElement = null;
         this.header = null;
         this.mainList = null;
         this.mainListCollection = null;
@@ -18231,6 +18667,9 @@ __decorate$5([
 __decorate$5([
     Property(false)
 ], MultiSelect.prototype, "readonly", void 0);
+__decorate$5([
+    Property(false)
+], MultiSelect.prototype, "allowResize", void 0);
 __decorate$5([
     Property(null)
 ], MultiSelect.prototype, "text", void 0);
@@ -18312,6 +18751,15 @@ __decorate$5([
 __decorate$5([
     Event()
 ], MultiSelect.prototype, "chipSelection", void 0);
+__decorate$5([
+    Event()
+], MultiSelect.prototype, "resizeStop", void 0);
+__decorate$5([
+    Event()
+], MultiSelect.prototype, "resizing", void 0);
+__decorate$5([
+    Event()
+], MultiSelect.prototype, "resizeStart", void 0);
 __decorate$5([
     Event()
 ], MultiSelect.prototype, "filtering", void 0);
@@ -19029,7 +19477,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             new Sortable(this.ulElement, {
                 scope: this.scope,
                 itemClass: 'e-list-item',
-                dragStart: this.triggerDragStart.bind(this),
+                beforeDragStart: this.triggerDragStart.bind(this),
                 drag: this.triggerDrag.bind(this),
                 beforeDrop: this.beforeDragEnd.bind(this),
                 drop: this.dragEnd.bind(this),
@@ -19277,11 +19725,11 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     }
     triggerDragStart(args) {
         let badge;
-        args = extend(this.getDragArgs(args), { dragSelected: true });
+        const extendedArgs = extend(this.getDragArgs(args), { dragSelected: true }, { cancel: false });
         if (Browser.isIos) {
             this.list.style.overflow = 'hidden';
         }
-        this.trigger('dragStart', args, (dragEventArgs) => {
+        this.trigger('dragStart', extendedArgs, (dragEventArgs) => {
             this.allowDragAll = dragEventArgs.dragSelected;
             if (!this.allowDragAll) {
                 badge = this.ulElement.getElementsByClassName('e-list-badge')[0];
@@ -19289,6 +19737,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                     detach(badge);
                 }
             }
+            if (dragEventArgs.cancel) {
+                args.cancel = true;
+            }
         });
     }
     triggerDrag(args) {
@@ -19517,7 +19968,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             listObj.liCollections = liColl;
             listObj.jsonData = extend([], [], jsonData, false);
             listObj.listData = extend([], [], listData, false);
-            listObj.sortedData = extend([], [], sortedData, false);
+            if (listObj.sortOrder === 'None') {
+                listObj.sortedData = extend([], [], sortedData, false);
+            }
             if (this.listData.length === 0) {
                 this.l10nUpdate();
             }
@@ -21822,6 +22275,9 @@ let Mention = class Mention extends DropDownBase {
                 this.hidePopup();
                 this.lineBreak = true;
             }
+            else if ((e.key === 'Backspace' || e.key === 'Delete') && this.range && this.range.startOffset !== this.range.endOffset) {
+                this.range.deleteContents();
+            }
             return;
         }
         if (lastWordRange.includes(this.mentionChar)) {
@@ -22593,7 +23049,9 @@ let Mention = class Mention extends DropDownBase {
     }
     scrollTop() {
         if (!isNullOrUndefined(this.selectedLI)) {
-            let nextOffset = this.selectedLI.offsetTop - this.list.scrollTop;
+            let nextOffset = !isNullOrUndefined(this.fields.groupBy) && !isNullOrUndefined(this.fixedHeaderElement) ?
+                this.selectedLI.offsetTop - (this.list.scrollTop + this.fixedHeaderElement.offsetHeight) :
+                this.selectedLI.offsetTop - this.list.scrollTop;
             nextOffset = this.fields.groupBy && nextOffset;
             const boxRange = (this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop);
             if (this.activeIndex === 0) {