@syncfusion/ej2-dropdowns 29.1.41 → 29.2.4-850322

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

@@ -74,6 +74,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private isBlurDispatching;
     private isFilterPrevented;
     private isFilteringAction;
+    private headerTemplateHeight;
     /**
      * 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.
@@ -341,6 +342,12 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * @default null
      */
     allowFiltering: boolean;
+    /**
+     * Specifies the delay time in milliseconds for filtering operations.
+     *
+     * @default 300
+     */
+    debounceDelay: number;
     /**
      * Defines whether the popup opens in fullscreen mode on mobile devices when filtering is enabled. When set to false, the popup will display similarly on both mobile and desktop devices.
      *
@@ -663,6 +670,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private preventSetCurrentData;
     private virtualCustomData;
     private isSelectAllLoop;
+    private initialPopupHeight;
     private enableRTL;
     requiredModules(): ModuleDeclaration[];
     private updateHTMLAttribute;
@@ -775,6 +783,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private invokeCheckboxSelection;
     private removeValue;
     private updateMainList;
+    private isFilteringWithRemoteData;
     private removeChip;
     private setWidth;
     private updateChipStatus;
@@ -807,6 +816,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     protected wireEvent(): void;
     private onInput;
     private pasteHandler;
+    protected performFiltering(e: KeyboardEventArgs | MouseEvent): void;
     protected search(e: KeyboardEventArgs): void;
     protected preRender(): void;
     protected getLocaleName(): string;
@@ -989,7 +999,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      *
      * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.
      * @returns {void}
-
+     * @deprecated
      */
     disableItem(item: string | number | object | HTMLLIElement): void;
     /**

package/src/multi-select/multi-select.js

@@ -1,22 +1,22 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 import { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';
@@ -615,7 +615,7 @@ var MultiSelect = /** @class */ (function (_super) {
             valuecheck = this.presentItemValue(this.ulElement);
         }
         if (valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
-            && this.listData != null) {
+            && this.listData != null && !(valuecheck.length === 1 && valuecheck[0] == null)) {
             this.isaddNonPresentItems = true;
             this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
             this.isaddNonPresentItems = false;
@@ -1493,7 +1493,7 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.pageDownSelection = function (steps, isVirtualKeyAction) {
         var list = this.getItems();
         var collection = this.list.querySelectorAll('li.'
-            + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
+            + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list-end)');
         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) ||
@@ -1510,6 +1510,9 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.enableVirtualization && isVirtualKeyAction) {
             previousItem = steps <= list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
         }
+        if (this.enableVirtualization && previousItem && previousItem.classList.contains('e-virtual-list-end')) {
+            previousItem = collection[collection.length - 1];
+        }
         this.isKeyBoardAction = true;
         this.addListFocus(previousItem);
         this.previousFocusItem = previousItem;
@@ -1994,9 +1997,10 @@ var MultiSelect = /** @class */ (function (_super) {
         var selectedListMargin = selectedLI && !isNaN(parseInt(window.getComputedStyle(selectedLI).marginBottom, 10)) ?
             parseInt(window.getComputedStyle(selectedLI).marginBottom, 10) : 0;
         this.isUpwardScrolling = false;
-        var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
-        var lastElementValue = this.list.querySelector('li:last-of-type') ?
-            this.list.querySelector('li:last-of-type').getAttribute('data-value') : null;
+        var virtualListCount = this.list.querySelectorAll('.e-virtual-list:not(.e-virtual-list-end)').length;
+        var liItems = this.list.querySelectorAll('li:not(.e-virtual-list-end)');
+        var lastElementValue = liItems && liItems.length > 0 && liItems[liItems.length - 1] ?
+            liItems[liItems.length - 1].getAttribute('data-value') : null;
         var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ?
             selectedLI.offsetTop + (this.virtualListInfo.startIndex * (selectedLI.offsetHeight + selectedListMargin))
             : selectedLI.offsetTop;
@@ -2052,7 +2056,7 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.scrollTop = function (selectedLI, activeIndex, keyCode) {
         if (keyCode === void 0) { keyCode = null; }
-        var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+        var virtualListCount = this.list.querySelectorAll('.e-virtual-list:not(.e-virtual-list-end)').length;
         var selectedListMargin = selectedLI && !isNaN(parseInt(window.getComputedStyle(selectedLI).marginBottom, 10)) ?
             parseInt(window.getComputedStyle(selectedLI).marginBottom, 10) : 0;
         var selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ?
@@ -2281,11 +2285,11 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.list) {
             var elements = this.list.querySelectorAll('li.'
                 + dropDownBaseClasses.li
-                + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
+                + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list-end)');
             if (this.mode === 'CheckBox' && this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {
                 elements = this.list.querySelectorAll('li.'
                     + dropDownBaseClasses.li + ',li.' + dropDownBaseClasses.group
-                    + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
+                    + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list-end)');
             }
             var selectedElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);
             if (this.enableVirtualization && isVirtualKeyAction && !isNullOrUndefined(this.currentFocuedListElement)) {
@@ -2685,6 +2689,9 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
     };
+    MultiSelect.prototype.isFilteringWithRemoteData = function () {
+        return !isNullOrUndefined(this.mainData) && this.mainData.length > 0 && this.allowFiltering;
+    };
     MultiSelect.prototype.removeChip = function (value, isClearAll) {
         if (this.chipCollectionWrapper) {
             if (!(this.enableVirtualization && isClearAll)) {
@@ -2984,7 +2991,7 @@ var MultiSelect = /** @class */ (function (_super) {
             var inputWidth = (this.componentWrapper.offsetWidth) * parseFloat(width) / 100;
             width = inputWidth.toString() + 'px';
         }
-        return width;
+        return (this.allowResize && this.resizeWidth) ? this.resizeWidth + 'px' : width;
     };
     MultiSelect.prototype.mouseIn = function () {
         if (this.enabled && !this.readonly) {
@@ -3259,7 +3266,7 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.updateInitialData = function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var currentData = this.selectData;
-        var ulElement = this.renderItems(currentData, this.fields);
+        var ulElement = this.renderItems(currentData, this.fields, false, this.isClearAllAction);
         this.list.scrollTop = 0;
         this.virtualListInfo = {
             currentPageNumber: null,
@@ -3480,8 +3487,40 @@ var MultiSelect = /** @class */ (function (_super) {
             _this.search(event);
         });
     };
-    MultiSelect.prototype.search = function (e) {
+    MultiSelect.prototype.performFiltering = function (e) {
         var _this = this;
+        var eventArgs = {
+            preventDefaultAction: false,
+            text: this.targetElement(),
+            updateData: function (dataSource, query, fields) {
+                if (eventArgs.cancel) {
+                    return;
+                }
+                _this.isFiltered = true;
+                _this.customFilterQuery = query;
+                _this.remoteFilterAction = true;
+                _this.isCustomFiltering = true;
+                _this.dataUpdater(dataSource, query, fields);
+            },
+            event: e,
+            cancel: false
+        };
+        this.trigger('filtering', eventArgs, function (eventArgs) {
+            _this.isFilterPrevented = eventArgs.cancel;
+            if (!eventArgs.cancel) {
+                if (!_this.isFiltered && !eventArgs.preventDefaultAction) {
+                    _this.filterAction = true;
+                    _this.isFilteringAction = true;
+                    if (_this.dataSource instanceof DataManager && _this.allowCustomValue) {
+                        _this.isCustomRendered = false;
+                    }
+                    _this.dataUpdater(_this.dataSource, null, _this.fields);
+                    _this.isFilteringAction = false;
+                }
+            }
+        });
+    };
+    MultiSelect.prototype.search = function (e) {
         this.preventSetCurrentData = false;
         this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         if (!isNullOrUndefined(e)) {
@@ -3502,36 +3541,12 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
                 this.checkAndResetCache();
                 this.isRequesting = false;
-                var eventArgs_1 = {
-                    preventDefaultAction: false,
-                    text: this.targetElement(),
-                    updateData: function (dataSource, query, fields) {
-                        if (eventArgs_1.cancel) {
-                            return;
-                        }
-                        _this.isFiltered = true;
-                        _this.customFilterQuery = query;
-                        _this.remoteFilterAction = true;
-                        _this.isCustomFiltering = true;
-                        _this.dataUpdater(dataSource, query, fields);
-                    },
-                    event: e,
-                    cancel: false
-                };
-                this.trigger('filtering', eventArgs_1, function (eventArgs) {
-                    _this.isFilterPrevented = eventArgs.cancel;
-                    if (!eventArgs.cancel) {
-                        if (!_this.isFiltered && !eventArgs.preventDefaultAction) {
-                            _this.filterAction = true;
-                            _this.isFilteringAction = true;
-                            if (_this.dataSource instanceof DataManager && _this.allowCustomValue) {
-                                _this.isCustomRendered = false;
-                            }
-                            _this.dataUpdater(_this.dataSource, null, _this.fields);
-                            _this.isFilteringAction = false;
-                        }
-                    }
-                });
+                if (this.targetElement() !== '' && this.debounceDelay > 0) {
+                    this.debouncedFiltering(e, this.debounceDelay);
+                }
+                else {
+                    this.performFiltering(e);
+                }
             }
             else if (this.allowCustomValue) {
                 var query = new Query();
@@ -3842,6 +3857,9 @@ var MultiSelect = /** @class */ (function (_super) {
                         getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) :
                         this.value[index];
                     element = this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);
+                    if (!element && !isNullOrUndefined(this.mainList) && this.isFilteringWithRemoteData()) {
+                        element = this.findListElement(this.mainList, 'li', 'data-value', value);
+                    }
                     var isCustomData = false;
                     if (this.enableVirtualization) {
                         text = null;
@@ -3878,6 +3896,12 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                     else {
                         text = this.getTextByValue(value);
+                        if (text === value && this.isFilteringWithRemoteData()) {
+                            var savedListData = this.listData;
+                            this.listData = this.mainData;
+                            text = this.getTextByValue(value);
+                            this.listData = savedListData;
+                        }
                     }
                     if (((element && (element.getAttribute('aria-selected') !== 'true')) ||
                         (element && (element.getAttribute('aria-selected') === 'true' && this.hideSelectedItem) &&
@@ -4645,7 +4669,7 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.checkClearIconWidth = function () {
         if (this.showClearButton) {
-            this.clearIconWidth = parseInt(window.getComputedStyle(this.overAllClear).width, 10);
+            this.clearIconWidth = parseInt(window.getComputedStyle(this.overAllClear).width, 10) || this.overAllClear.offsetWidth;
         }
     };
     MultiSelect.prototype.updateRemainWidth = function (viewWrapper, totalWidth) {
@@ -5564,7 +5588,9 @@ var MultiSelect = /** @class */ (function (_super) {
                         _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);
+                        if (_this.popupHeight.toString().toLowerCase() !== 'auto' && _this.initialPopupHeight >= (parseInt(_this.popupHeight.toString(), 10) - 2)) {
+                            _this.list.parentElement.style.height = formatUnit(_this.popupHeight);
+                        }
                         _this.list.parentElement.style.maxHeight = formatUnit(_this.popupHeight);
                     }
                     if (_this.resizer) {
@@ -5892,7 +5918,8 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         if (this.list && this.list.parentElement) {
             this.list.parentElement.classList.add('e-resize');
-            if (this.popupHeight.toString().toLowerCase() !== 'auto') {
+            this.initialPopupHeight = this.list.parentElement.clientHeight;
+            if (this.popupHeight.toString().toLowerCase() !== 'auto' && this.initialPopupHeight >= (parseInt(this.popupHeight.toString(), 10) - 2)) {
                 this.list.parentElement.style.height = '100%';
             }
             this.list.parentElement.style.boxSizing = 'border-box'; // Ensures padding doesn't affect element size
@@ -5903,6 +5930,18 @@ var MultiSelect = /** @class */ (function (_super) {
             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.headerTemplate) {
+                var headerElem = this.list.parentElement.querySelector('.e-ddl-header');
+                if (headerElem && headerElem.offsetHeight) {
+                    this.headerTemplateHeight = headerElem.offsetHeight;
+                }
+                if (this.resizeHeight) {
+                    this.list.style.maxHeight = this.resizeHeight - this.headerTemplateHeight - 16 + "px";
+                }
+                else {
+                    this.list.style.maxHeight = parseInt(this.list.style.maxHeight, 10) - 16 + "px";
+                }
+            }
         }
         if (this.resizer) {
             EventHandler.add(this.resizer, 'mousedown', this.startResizing, this);
@@ -5957,6 +5996,9 @@ var MultiSelect = /** @class */ (function (_super) {
             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.headerTemplate) {
+                this.list.style.maxHeight = this.resizeHeight - this.headerTemplateHeight - 16 + "px";
+            }
             if (this.fixedHeaderElement && this.ulElement) {
                 this.fixedHeaderElement.style.width = this.ulElement.offsetWidth + "px";
             }
@@ -6205,7 +6247,7 @@ var MultiSelect = /** @class */ (function (_super) {
      *
      * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.
      * @returns {void}
-
+     * @deprecated
      */
     MultiSelect.prototype.disableItem = function (item) {
         if (this.fields.disabled) {
@@ -6456,6 +6498,9 @@ var MultiSelect = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], MultiSelect.prototype, "allowFiltering", void 0);
+    __decorate([
+        Property(300)
+    ], MultiSelect.prototype, "debounceDelay", void 0);
     __decorate([
         Property(true)
     ], MultiSelect.prototype, "isDeviceFullScreen", void 0);