@syncfusion/ej2-dropdowns 27.2.5 → 28.1.35

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

@@ -48,6 +48,7 @@ export 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',
@@ -90,6 +91,8 @@ var DropDownList = /** @class */ (function (_super) {
         _this.isTouched = false;
         _this.isFocused = false;
         _this.autoFill = false;
+        _this.isUpdateHeaderHeight = false;
+        _this.isUpdateFooterHeight = false;
         return _this;
     }
     /**
@@ -232,6 +235,10 @@ var DropDownList = /** @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);
@@ -548,6 +555,22 @@ var DropDownList = /** @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) {
@@ -642,6 +665,68 @@ var DropDownList = /** @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;
@@ -1113,6 +1198,9 @@ var DropDownList = /** @class */ (function (_super) {
                 }
                 return;
             }
+            if (!this.enableVirtualization && this.liCollections[findLi] && this.liCollections[findLi].classList.contains('e-disabled')) {
+                return;
+            }
             this.setSelection(this.liCollections[findLi], e);
         }
     };
@@ -1208,6 +1296,19 @@ var DropDownList = /** @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];
@@ -1240,6 +1341,15 @@ var DropDownList = /** @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];
@@ -1806,6 +1916,9 @@ var DropDownList = /** @class */ (function (_super) {
                     if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {
                         this.getInitialData = true;
                         this.renderList();
+                        if (!this.isSecondClick && !this.isDropDownClick) {
+                            this.executeCloneElements();
+                        }
                     }
                     this.typedString = this.filterInput.value;
                     this.preventAutoFill = false;
@@ -2018,7 +2131,7 @@ var DropDownList = /** @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);
                             }
                         }
                     }
@@ -2057,7 +2170,7 @@ var DropDownList = /** @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);
                     }
                 }
             }
@@ -2065,6 +2178,9 @@ var DropDownList = /** @class */ (function (_super) {
                 this.getFilteringSkeletonCount();
             }
             this.renderReactTemplates();
+            if (this.filterInput && this.filterInput.value === '' && this.getModuleName() === 'combobox') {
+                this.executeCloneElements();
+            }
         }
     };
     DropDownList.prototype.setSearchBox = function (popupElement) {
@@ -2416,7 +2532,7 @@ var DropDownList = /** @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) {
@@ -2449,10 +2565,12 @@ var DropDownList = /** @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';
@@ -2617,12 +2735,57 @@ var DropDownList = /** @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;
@@ -2861,7 +3024,8 @@ var DropDownList = /** @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;
                 isScrollTopChanged = true;
@@ -3011,15 +3175,6 @@ var DropDownList = /** @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);
@@ -3092,6 +3247,15 @@ var DropDownList = /** @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');
@@ -3162,6 +3326,12 @@ var DropDownList = /** @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();
         }
@@ -3180,6 +3350,10 @@ var DropDownList = /** @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);
         }
@@ -3899,6 +4073,20 @@ var DropDownList = /** @class */ (function (_super) {
                 isOpen: true
             });
         }
+        if (!this.isSecondClick && !this.isDropDownClick) {
+            this.executeCloneElements();
+        }
+    };
+    DropDownList.prototype.executeCloneElements = function () {
+        // 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.isReact && this.isFiltering() && this.itemTemplate != null) {
+            setTimeout(function () {
+                proxy.cloneElements();
+                proxy.isSecondClick = true;
+            }, duration);
+        }
     };
     DropDownList.prototype.invokeRenderPopup = function (e) {
         if (Browser.isDevice && this.isFilterLayout()) {
@@ -4235,6 +4423,9 @@ var DropDownList = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], DropDownList.prototype, "enableVirtualization", void 0);
+    __decorate([
+        Property(false)
+    ], DropDownList.prototype, "allowResize", void 0);
     __decorate([
         Property(null)
     ], DropDownList.prototype, "text", void 0);
