@syncfusion/ej2-dropdowns 27.1.51 → 27.1.53

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

@@ -1957,6 +1957,10 @@ let DropDownBase = class DropDownBase extends Component {
     renderItems(listData, fields, isCheckBoxUpdate) {
         let ulElement;
         if (this.itemTemplate && listData) {
+            if (this.getModuleName() === 'multiselect' && this.virtualSelectAll) {
+                this.virtualSelectAllData = listData;
+                listData = listData.slice(this.virtualItemStartIndex, this.virtualItemEndIndex);
+            }
             let dataSource = listData;
             if (dataSource && fields.groupBy) {
                 if (this.sortOrder !== 'None') {
@@ -1964,7 +1968,7 @@ let DropDownBase = class DropDownBase extends Component {
                 }
                 dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);
             }
-            else {
+            else if (this.getModuleName() !== 'listbox' || (this.getModuleName() === 'listbox' && !this.preventDefActionFilter)) {
                 dataSource = this.getSortedDataSource(dataSource);
             }
             this.sortedData = dataSource;
@@ -1972,21 +1976,23 @@ let DropDownBase = class DropDownBase extends Component {
                 new DataManager(dataSource).executeLocal(new Query().take(100))
                 : dataSource;
             ulElement = this.templateListItem((this.getModuleName() === 'autocomplete') ? spliceData : dataSource, fields);
-            const oldUlElement = this.list.querySelector('.e-list-parent');
-            const virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
-            if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && this.getModuleName() === 'autocomplete')) {
-                virtualUlElement.replaceChild(ulElement, oldUlElement);
-                const reOrderList = this.list.querySelectorAll('.e-reorder');
-                if (this.list.querySelector('.e-virtual-ddl-content') && reOrderList && reOrderList.length > 0 && !isCheckBoxUpdate) {
-                    this.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList[0]);
+            if (this.isVirtualizationEnabled) {
+                const oldUlElement = this.list.querySelector('.e-list-parent');
+                const virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
+                if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && this.getModuleName() === 'autocomplete')) {
+                    virtualUlElement.replaceChild(ulElement, oldUlElement);
+                    const reOrderList = this.list.querySelectorAll('.e-reorder');
+                    if (this.list.querySelector('.e-virtual-ddl-content') && reOrderList && reOrderList.length > 0 && !isCheckBoxUpdate) {
+                        this.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList[0]);
+                    }
+                    this.updateListElements(listData);
+                }
+                else if (!virtualUlElement) {
+                    this.list.innerHTML = '';
+                    this.createVirtualContent();
+                    this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
+                    this.updateListElements(listData);
                 }
-                this.updateListElements(listData);
-            }
-            else if ((!virtualUlElement)) {
-                this.list.innerHTML = '';
-                this.createVirtualContent();
-                this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
-                this.updateListElements(listData);
             }
         }
         else {
@@ -2764,6 +2770,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.preventChange = false;
         this.isTouched = false;
         this.isFocused = false;
+        this.autoFill = false;
     }
     /**
      * Initialize the event handler.
@@ -4801,6 +4808,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
     }
     onInput(e) {
+        if (!isNullOrUndefined(e) && !isNullOrUndefined(e.data) && e.data.length > 1 && this.autoFill && (this.getModuleName() === 'combobox' || this.getModuleName() === 'autocomplete')) {
+            this.inputElement.value = e.data;
+        }
         this.isValidKey = true;
         if (this.getModuleName() === 'combobox') {
             this.updateIconState();
@@ -5003,7 +5013,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {
             const value = this.getItemData().value;
             const isExist = listData.some((data) => {
-                return (((typeof data === 'string' || typeof data === 'number') && data === value) ||
+                return (((typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') && data === value) ||
                     (getValue(this.fields.value, data) === value));
             });
             if (!isExist) {
@@ -5304,7 +5314,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.isNotSearchList = false;
                 this.isDocumentClick = false;
                 this.destroyPopup();
-                if (this.isFiltering() && this.actionCompleteData.list && this.actionCompleteData.list[0]) {
+                if (this.isFiltering() && this.actionCompleteData.list && this.actionCompleteData.list.length > 0) {
                     this.isActive = true;
                     if (this.enableVirtualization) {
                         this.onActionComplete(this.ulElement, this.listData, null, true);
@@ -8538,8 +8548,8 @@ let DropDownTree = class DropDownTree extends Component {
                     }
                     else {
                         const oldFocussedNode = this.treeObj.element.querySelector('.e-node-focus');
-                        focusedElement = this.treeObj.element.querySelector('li[tabindex="0"]:not(.e-disable):not(.e-prevent)') ||
-                            this.treeObj.element.querySelector('li:not(.e-disable):not(.e-prevent)');
+                        focusedElement = this.treeObj.element.querySelector('li[tabindex="0"]:not(.e-disable)') ||
+                            this.treeObj.element.querySelector('li:not(.e-disable)');
                         if (oldFocussedNode && oldFocussedNode !== focusedElement) {
                             oldFocussedNode.setAttribute('tabindex', '-1');
                             removeClass([oldFocussedNode], 'e-node-focus');
@@ -8982,7 +8992,7 @@ let DropDownTree = class DropDownTree extends Component {
             const id = getValue('id', args.data[0]).toString();
             this.removeSelectedData(id, true);
         }
-        if (!this.isChipDelete && args.isInteracted) {
+        if (!this.isChipDelete && args.isInteracted || (!this.isFilteredData && args.action === 'check' && this.isFromFilterChange)) {
             this.setMultiSelect();
             this.ensurePlaceHolder();
         }
@@ -11158,6 +11168,7 @@ let ComboBox = class ComboBox extends DropDownList {
         super.render();
         this.setSearchBox();
         this.renderComplete();
+        this.autoFill = this.autofill;
     }
     /**
      * Return the module name of this component.
@@ -14638,7 +14649,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 const value = this.allowObjectBinding ?
                     getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) :
                     this.value[this.value.length - 1];
-                const temp = this.getTextByValue(value);
+                const temp = text;
                 const textValues = this.text != null && this.text !== '' ? this.text + ',' + temp : temp;
                 currentText.push(textValues);
                 this.setProperties({ text: currentText.toString() }, true);
@@ -14675,11 +14686,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             removeClass(collection, 'e-disable');
         }
     }
-    dispatchSelect(value, eve, element, isNotTrigger, length) {
+    dispatchSelect(value, eve, element, isNotTrigger, length, dataValue, text) {
         const list = this.listData;
         if (this.initStatus && !isNotTrigger) {
             value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
-            const val = this.getDataByValue(value);
+            const val = dataValue ? dataValue : this.getDataByValue(value);
             const eventArgs = {
                 e: eve,
                 item: element,
@@ -14713,16 +14724,26 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             this.selectedListData = [(this.getDataByValue(value))];
                         }
                         else {
-                            if (Array.isArray(this.selectedListData)) {
-                                this.selectedListData.push((this.getDataByValue(value)));
+                            if (dataValue) {
+                                if (Array.isArray(this.selectedListData)) {
+                                    this.selectedListData.push(dataValue);
+                                }
+                                else {
+                                    this.selectedListData = [this.selectedListData, dataValue];
+                                }
                             }
                             else {
-                                this.selectedListData = [this.selectedListData, (this.getDataByValue(value))];
+                                if (Array.isArray(this.selectedListData)) {
+                                    this.selectedListData.push((this.getDataByValue(value)));
+                                }
+                                else {
+                                    this.selectedListData = [this.selectedListData, (this.getDataByValue(value))];
+                                }
                             }
                         }
                     }
                     if ((this.enableVirtualization && value) || !this.enableVirtualization) {
-                        this.updateListSelectEventCallback(value, element, eve);
+                        this.updateListSelectEventCallback(value, element, eve, text);
                     }
                     if (this.hideSelectedItem && this.fixedHeaderElement && this.fields.groupBy && this.mode !== 'CheckBox') {
                         super.scrollStop();
@@ -15824,9 +15845,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.removeValue(value, e, length);
         }
     }
-    updateListSelectEventCallback(value, li, e) {
+    updateListSelectEventCallback(value, li, e, currentText) {
         value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
-        const text = this.getTextByValue(value);
+        const text = currentText ? currentText : this.getTextByValue(value);
         if ((this.allowCustomValue || this.allowFiltering) &&
             !this.findListElement(this.mainList, 'li', 'data-value', value) &&
             (!this.enableVirtualization || (this.enableVirtualization && this.virtualCustomData))) {
@@ -16671,7 +16692,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                                 if (this.value && obj[this.fields.value] != null && Array.isArray(this.value) &&
                                     ((!this.allowObjectBinding && this.value.indexOf(obj[this.fields.value]) < 0) ||
                                         (this.allowObjectBinding && !this.isObjectInArray(obj[this.fields.value], this.value)))) {
-                                    this.dispatchSelect(obj[this.fields.value], event, null, false, length);
+                                    const value = obj[this.fields.value];
+                                    const text = (obj[this.fields.text]).toString();
+                                    this.dispatchSelect(value, event, null, false, length, obj, text);
                                 }
                             });
                         }
@@ -16681,7 +16704,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             this.updateValueState(event, this.value, this.tempValues);
                             this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
                         }
-                        this.updateHiddenElement();
+                        this.updateHiddenElement(true);
                         if (this.popupWrapper && li[index - 1] && li[index - 1].classList.contains('e-item-focus')) {
                             const selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
                             if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
@@ -16850,7 +16873,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         }
     }
-    updateHiddenElement() {
+    updateHiddenElement(isVirtualSelectAll) {
         let hiddenValue = '';
         let wrapperText = '';
         let data = '';
@@ -16858,20 +16881,24 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.mode === 'CheckBox') {
             this.value.map((value, index) => {
                 hiddenValue += '<option selected value ="' + value + '">' + index + '</option>';
-                if (this.listData) {
-                    data = this.getTextByValue(value);
-                }
-                else {
-                    data = value;
+                if (!isVirtualSelectAll) {
+                    if (this.listData) {
+                        data = this.getTextByValue(value);
+                    }
+                    else {
+                        data = value;
+                    }
+                    wrapperText += data + this.delimiterChar + ' ';
+                    text.push(data);
                 }
-                wrapperText += data + this.delimiterChar + ' ';
-                text.push(data);
             });
             this.hiddenElement.innerHTML = hiddenValue;
-            this.updateWrapperText(this.delimiterWrapper, wrapperText);
+            if (!isVirtualSelectAll) {
+                this.updateWrapperText(this.delimiterWrapper, wrapperText);
+                this.setProperties({ text: text.toString() }, true);
+            }
             this.delimiterWrapper.setAttribute('id', getUniqueID('delim_val'));
             this.inputElement.setAttribute('aria-describedby', this.delimiterWrapper.id);
-            this.setProperties({ text: text.toString() }, true);
             this.refreshInputHight();
             this.refreshPlaceHolder();
         }
@@ -17891,20 +17918,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.isReact) {
             this.clearTemplate();
         }
-        if (this.popupObj) {
+        if (!isNullOrUndefined(this.popupObj)) {
             this.popupObj.hide();
+            this.popupObj.destroy();
         }
         this.notify(destroy, {});
         this.unwireListEvents();
         this.unWireEvent();
-        this.list = null;
-        this.popupObj = null;
-        this.mainList = null;
-        this.mainData = null;
-        this.filterParent = null;
-        this.ulElement = null;
-        this.mainListCollection = null;
-        super.destroy();
         const temp = ['readonly', 'aria-disabled', 'placeholder', 'aria-label', 'aria-expanded'];
         let length = temp.length;
         if (!isNullOrUndefined(this.inputElement)) {
@@ -17926,6 +17946,56 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 remove(this.overAllWrapper);
             }
         }
+        if (this.popupWrapper && this.popupWrapper.parentElement) {
+            this.popupWrapper.parentElement.remove();
+        }
+        while (this.searchWrapper && this.searchWrapper.firstChild) {
+            this.searchWrapper.removeChild(this.searchWrapper.firstChild);
+        }
+        if (this.searchWrapper && this.searchWrapper.parentElement) {
+            this.searchWrapper.parentElement.remove();
+        }
+        if (this.viewWrapper && this.viewWrapper.parentElement) {
+            this.viewWrapper.parentElement.remove();
+        }
+        if (this.overAllClear && this.overAllClear.parentElement) {
+            this.overAllClear.parentElement.remove();
+        }
+        if (this.delimiterWrapper && this.delimiterWrapper.parentElement) {
+            this.delimiterWrapper.parentElement.remove();
+        }
+        // Remove the select element if it exists
+        const selectElement = this.overAllWrapper.querySelector('select.e-multi-hidden');
+        if (selectElement && selectElement.parentElement) {
+            selectElement.parentElement.remove();
+        }
+        while (this.componentWrapper && this.componentWrapper.firstChild) {
+            this.componentWrapper.removeChild(this.componentWrapper.firstChild);
+        }
+        if (this.componentWrapper && this.componentWrapper.parentElement) {
+            this.componentWrapper.removeAttribute('class');
+            this.componentWrapper.parentElement.remove();
+        }
+        while (this.popupWrapper && this.popupWrapper.firstChild) {
+            this.popupWrapper.removeChild(this.popupWrapper.firstChild);
+        }
+        if (this.inputElement) {
+            const attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',
+                'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',
+                'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-label', 'aria-hidden', 'tabindex', 'aria-controls',
+                'aria-describedby', 'size', 'role', 'type', 'class'];
+            for (let i = 0; i < attrArray.length; i++) {
+                this.inputElement.removeAttribute(attrArray[i]);
+            }
+        }
+        if (this.inputElement) {
+            this.inputElement.remove();
+        }
+        this.list = null;
+        this.popupObj = null;
+        this.mainData = null;
+        this.filterParent = null;
+        this.ulElement = null;
         this.componentWrapper = null;
         this.overAllClear = null;
         this.overAllWrapper = null;
@@ -17937,14 +18007,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.popupWrapper = null;
         this.inputElement = null;
         this.delimiterWrapper = null;
-        this.popupObj = null;
-        this.popupWrapper = null;
         this.liCollections = null;
         this.header = null;
         this.mainList = null;
         this.mainListCollection = null;
         this.footer = null;
         this.selectAllEventEle = null;
+        super.destroy();
     }
 };
 __decorate$5([
@@ -19356,6 +19425,12 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 liCollElem[i].classList.remove('e-grabbed');
             }
         }
+        if (this.toolbarSettings.items.length > 0) {
+            this.updateToolBarState();
+        }
+        else if (this.tBListBox && this.tBListBox.toolbarSettings.items.length > 0) {
+            this.tBListBox.updateToolBarState();
+        }
     }
     updateListItems(sourceElem, destElem) {
         destElem.innerHTML = '';
@@ -19439,6 +19514,17 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 li.setAttribute('aria-disabled', 'true');
             }
         });
+        if (this.allowFiltering && this.filterInput && this.filterInput.value !== '' && this.toolbarSettings.items.length > 0) {
+            let canDisable = false;
+            this.ulElement.childNodes.forEach((li) => { if (!li.classList.contains('e-disabled')) {
+                canDisable = true;
+            } });
+            if (!canDisable) {
+                const wrap = this.list.parentElement.getElementsByClassName('e-listbox-tool')[0];
+                const btn = wrap.querySelector('[data-value="moveAllTo"]');
+                btn.disabled = true;
+            }
+        }
     }
     /**
      * Based on the state parameter, specified list item will be selected/deselected.
@@ -20284,6 +20370,12 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         if (fListBox.value.length === 1 && fListBox.getSelectedItems().length) {
             fListBox.value[0] = fListBox.getFormattedValue(fListBox.getSelectedItems()[0].getAttribute('data-value'));
         }
+        if (fListBox.liCollections.length === fListBox.ulElement.querySelectorAll('.e-disabled').length) {
+            const wrap = this.list.parentElement.getElementsByClassName('e-listbox-tool')[0];
+            const toolbarAction = this.toolbarAction === 'moveFrom' ? 'moveAllFrom' : 'moveAllTo';
+            const btn = wrap.querySelector('[data-value="' + toolbarAction + '"]');
+            btn.disabled = true;
+        }
     }
     selectNextList(elems, dataLiIdx, dataIdx, inst) {
         const childCnt = inst.ulElement.querySelectorAll('.e-list-item').length;
@@ -20407,7 +20499,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             if (tempLiColl.length > 0) {
                 for (let i = 0; i < tempLiColl.length; i++) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    disabledData.push(this.getDataByValue(tempLiColl[i].getAttribute('data-value')));
+                    disabledData.push(fListBox.getDataByValue(tempLiColl[i].getAttribute('data-value')));
                 }
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 fListBox.listData = fListBox.listData.filter((obj1) => !disabledData.some((obj2) => obj1 === obj2));
@@ -20429,9 +20521,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
         if (isRefresh) {
             const sourceElem = tListBox.renderItems(listData, tListBox.fields);
-            if (!this.itemTemplate) {
-                tListBox.updateListItems(sourceElem, tListBox.ulElement);
-            }
+            tListBox.updateListItems(sourceElem, tListBox.ulElement);
         }
         else {
             tListBox.sortedData = listData;
@@ -20872,6 +20962,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             }
         }
         else {
+            if (inst.ulElement.querySelectorAll('.e-disabled').length > 0) {
+                return inst.liCollections.length === inst.ulElement.querySelectorAll('.e-disabled').length;
+            }
             return inst.ulElement.querySelectorAll('.' + cssClass.li).length === 0;
         }
     }