@syncfusion/ej2-dropdowns 27.2.5 → 28.1.33

package/dist/es6/ej2-dropdowns.es5.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) {
     var listItems = items;
     ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;
     var itemData = { item: null, index: null };
@@ -158,6 +158,10 @@ function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, typ
             }
             var 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;
@@ -746,7 +750,8 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
             direction: direction, sentinelInfo: info, offsets: e,
             startIndex: this.parent.previousStartIndex, endIndex: this.parent.previousEndIndex
         };
-        var vHeight = this.parent.popupContentElement.getBoundingClientRect().height;
+        var vHeight = this.parent.popupContentElement ?
+            this.parent.popupContentElement.getBoundingClientRect().height : 0;
         //Row Start and End Index calculation
         var rowHeight = this.parent.listItemHeight;
         var exactTopIndex = e.top / rowHeight;
@@ -1863,7 +1868,13 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         var focusItem = this.fields.disabled ? listElement.querySelector('.' + dropDownBaseClasses.li + ':not(.e-disabled') : listElement.querySelector('.' + dropDownBaseClasses.li);
         var selectedItem = listElement.querySelector('.' + dropDownBaseClasses.selected);
         if (focusItem && !selectedItem) {
-            focusItem.classList.add(dropDownBaseClasses.focus);
+            if (this.isVirtualizationEnabled && this.viewPortInfo.startIndex !== 0) {
+                var 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();
@@ -2079,6 +2090,12 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 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) {
                 var oldUlElement = this.list.querySelector('.e-list-parent');
                 var virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
@@ -2366,7 +2383,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 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);
                 }
             }
@@ -2859,6 +2876,7 @@ var 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',
@@ -2901,6 +2919,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         _this.isTouched = false;
         _this.isFocused = false;
         _this.autoFill = false;