@@ -4274,6 +4465,15 @@ var DropDownList = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], DropDownList.prototype, "focus", void 0);
+    __decorate([
+        Event()
+    ], DropDownList.prototype, "resizeStop", void 0);
+    __decorate([
+        Event()
+    ], DropDownList.prototype, "resizing", void 0);
+    __decorate([
+        Event()
+    ], DropDownList.prototype, "resizeStart", void 0);
     DropDownList = __decorate([
         NotifyPropertyChanges
     ], DropDownList);

package/src/drop-down-tree/drop-down-tree.d.ts

@@ -332,6 +332,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private nestedTableUpdate;
     private clearIconWidth;
     private isClicked;
+    private documentClickContext;
     private isCheckAllCalled;
     private isFromFilterChange;
     private valueTemplateContainer;

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

@@ -171,6 +171,7 @@ var DropDownTree = /** @class */ (function (_super) {
         _this.selectedData = [];
         _this.filterDelayTime = 300;
         _this.isClicked = false;
+        _this.documentClickContext = _this.onDocumentClick.bind(_this);
         // Specifies if the checkAll method has been called
         _this.isCheckAllCalled = false;
         _this.isFromFilterChange = false;
@@ -690,7 +691,7 @@ var DropDownTree = /** @class */ (function (_super) {
         if (this.showSelectAll && this.checkAllParent) {
             EventHandler.remove(this.checkAllParent, 'mouseup', this.clickHandler);
         }
-        EventHandler.remove(document, 'mousedown', this.onDocumentClick);
+        document.removeEventListener('mousedown', this.documentClickContext);
     };
     /* Trigger when the dropdown is clicked */
     DropDownTree.prototype.dropDownClick = function (e) {
@@ -1735,7 +1736,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 if (_this.treeObj.checkedNodes.length > 0 && !_this.isFilterRestore) {
                     var nodes = _this.treeObj.element.querySelectorAll('li');
                     var checkedNodes = _this.treeObj.element.querySelectorAll('li[aria-checked=true]');
-                    if ((checkedNodes.length === nodes.length || _this.checkSelectAll) && _this.checkBoxElement) {
+                    if ((checkedNodes.length === nodes.length) && _this.checkBoxElement) {
                         var wrap = closest(_this.checkBoxElement, '.' + CHECKBOXWRAP);
                         _this.changeState(wrap, 'check');
                         _this.checkSelectAll = false;
@@ -1798,7 +1799,7 @@ var DropDownTree = /** @class */ (function (_super) {
                     _this.isPopupOpen = false;
                 },
                 open: function () {
-                    EventHandler.add(document, 'mousedown', _this.onDocumentClick, _this);
+                    document.addEventListener('mousedown', _this.documentClickContext);
                     _this.isPopupOpen = true;
                 },
                 targetExitViewport: function () {

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

@@ -698,6 +698,10 @@ export interface DragEventArgs {
      * Specifies the event.
      */
     event: Event;
+    /**
+     * Illustrates whether the current action needs to be prevented or not.
+     */
+    cancel?: boolean;
 }
 /**
  * Interface for change event args.

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

@@ -205,7 +205,7 @@ var ListBox = /** @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),
@@ -455,11 +455,11 @@ var ListBox = /** @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];
@@ -467,6 +467,9 @@ var ListBox = /** @class */ (function (_super) {
                     detach(badge);
                 }
             }
+            if (dragEventArgs.cancel) {
+                args.cancel = true;
+            }
         });
     };
     ListBox.prototype.triggerDrag = function (args) {
@@ -697,7 +700,9 @@ var ListBox = /** @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();
             }

package/src/mention/mention.js

@@ -385,6 +385,9 @@ var Mention = /** @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)) {
@@ -1162,7 +1165,9 @@ var Mention = /** @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) {

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

@@ -344,6 +344,15 @@ export interface MultiSelectModel extends DropDownBaseModel{
      */
     readonly?: boolean;
 
+    /**
+     * Gets or sets a value that indicates whether the Multiselect popup can be resized.
+     * When set to `true`, a resize handle appears in the bottom-right corner of the popup,
+     * allowing the user to resize the width and height of the popup.
+     *
+     * @default false
+     */
+    allowResize?: boolean;
+
     /**
      * Selects the list item which maps the data `text` field in the component.
      *
@@ -559,6 +568,28 @@ export interface MultiSelectModel extends DropDownBaseModel{
      */
     chipSelection?: EmitType<Object>;
 
+    /**
+     * Triggers when the user finishes resizing the Multiselect popup.
+     *
+     * @event resizeStop
+     */
+    resizeStop?: EmitType<Object>;
+
+    /**
+     * Triggers continuously while the Multiselect popup is being resized by the user.
+     * This event provides live updates on the width and height of the popup.
+     *
+     * @event resizing
+     */
+    resizing?: EmitType<Object>;
+
+    /**
+     * Triggers when the user starts resizing the Multiselect popup.
+     *
+     * @event resizeStart
+     */
+    resizeStart?: EmitType<Object>;
+
     /**
      * Triggers event,when user types a text in search box.
      * > For more details about filtering, refer to [`Filtering`](../../multi-select/filtering) documentation.

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

@@ -56,8 +56,20 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private isClearAllItem;
     private previousFocusItem;
     private isRemoveSelection;
+    private resizer;
+    private storedSelectAllHeight;
+    private isResizing;
+    private originalHeight;
+    private originalWidth;
+    private originalMouseX;
+    private originalMouseY;
+    private resizeHeight;
+    private resizeWidth;
     private currentRemoveValue;
     private selectedListData;
+    private isClearAllAction;
+    private isUpdateHeaderHeight;
+    private isUpdateFooterHeight;
     /**
      * The `fields` property maps the columns of the data table and binds the data to the component.
      * * text - Maps the text column from data table for each list item.
@@ -365,6 +377,14 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * @default false
      */
     readonly: boolean;
+    /**
+     * Gets or sets a value that indicates whether the Multiselect popup can be resized.
+     * When set to `true`, a resize handle appears in the bottom-right corner of the popup,
+     * allowing the user to resize the width and height of the popup.
+     *
+     * @default false
+     */
+    allowResize: boolean;
     /**
      * Selects the list item which maps the data `text` field in the component.
      *
@@ -553,6 +573,25 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * @event chipSelection
      */
     chipSelection: EmitType<Object>;
+    /**
+     * Triggers when the user finishes resizing the Multiselect popup.
+     *
+     * @event resizeStop
+     */
+    resizeStop: EmitType<Object>;
+    /**
+     * Triggers continuously while the Multiselect popup is being resized by the user.
+     * This event provides live updates on the width and height of the popup.
+     *
+     * @event resizing
+     */
+    resizing: EmitType<Object>;
+    /**
+     * Triggers when the user starts resizing the Multiselect popup.
+     *
+     * @event resizeStart
+     */
+    resizeStart: EmitType<Object>;
     /**
      * Triggers event,when user types a text in search box.
      * > For more details about filtering, refer to [`Filtering`](../../multi-select/filtering) documentation.
@@ -831,6 +870,8 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private updateRemainingText;
     private getOverflowVal;
     private unWireEvent;
+    protected resizingWireEvent(): void;
+    protected resizingUnWireEvent(): void;
     private selectAllItem;
     protected virtualSelectionAll(state: boolean, li: NodeListOf<HTMLElement> | HTMLElement[], event: MouseEvent | KeyboardEventArgs): void;
     private updateValue;
@@ -918,6 +959,10 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * @returns {void}
      */
     render(): void;
+    protected setResize(): void;
+    protected startResizing(event: MouseEvent | TouchEvent): void;
+    protected resizePopup(event?: MouseEvent | TouchEvent): void;
+    protected stopResizing(event: MouseEvent | TouchEvent): void;
     private getListHeight;
     /**
      * Removes disabled values from the given array.