+        _this.isUpdateHeaderHeight = false;
+        _this.isUpdateFooterHeight = false;
         return _this;
     }
     /**
@@ -3043,6 +3063,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             (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);
@@ -3359,6 +3383,22 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         this.updateIconState();
         this.isFocused = true;
     };
+    DropDownList.prototype.resizingWireEvent = function () {
+        // 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);
+    };
+    DropDownList.prototype.resizingUnWireEvent = function () {
+        // 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);
+    };
     DropDownList.prototype.resetValueHandler = function (e) {
         var formElement = closest(this.inputElement, 'form');
         if (formElement && e.target === formElement) {
@@ -3453,6 +3493,68 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.incrementalSearch(e);
         }
     };
+    DropDownList.prototype.startResizing = function (event) {
+        this.isResizing = true;
+        this.trigger('resizeStart', event);
+        // Get initial touch or mouse coordinates
+        var clientX = (event instanceof MouseEvent) ? event.clientX : event.touches[0].clientX;
+        var 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
+        }
+    };
+    DropDownList.prototype.resizePopup = function (event) {
+        if (!this.isResizing) {
+            return;
+        }
+        this.trigger('resizing', event);
+        // Get the current touch or mouse position
+        var clientX = (event instanceof MouseEvent) ? event.clientX : event.touches[0].clientX;
+        var clientY = (event instanceof MouseEvent) ? event.clientY : event.touches[0].clientY;
+        // Calculate the new width and height based on drag
+        var dx = clientX - this.originalMouseX;
+        var dy = clientY - this.originalMouseY;
+        if (this.list && this.list.parentElement) {
+            // Minimum width and height (100px)
+            var minWidth = parseInt(window.getComputedStyle(this.list.parentElement).minWidth, 10);
+            var 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
+        }
+    };
+    DropDownList.prototype.stopResizing = function (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
+        }
+    };
     DropDownList.prototype.onMouseClick = function (e) {
         var target = e.target;
         this.keyboardEvent = null;
@@ -3924,6 +4026,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 }
                 return;
             }
+            if (!this.enableVirtualization && this.liCollections[findLi] && this.liCollections[findLi].classList.contains('e-disabled')) {
+                return;
+            }
             this.setSelection(this.liCollections[findLi], e);
         }
     };
@@ -4019,6 +4124,19 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     };
     DropDownList.prototype.pageUpSelection = function (steps, event, isVirtualKeyAction) {
         var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];
+        if (!this.enableVirtualization && previousItem && previousItem.classList.contains('e-disabled')) {
+            var 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];
@@ -4051,6 +4169,15 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.pageDownSelection = function (steps, event, isVirtualKeyAction) {
         var list = this.getItems();
         var 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];
@@ -4829,7 +4956,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                                 var 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);
                             }
                         }
                     }
@@ -4868,7 +4995,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         var 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);
                     }
                 }
             }
@@ -5227,7 +5354,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     };
     DropDownList.prototype.updateSelectionList = function () {
         var selectedItem = this.list && this.list.querySelector('.' + 'e-active');
-        if (!selectedItem && !isNullOrUndefined(this.value)) {
+        if (!selectedItem && !isNullOrUndefined(this.value) && this.getModuleName() !== 'autocomplete') {
             var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
             var findEle = this.findListElement(this.list, 'li', 'data-value', value);
             if (findEle) {
@@ -5260,10 +5387,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     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';
@@ -5428,12 +5557,57 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         if (!isNullOrUndefined(_this.popupObj)) {
                             _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.element : null);
                         }
+                        if (_this.isReact) {
+                            setTimeout(function () {
+                                if (_this.popupHeight && _this.list && _this.popupHeight !== 'auto' && !(_this.getModuleName() === 'dropdownlist' && _this.allowFiltering)) {
+                                    var popupHeightValue = typeof _this.popupHeight === 'string' ? parseInt(_this.popupHeight, 10) : _this.popupHeight;
+                                    if (!_this.isUpdateHeaderHeight && _this.headerTemplate && _this.header) {
+                                        var 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) {
+                                        var 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) {
+                    var 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;
@@ -5671,7 +5845,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 }
                 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;
             }
@@ -5820,15 +5995,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         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;
         var scrollableParentElements = this.popupObj.getScrollableParent(this.inputWrapper.container);
@@ -5901,6 +6067,15 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var popupInstance = this.popupObj;
         var eventArgs = { popup: popupInstance, cancel: false, animation: animModel, event: e || null };
         this.trigger('close', eventArgs, function (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'))) {
                 var fixedHeader = _this.popupObj.element.querySelector('.e-fixed-head');
@@ -5971,6 +6146,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             // 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')) {
+            var 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();
         }
@@ -5989,6 +6170,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         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);
         }
@@ -6708,6 +6893,15 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 isOpen: true
             });
         }
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        var proxy = this;
+        var duration = (this.element.tagName === this.getNgDirective() && this.itemTemplate) ? 500 : 100;
+        if (!this.isSecondClick && this.isReact && !this.isDropDownClick && this.isFiltering() && this.itemTemplate != null) {
+            setTimeout(function () {
+                proxy.cloneElements();
+                proxy.isSecondClick = true;
+            }, duration);
+        }
     };
     DropDownList.prototype.invokeRenderPopup = function (e) {
         if (Browser.isDevice && this.isFilterLayout()) {
@@ -7044,6 +7238,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -7083,6 +7280,15 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -10925,7 +11131,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
             var inputValue = this.inputElement.value;
             var dataSource = this.sortedData;
             var type = this.typeOfData(dataSource).typeof;
-            var activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);
+            var 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) {
                 var updatingincrementalindex = false;
                 var isEndIndexValid = this.viewPortInfo.endIndex >= this.incrementalEndIndex &&
@@ -11902,11 +12108,11 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
                     });
                     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) {
                     var 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)) {
@@ -11941,6 +12147,9 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(item)) {
             removeClass([item], dropDownListClasses.focus);
         }
+        if (!isNullOrUndefined(this.itemData) && !this.enableVirtualization) {
+            this.focusIndexItem();
+        }
         this.postBackAction();
     };
     AutoComplete.prototype.postBackAction = function () {
@@ -12449,6 +12658,7 @@ var BOX_ELEMENT = 'e-multiselect-box';
 var FILTERPARENT = 'e-filter-parent';
 var CUSTOM_WIDTH = 'e-search-custom-width';
 var FILTERINPUT = 'e-input-filter';
+var 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
@@ -12480,6 +12690,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         var _this = _super.call(this, option, element) || this;
         _this.clearIconWidth = 0;
         _this.previousFilterText = '';
+        _this.storedSelectAllHeight = 0;
+        _this.isUpdateHeaderHeight = false;
+        _this.isUpdateFooterHeight = false;
         _this.isValidKey = false;
         _this.selectAllEventData = [];
         _this.selectAllEventEle = [];
@@ -12630,7 +12843,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         var eventArgs = { popup: this.popupObj, event: e, cancel: false, animation: animModel };
         this.trigger('open', eventArgs, function (eventArgs) {
             if (!eventArgs.cancel) {
-                _this.focusAtFirstListItem();
+                _this.focusAtFirstListItem(true);
                 if (_this.popupObj) {
                     document.body.appendChild(_this.popupObj.element);
                 }
@@ -12645,6 +12858,23 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 if (_this.popupObj) {
                     _this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);
                 }
+                if (_this.isReact) {
+                    setTimeout(function () {
+                        if (_this.popupHeight && _this.list && _this.popupHeight !== 'auto') {
+                            var popupHeightValue = typeof _this.popupHeight === 'string' ? parseInt(_this.popupHeight, 10) : _this.popupHeight;
+                            if (!_this.isUpdateHeaderHeight && _this.headerTemplate && _this.header) {
+                                var 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) {
+                                var 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
                 });
@@ -12721,16 +12951,16 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 : this.value[this.value.length - 1];
             var 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) {
             var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
             this.isKeyBoardAction = false;
-            this.scrollBottom(focusedItem);
+            this.scrollBottom(focusedItem, undefined, false, null, true);
         }
     };
-    MultiSelect.prototype.focusAtFirstListItem = function () {
+    MultiSelect.prototype.focusAtFirstListItem = function (isOpen) {
         if (this.ulElement && this.ulElement.querySelector('li.'
             + dropDownBaseClasses.li)) {
             var element = void 0;
@@ -12743,10 +12973,18 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     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) {
+                            var 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) {
+                            var elements = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                            element = elements && elements.length > 0 ? elements[2] : element;
+                        }
                     }
                 }
                 else {
@@ -13043,7 +13281,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     if (this.hideSelectedItem && element.classList.contains(dropDownBaseClasses.focus)) {
                         removeClass([element], dropDownBaseClasses.focus);
                         var 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();
@@ -13212,7 +13450,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 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) {
                     var fields = this.fields;
                     filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
                 }
@@ -13220,6 +13458,11 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             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 {
@@ -13405,6 +13648,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             this.getFilteringSkeletonCount();
         }
         this.refreshPopup();
+        if (this.allowResize) {
+            this.setResize();
+        }
         if (this.mode === 'CheckBox') {
             this.removeFocus();
         }
@@ -13738,6 +13984,15 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             ':not(.' + HIDE_LIST + ')' +
             ':not(.e-reorder-hide)');
         var 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]
@@ -13769,6 +14024,15 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         var collection = this.list.querySelectorAll('li.'
             + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
         var 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];
         }
@@ -13820,6 +14084,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             if (this.isPopupOpen()) {
                 this.refreshPopup();
             }
+            if (this.allowResize) {
+                this.setResize();
+            }
             setTimeout(function () {
                 _this.calculateWidth();
             }, 150);
@@ -14056,6 +14323,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     if (this.mode === 'CheckBox') {
                         this.inputElement.focus();
                     }
+                    this.isKeyBoardAction = false;
                     return;
                 case 13:
                     e.preventDefault();
@@ -14064,10 +14332,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         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();
@@ -14109,6 +14379,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         if (!(this.mode === 'CheckBox' && this.showSelectAll)) {
             this.refreshPopup();
         }
+        if (this.allowResize) {
+            this.setResize();
+        }
         this.isKeyBoardAction = false;
     };
     MultiSelect.prototype.arrowDown = function (e, isVirtualKeyAction) {
@@ -14233,9 +14506,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         this.makeTextBoxEmpty();
     };
-    MultiSelect.prototype.scrollBottom = function (selectedLI, activeIndex, isInitialSelection, keyCode) {
+    MultiSelect.prototype.scrollBottom = function (selectedLI, activeIndex, isInitialSelection, keyCode, isInitial) {
         if (isInitialSelection === void 0) { isInitialSelection = false; }
         if (keyCode === void 0) { keyCode = null; }
+        if (isInitial === void 0) { isInitial = false; }
         if ((!isNullOrUndefined(selectedLI) && selectedLI.classList.contains('e-virtual-list')) ||
             (this.enableVirtualization && isNullOrUndefined(selectedLI))) {
             selectedLI = this.liCollections[this.skeletonCount];
@@ -14289,8 +14563,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             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;
         }
@@ -14492,6 +14767,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 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) {
@@ -14614,7 +14890,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 return;
             }
             var 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)) {
@@ -15270,6 +15546,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 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]) {
@@ -15307,6 +15584,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 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' });
@@ -15424,6 +15702,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 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 = '';
             }
@@ -15547,6 +15828,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         if (this.enabled && !this.readonly) {
             var temp = void 0;
             this.setDynValue = false;
+            this.isClearAllAction = true;
             if (this.value && this.value.length > 0) {
                 if (this.allowFiltering) {
                     this.refreshListItems(null);
@@ -15593,6 +15875,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 this.previousStartIndex = 0;
                 this.previousEndIndex = 0;
             }
+            this.isClearAllAction = false;
         }
         this.isClearAllItem = true;
         EventHandler.add(document, 'mouseup', this.preventSelection, this);
@@ -15623,6 +15906,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         if (this.isPopupOpen()) {
             this.refreshPopup();
         }
+        if (this.allowResize) {
+            this.setResize();
+        }
         if (!this.inputFocus) {
             if (this.changeOnBlur) {
                 this.updateValueState(e, this.value, tempValues);
@@ -16437,6 +16723,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     }
                     this.checkSelectAll();
                     this.refreshPopup();
+                    if (this.allowResize) {
+                        this.setResize();
+                    }
                     if (this.hideSelectedItem) {
                         this.focusAtFirstListItem();
                     }
@@ -16951,6 +17240,22 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
         }
     };
+    MultiSelect.prototype.resizingWireEvent = function () {
+        // 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);
+    };
+    MultiSelect.prototype.resizingUnWireEvent = function () {
+        // 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);
+    };
     MultiSelect.prototype.selectAllItem = function (state, event, list) {
         var li;
         if (!isNullOrUndefined(this.list)) {
@@ -17477,6 +17782,20 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     this.enableRTL(newProp.enableRtl);
                     _super.prototype.onPropertyChanged.call(this, newProp, oldProp);
                     break;
+                case 'allowResize':
+                    this.allowResize = newProp.allowResize;
+                    if (!this.allowResize && this.popupObj) {
+                        var 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();
@@ -17721,6 +18040,24 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     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 = '';
+                        var 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;
@@ -17838,6 +18175,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         }
                     }
                 }
+                if (_this.allowResize) {
+                    _this.setResize();
+                }
                 _this.preventSetCurrentData = true;
             }
         });
@@ -18023,6 +18363,102 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         this.renderComplete();
     };
+    MultiSelect.prototype.setResize = function () {
+        var 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
+            var 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);
+        }
+    };
+    MultiSelect.prototype.startResizing = function (event) {
+        this.isResizing = true;
+        this.trigger('resizeStart', event);
+        // Get initial touch or mouse coordinates
+        var clientX = (event instanceof MouseEvent) ? event.clientX : event.touches[0].clientX;
+        var 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();
+        }
+    };
+    MultiSelect.prototype.resizePopup = function (event) {
+        if (!this.isResizing) {
+            return;
+        }
+        this.trigger('resizing', event);
+        // Get the current touch or mouse position
+        var clientX = (event instanceof MouseEvent) ? event.clientX : event.touches[0].clientX;
+        var clientY = (event instanceof MouseEvent) ? event.clientY : event.touches[0].clientY;
+        // Calculate the new width and height based on drag
+        var dx = clientX - this.originalMouseX;
+        var dy = clientY - this.originalMouseY;
+        // Set minimum width and height (100px)
+        var minWidth = 100;
+        var 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)
+            var minWidth_1 = parseInt(window.getComputedStyle(this.list.parentElement).minWidth, 10);
+            var minHeight_1 = parseInt(window.getComputedStyle(this.list.parentElement).minHeight, 10);
+            minWidth_1 = minWidth_1 || 100;
+            minHeight_1 = minHeight_1 || 120;
+            // Ensure the new width and height are not smaller than the minimum
+            this.resizeWidth = Math.max(this.originalWidth + dx, minWidth_1);
+            this.resizeHeight = Math.max(this.originalHeight + dy, minHeight_1);
+            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();
+        }
+    };
+    MultiSelect.prototype.stopResizing = function (event) {
+        if (this.isResizing) {
+            this.isResizing = false;
+            this.trigger('resizeStop', event);
+            this.resizingUnWireEvent();
+        }
+        if (event) {
+            event.preventDefault();
+        }
+    };
     MultiSelect.prototype.getListHeight = function () {
         var listParent = this.createElement('div', {
             className: 'e-dropdownbase'
@@ -18410,6 +18846,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         this.inputElement = null;
         this.delimiterWrapper = null;
         this.liCollections = null;
+        this.popupContentElement = null;
         this.header = null;
         this.mainList = null;
         this.mainListCollection = null;
@@ -18519,6 +18956,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -18600,6 +19040,15 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -19348,7 +19797,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             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),
@@ -19598,11 +20047,11 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
     ListBox.prototype.triggerDragStart = function (args) {
         var _this = this;
         var badge;
-        args = extend(this.getDragArgs(args), { dragSelected: true });
+        var extendedArgs = extend(this.getDragArgs(args), { dragSelected: true }, { cancel: false });
         if (Browser.isIos) {
             this.list.style.overflow = 'hidden';
         }
-        this.trigger('dragStart', args, function (dragEventArgs) {
+        this.trigger('dragStart', extendedArgs, function (dragEventArgs) {
             _this.allowDragAll = dragEventArgs.dragSelected;
             if (!_this.allowDragAll) {
                 badge = _this.ulElement.getElementsByClassName('e-list-badge')[0];
@@ -19610,6 +20059,9 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                     detach(badge);
                 }
             }
+            if (dragEventArgs.cancel) {
+                args.cancel = true;
+            }
         });
     };
     ListBox.prototype.triggerDrag = function (args) {
@@ -19840,7 +20292,9 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             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();
             }
@@ -22196,6 +22650,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                 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)) {
@@ -22973,7 +23430,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
     };
     Mention.prototype.scrollTop = function () {
         if (!isNullOrUndefined(this.selectedLI)) {
-            var nextOffset = this.selectedLI.offsetTop - this.list.scrollTop;
+            var 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;
             var boxRange = (this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop);
             if (this.activeIndex === 0) {