@syncfusion/ej2-dropdowns 20.3.59 → 20.4.38

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

@@ -6,9 +6,6 @@ import { Input, TextBox } from '@syncfusion/ej2-inputs';
 import { Button, createCheckBox } from '@syncfusion/ej2-buttons';
 import { TreeView } from '@syncfusion/ej2-navigations';
 
-/**
- * IncrementalSearch module file
- */
 let queryString = '';
 let prevString = '';
 let matches$1 = [];
@@ -81,7 +78,7 @@ function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId)
  * @param {boolean} ignoreCase - Specifies the case sensitive option for search operation.
  * @returns {Element | number} Returns the search matched items.
  */
-function Search(inputVal, items, searchType, ignoreCase) {
+function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, type) {
     const listItems = items;
     ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;
     const itemData = { item: null, index: null };
@@ -91,7 +88,20 @@ function Search(inputVal, items, searchType, ignoreCase) {
         queryStr = escapeCharRegExp(queryStr);
         for (let i = 0, itemsData = listItems; i < itemsData.length; i++) {
             const item = itemsData[i];
-            const text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
+            let text;
+            let filterValue;
+            if (items && dataSource) {
+                let checkField = item;
+                let fieldValue = fields.text.split('.');
+                dataSource.filter(function (data) {
+                    Array.prototype.slice.call(fieldValue).forEach(function (value) {
+                        if (type === 'object' && checkField.textContent.toString().indexOf(data[value]) !== -1 && checkField.getAttribute('data-value') === data[fields.value] || type === 'string' && checkField.textContent.toString().indexOf(data) !== -1) {
+                            filterValue = type === 'object' ? data[value] : data;
+                        }
+                    });
+                });
+            }
+            text = dataSource && filterValue ? (ignoreCase ? filterValue.toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/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;
@@ -422,7 +432,9 @@ let DropDownBase = class DropDownBase extends Component {
                 liElem.setAttribute('role', 'option');
             }
             else {
-                ele.innerHTML = content;
+                if (!isNullOrUndefined(ele)) {
+                    ele.innerHTML = content;
+                }
             }
         }
     }
@@ -453,14 +465,16 @@ let DropDownBase = class DropDownBase extends Component {
      * @returns {void}
      */
     setEnableRtl() {
-        if (this.list) {
-            this.enableRtlElements.push(this.list);
-        }
-        if (this.enableRtl) {
-            addClass(this.enableRtlElements, dropDownBaseClasses.rtl);
-        }
-        else {
-            removeClass(this.enableRtlElements, dropDownBaseClasses.rtl);
+        if (!isNullOrUndefined(this.enableRtlElements)) {
+            if (this.list) {
+                this.enableRtlElements.push(this.list);
+            }
+            if (this.enableRtl) {
+                addClass(this.enableRtlElements, dropDownBaseClasses.rtl);
+            }
+            else {
+                removeClass(this.enableRtlElements, dropDownBaseClasses.rtl);
+            }
         }
     }
     /**
@@ -498,14 +512,6 @@ let DropDownBase = class DropDownBase extends Component {
     getPersistData() {
         return this.addOnPersist([]);
     }
-    /**
-     * Sets the enabled state to DropDownBase.
-     *
-     * @returns {void}
-     */
-    setEnabled() {
-        this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');
-    }
     /**
      * Sets the enabled state to DropDownBase.
      *
@@ -724,7 +730,9 @@ let DropDownBase = class DropDownBase extends Component {
         this.liCollections = [];
         this.trigger('actionFailure', e);
         this.l10nUpdate(true);
-        addClass([this.list], dropDownBaseClasses.noData);
+        if (!isNullOrUndefined(this.list)) {
+            addClass([this.list], dropDownBaseClasses.noData);
+        }
     }
     /* eslint-disable @typescript-eslint/no-unused-vars */
     onActionComplete(ulElement, list, e) {
@@ -854,10 +862,12 @@ let DropDownBase = class DropDownBase extends Component {
         if (!isNullOrUndefined(this.list) && !this.list.classList.contains(dropDownBaseClasses.noData)) {
             if (isNullOrUndefined(this.fixedHeaderElement)) {
                 this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });
-                if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {
+                if (!isNullOrUndefined(this.list) && !this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {
                     this.fixedHeaderElement.style.display = 'none';
                 }
-                prepend([this.fixedHeaderElement], this.list);
+                if (!isNullOrUndefined(this.fixedHeaderElement) && !isNullOrUndefined(this.list)) {
+                    prepend([this.fixedHeaderElement], this.list);
+                }
                 this.setFixedHeader();
             }
             if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {
@@ -948,7 +958,9 @@ let DropDownBase = class DropDownBase extends Component {
         return item;
     }
     setFixedHeader() {
-        this.list.parentElement.style.display = 'block';
+        if (!isNullOrUndefined(this.list)) {
+            this.list.parentElement.style.display = 'block';
+        }
         let borderWidth = 0;
         if (this.list && this.list.parentElement) {
             borderWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-width'), 10);
@@ -963,8 +975,10 @@ let DropDownBase = class DropDownBase extends Component {
                 borderWidth = (borderTopWidth + borderBottomWidth + borderLeftWidth + borderRightWidth);
             }
         }
-        const liWidth = this.getValidLi().offsetWidth - borderWidth;
-        this.fixedHeaderElement.style.width = liWidth.toString() + 'px';
+        if (!isNullOrUndefined(this.liCollections)) {
+            const liWidth = this.getValidLi().offsetWidth - borderWidth;
+            this.fixedHeaderElement.style.width = liWidth.toString() + 'px';
+        }
         setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });
         const firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group + ':not(.e-hide-listitem)');
         this.fixedHeaderElement.innerHTML = firstLi.innerHTML;
@@ -1107,9 +1121,6 @@ let DropDownBase = class DropDownBase extends Component {
                 case 'enableRtl':
                     this.setEnableRtl();
                     break;
-                case 'enabled':
-                    this.setEnabled();
-                    break;
                 case 'groupTemplate':
                     this.renderGroupTemplate(this.list);
                     if (this.ulElement && this.fixedHeaderElement) {
@@ -1158,7 +1169,6 @@ let DropDownBase = class DropDownBase extends Component {
             wrapperElement.appendChild(this.list);
         }
         this.setEnableRtl();
-        this.setEnabled();
         if (!isEmptyData) {
             this.initialize(e);
         }
@@ -1186,7 +1196,7 @@ let DropDownBase = class DropDownBase extends Component {
      * Adds a new item to the popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
      * @deprecated
@@ -1250,11 +1260,17 @@ let DropDownBase = class DropDownBase extends Component {
             this.trigger('beforeItemRender', { element: li, item: item });
         }
         if (itemsCount === 0 && isNullOrUndefined(this.list.querySelector('ul'))) {
-            this.list.innerHTML = '';
-            this.list.classList.remove(dropDownBaseClasses.noData);
-            this.list.appendChild(this.ulElement);
+            if (!isNullOrUndefined(this.list)) {
+                this.list.innerHTML = '';
+                this.list.classList.remove(dropDownBaseClasses.noData);
+                if (!isNullOrUndefined(this.ulElement)) {
+                    this.list.appendChild(this.ulElement);
+                }
+            }
             this.liCollections = liCollections;
-            append(liCollections, this.ulElement);
+            if (!isNullOrUndefined(liCollections) && !isNullOrUndefined(this.ulElement)) {
+                append(liCollections, this.ulElement);
+            }
             this.updateAddItemList(this.list, itemsCount);
         }
         else {
@@ -1373,15 +1389,17 @@ let DropDownBase = class DropDownBase extends Component {
             }
             detach(this.list);
         }
+        this.liCollections = null;
+        this.ulElement = null;
+        this.list = null;
+        this.enableRtlElements = null;
+        this.rippleFun = null;
         super.destroy();
     }
 };
 __decorate([
     Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)
 ], DropDownBase.prototype, "fields", void 0);
-__decorate([
-    Property(false)
-], DropDownBase.prototype, "enablePersistence", void 0);
 __decorate([
     Property(null)
 ], DropDownBase.prototype, "itemTemplate", void 0);
@@ -1397,9 +1415,6 @@ __decorate([
 __decorate([
     Property('None')
 ], DropDownBase.prototype, "sortOrder", void 0);
-__decorate([
-    Property(true)
-], DropDownBase.prototype, "enabled", void 0);
 __decorate([
     Property([])
 ], DropDownBase.prototype, "dataSource", void 0);
@@ -1643,8 +1658,12 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.resetFocusElement();
             }
         }
-        this.hiddenElement.innerHTML = '';
-        this.inputElement.value = '';
+        if (!isNullOrUndefined(this.hiddenElement)) {
+            this.hiddenElement.innerHTML = '';
+        }
+        if (!isNullOrUndefined(this.inputElement)) {
+            this.inputElement.value = '';
+        }
         this.value = null;
         this.itemData = null;
         this.text = null;
@@ -1666,21 +1685,21 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (Object.keys(this.htmlAttributes).length) {
             for (const htmlAttr of Object.keys(this.htmlAttributes)) {
                 if (htmlAttr === 'class') {
-                    const updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\s+/g, ' ')).trim();
+                    const updatedClassValue = (this.htmlAttributes[`${htmlAttr}`].replace(/\s+/g, ' ')).trim();
                     if (updatedClassValue !== '') {
                         addClass([this.inputWrapper.container], updatedClassValue.split(' '));
                     }
                 }
-                else if (htmlAttr === 'disabled' && this.htmlAttributes[htmlAttr] === 'disabled') {
+                else if (htmlAttr === 'disabled' && this.htmlAttributes[`${htmlAttr}`] === 'disabled') {
                     this.enabled = false;
                     this.setEnable();
                 }
-                else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes[htmlAttr])) {
+                else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes[`${htmlAttr}`])) {
                     this.readonly = true;
                     this.dataBind();
                 }
                 else if (htmlAttr === 'style') {
-                    this.inputWrapper.container.setAttribute('style', this.htmlAttributes[htmlAttr]);
+                    this.inputWrapper.container.setAttribute('style', this.htmlAttributes[`${htmlAttr}`]);
                 }
                 else {
                     const defaultAttr = ['title', 'id', 'placeholder',
@@ -1690,18 +1709,18 @@ let DropDownList = class DropDownList extends DropDownBase {
                         defaultAttr.push('tabindex');
                     }
                     if (validateAttr.indexOf(htmlAttr) > -1 || htmlAttr.indexOf('data') === 0) {
-                        this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                        this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
                     }
                     else if (defaultAttr.indexOf(htmlAttr) > -1) {
                         if (htmlAttr === 'placeholder') {
-                            Input.setPlaceholder(this.htmlAttributes[htmlAttr], this.inputElement);
+                            Input.setPlaceholder(this.htmlAttributes[`${htmlAttr}`], this.inputElement);
                         }
                         else {
-                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
                         }
                     }
                     else {
-                        this.inputWrapper.container.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                        this.inputWrapper.container.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
                     }
                 }
             }
@@ -1757,7 +1776,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
     }
     targetElement() {
-        return this.inputWrapper.container;
+        return !isNullOrUndefined(this.inputWrapper) ? this.inputWrapper.container : null;
     }
     getNgDirective() {
         return 'EJS-DROPDOWNLIST';
@@ -1915,7 +1934,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
     }
     unBindCommonEvent() {
-        if (this.targetElement()) {
+        if (!isNullOrUndefined(this.inputWrapper) && this.targetElement()) {
             EventHandler.remove(this.targetElement(), 'blur', this.onBlurHandler);
         }
         const formElement = this.inputElement && closest(this.inputElement, 'form');
@@ -1945,9 +1964,11 @@ let DropDownList = class DropDownList extends DropDownBase {
      * @returns {void}
      */
     wireListEvents() {
-        EventHandler.add(this.list, 'click', this.onMouseClick, this);
-        EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
-        EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
+        if (!isNullOrUndefined(this.list)) {
+            EventHandler.add(this.list, 'click', this.onMouseClick, this);
+            EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
+            EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
+        }
     }
     onSearch(e) {
         if (e.charCode !== 32 && e.charCode !== 13) {
@@ -2225,9 +2246,11 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.setSelection(previousItem, event);
     }
     unWireEvent() {
-        EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);
-        EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);
-        EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);
+        if (!isNullOrUndefined(this.inputWrapper)) {
+            EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);
+            EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);
+            EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);
+        }
         this.unBindCommonEvent();
     }
     /**
@@ -2236,9 +2259,11 @@ let DropDownList = class DropDownList extends DropDownBase {
      * @returns {void}
      */
     unWireListEvents() {
-        EventHandler.remove(this.list, 'click', this.onMouseClick);
-        EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
-        EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
+        if (this.list) {
+            EventHandler.remove(this.list, 'click', this.onMouseClick);
+            EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
+            EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
+        }
     }
     checkSelector(id) {
         return '[id="' + id.replace(/(:|\.|\[|\]|,|=|@|\\|\/|#)/g, '\\$1') + '"]';
@@ -2246,7 +2271,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     onDocumentClick(e) {
         const target = e.target;
         if (!(!isNullOrUndefined(this.popupObj) && closest(target, this.checkSelector(this.popupObj.element.id))) &&
-            !this.inputWrapper.container.contains(e.target)) {
+            !isNullOrUndefined(this.inputWrapper) && !this.inputWrapper.container.contains(e.target)) {
             if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {
                 this.isDocumentClick = true;
                 const isActive = this.isRequested;
@@ -2443,14 +2468,16 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.setScrollPosition(e);
         }
         if (Browser.info.name !== 'mozilla') {
-            attributes(this.targetElement(), { 'aria-label': this.inputElement.value });
-            attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id != '' ? this.inputElement.id : this.element.id });
-            this.targetElement().removeAttribute('aria-live');
+            attributes(this.inputElement, { 'aria-label': this.inputElement.value });
+            if (this.targetElement()) {
+                attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id != '' ? this.inputElement.id : this.element.id });
+                this.targetElement().removeAttribute('aria-live');
+            }
         }
-        if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
+        if (this.isPopupOpen && !isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
             attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
         }
-        else if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-active')[0])) {
+        else if (this.isPopupOpen && !isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-active')[0])) {
             attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });
         }
     }
@@ -2616,9 +2643,11 @@ let DropDownList = class DropDownList extends DropDownBase {
                 selectedElement.setAttribute('value', this.value.toString());
             }
             else {
-                this.hiddenElement.innerHTML = '<option selected>' + this.text + '</option>';
-                const selectedElement = this.hiddenElement.querySelector('option');
-                selectedElement.setAttribute('value', this.value.toString());
+                if (!isNullOrUndefined(this.hiddenElement)) {
+                    this.hiddenElement.innerHTML = '<option selected>' + this.text + '</option>';
+                    const selectedElement = this.hiddenElement.querySelector('option');
+                    selectedElement.setAttribute('value', this.value.toString());
+                }
             }
         }
         else {
@@ -2769,9 +2798,9 @@ let DropDownList = class DropDownList extends DropDownBase {
     /**
      * To filter the data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @param {Query} query - Specify the query to filter the data.
+     * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
      * @deprecated
      */
@@ -2954,7 +2983,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                     && ((this.dataSource instanceof DataManager)
                         || (!isNullOrUndefined(this.dataSource) && !isNullOrUndefined(this.dataSource.length) &&
                             this.dataSource.length !== 0)))) {
-                    if (this.itemTemplate && (this.element.tagName === 'EJS-COMBOBOX' || this.element.tagName === 'EJS-DROPDOWNLIST') && this.allowFiltering) {
+                    if (this.itemTemplate && this.element.tagName === 'EJS-COMBOBOX' && this.allowFiltering) {
                         setTimeout(() => {
                             this.updateActionCompleteDataValues(ulElement, list);
                         }, 0);
@@ -3102,9 +3131,11 @@ let DropDownList = class DropDownList extends DropDownBase {
                     (this.isDropDownClick && this.getModuleName() === 'combobox')))) {
                     offsetValue = this.getOffsetValue(popupEle);
                     const firstItem = this.isEmptyList() ? this.list : this.liCollections[0];
-                    left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -
-                        parseInt(getComputedStyle(this.inputElement).paddingLeft, 10) +
-                        parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10));
+                    if (!isNullOrUndefined(this.inputElement)) {
+                        left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -
+                            parseInt(getComputedStyle(this.inputElement).paddingLeft, 10) +
+                            parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10));
+                    }
                 }
                 this.getFocusElement();
                 this.createPopup(popupEle, offsetValue, left);
@@ -3149,9 +3180,13 @@ let DropDownList = class DropDownList extends DropDownBase {
                 const eventArgs = { popup: popupInstance, event: e, cancel: false, animation: animModel };
                 this.trigger('open', eventArgs, (eventArgs) => {
                     if (!eventArgs.cancel) {
-                        addClass([this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
+                        if (!isNullOrUndefined(this.inputWrapper)) {
+                            addClass([this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
+                        }
                         this.renderReactTemplates();
-                        this.popupObj.show(new Animation(eventArgs.animation), (this.zIndex === 1000) ? this.element : null);
+                        if (!isNullOrUndefined(this.popupObj)) {
+                            this.popupObj.show(new Animation(eventArgs.animation), (this.zIndex === 1000) ? this.element : null);
+                        }
                     }
                     else {
                         this.beforePopupOpen = false;
@@ -3407,11 +3442,13 @@ let DropDownList = class DropDownList extends DropDownBase {
                 EventHandler.remove(this.backIconElement, 'click', this.clickOnBackIcon);
                 EventHandler.remove(this.clearIconElement, 'click', this.clearText);
             }
-            EventHandler.remove(this.filterInput, 'input', this.onInput);
-            EventHandler.remove(this.filterInput, 'keyup', this.onFilterUp);
-            EventHandler.remove(this.filterInput, 'keydown', this.onFilterDown);
-            EventHandler.remove(this.filterInput, 'blur', this.onBlurHandler);
-            EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);
+            if (!isNullOrUndefined(this.filterInput)) {
+                EventHandler.remove(this.filterInput, 'input', this.onInput);
+                EventHandler.remove(this.filterInput, 'keyup', this.onFilterUp);
+                EventHandler.remove(this.filterInput, 'keydown', this.onFilterDown);
+                EventHandler.remove(this.filterInput, 'blur', this.onBlurHandler);
+                EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);
+            }
             this.filterInput = null;
         }
         attributes(this.targetElement(), { 'aria-expanded': 'false' });
@@ -3546,6 +3583,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectElement.selectedIndex].textContent;
             this.initValue();
         }
+        this.setEnabled();
         this.preventTabIndex(this.element);
         if (!this.enabled) {
             this.targetElement().tabIndex = -1;
@@ -3630,6 +3668,14 @@ let DropDownList = class DropDownList extends DropDownBase {
         const contentEle = popupEle.querySelector('div.e-content');
         popupEle.insertBefore(this.header, contentEle);
     }
+    /**
+     * Sets the enabled state to DropDownBase.
+     *
+     * @returns {void}
+     */
+    setEnabled() {
+        this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');
+    }
     setOldText(text) {
         this.text = text;
     }
@@ -3998,7 +4044,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             };
             history.pushState({}, '');
         }
-        if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {
+        if (!isNullOrUndefined(this.list) && (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData))) {
             this.renderPopup(e);
         }
     }
@@ -4014,7 +4060,9 @@ let DropDownList = class DropDownList extends DropDownBase {
     hidePopup(e) {
         /* eslint-enable valid-jsdoc, jsdoc/require-param */
         if (this.isEscapeKey && this.getModuleName() === 'dropdownlist') {
-            Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+            if (!isNullOrUndefined(this.inputElement)) {
+                Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+            }
             this.isEscapeKey = false;
             if (!isNullOrUndefined(this.index)) {
                 const element = this.findListElement(this.ulElement, 'li', 'data-value', this.value);
@@ -4124,6 +4172,21 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.inputWrapper.container.parentElement.insertBefore(this.element, this.inputWrapper.container);
             detach(this.inputWrapper.container);
         }
+        this.hiddenElement = null;
+        this.inputWrapper = null;
+        this.keyboardModule = null;
+        this.ulElement = null;
+        this.list = null;
+        this.popupObj = null;
+        this.rippleFun = null;
+        this.selectedLI = null;
+        this.liCollections = null;
+        this.item = null;
+        this.inputWrapper = null;
+        this.footer = null;
+        this.header = null;
+        this.previousSelectedLI = null;
+        this.valueTempElement = null;
         super.destroy();
     }
     /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
@@ -4166,6 +4229,12 @@ __decorate$1([
 __decorate$1([
     Property('100%')
 ], DropDownList.prototype, "width", void 0);
+__decorate$1([
+    Property(true)
+], DropDownList.prototype, "enabled", void 0);
+__decorate$1([
+    Property(false)
+], DropDownList.prototype, "enablePersistence", void 0);
 __decorate$1([
     Property('300px')
 ], DropDownList.prototype, "popupHeight", void 0);
@@ -4327,6 +4396,9 @@ __decorate$2([
 __decorate$2([
     Property(null)
 ], Fields.prototype, "query", void 0);
+__decorate$2([
+    Property('selectable')
+], Fields.prototype, "selectable", void 0);
 __decorate$2([
     Property('selected')
 ], Fields.prototype, "selected", void 0);
@@ -5122,7 +5194,12 @@ let DropDownTree = class DropDownTree extends Component {
                         temp = this.getOverflowVal(index);
                         data += temp;
                         temp = this.overFlowWrapper.innerHTML;
-                        this.overFlowWrapper.innerHTML = data;
+                        if (this.enableHtmlSanitizer) {
+                            this.overFlowWrapper.innerText = data;
+                        }
+                        else {
+                            this.overFlowWrapper.innerHTML = data;
+                        }
                         wrapperleng = this.overFlowWrapper.offsetWidth;
                         overAllContainer = this.inputWrapper.offsetWidth;
                         if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {
@@ -5651,6 +5728,7 @@ let DropDownTree = class DropDownTree extends Component {
             nodeClicked: this.onNodeClicked.bind(this),
             dataBound: this.OnDataBound.bind(this),
             allowMultiSelection: this.allowMultiSelection,
+            enableHtmlSanitizer: this.enableHtmlSanitizer,
             showCheckBox: this.showCheckBox,
             autoCheck: this.treeSettings.autoCheck,
             sortOrder: this.sortOrder,
@@ -5941,7 +6019,7 @@ let DropDownTree = class DropDownTree extends Component {
             dataSource: fields.dataSource, value: fields.value, text: fields.text, parentValue: fields.parentValue,
             child: this.cloneChildField(fields.child), hasChildren: fields.hasChildren, expanded: fields.expanded,
             iconCss: fields.iconCss, imageUrl: fields.imageUrl, htmlAttributes: fields.htmlAttributes, query: fields.query,
-            selected: fields.selected, tableName: fields.tableName, tooltip: fields.tooltip
+            selected: fields.selected, selectable: fields.selectable, tableName: fields.tableName, tooltip: fields.tooltip
         };
         return clonedField;
     }
@@ -5954,7 +6032,7 @@ let DropDownTree = class DropDownTree extends Component {
                 dataSource: fields.dataSource, value: fields.value, text: fields.text, parentValue: fields.parentValue,
                 child: (fields.child ? this.cloneChildField(fields.child) : null), hasChildren: fields.hasChildren,
                 expanded: fields.expanded, iconCss: fields.iconCss, imageUrl: fields.imageUrl, htmlAttributes: fields.htmlAttributes,
-                query: fields.query, selected: fields.selected, tableName: fields.tableName, tooltip: fields.tooltip
+                query: fields.query, selected: fields.selected, selectable: fields.selectable, tableName: fields.tableName, tooltip: fields.tooltip
             };
             return clonedField;
         }
@@ -5964,7 +6042,7 @@ let DropDownTree = class DropDownTree extends Component {
             dataSource: fields.dataSource, id: fields.value, text: fields.text, parentID: fields.parentValue,
             child: this.getTreeChildren(fields.child), hasChildren: fields.hasChildren, expanded: fields.expanded,
             iconCss: fields.iconCss, imageUrl: fields.imageUrl, isChecked: fields.selected,
-            htmlAttributes: fields.htmlAttributes, query: fields.query, selected: fields.selected,
+            htmlAttributes: fields.htmlAttributes, query: fields.query, selectable: fields.selectable, selected: fields.selected,
             tableName: fields.tableName, tooltip: fields.tooltip
         };
         return treeFields;
@@ -6459,7 +6537,12 @@ let DropDownTree = class DropDownTree extends Component {
         });
         const chipContent = this.createElement('span', { className: CHIP_CONTENT });
         const chipClose = this.createElement('span', { className: CHIP_CLOSE + ' ' + ICONS });
-        chipContent.innerHTML = text;
+        if (this.enableHtmlSanitizer) {
+            chipContent.innerText = text;
+        }
+        else {
+            chipContent.innerHTML = text;
+        }
         chip.appendChild(chipContent);
         this.chipCollection.appendChild(chip);
         if (this.showClearButton) {
@@ -7281,6 +7364,9 @@ __decorate$2([
 __decorate$2([
     Property(false)
 ], DropDownTree.prototype, "showCheckBox", void 0);
+__decorate$2([
+    Property(false)
+], DropDownTree.prototype, "enableHtmlSanitizer", void 0);
 __decorate$2([
     Property(true)
 ], DropDownTree.prototype, "showClearButton", void 0);
@@ -7565,7 +7651,7 @@ let ComboBox = class ComboBox extends DropDownList {
     }
     getFocusElement() {
         const dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();
-        const selected = this.list.querySelector('.' + dropDownListClasses.selected);
+        const selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : this.list;
         const isSelected = dataItem.text === this.inputElement.value && !isNullOrUndefined(selected);
         if (isSelected) {
             return selected;
@@ -7573,8 +7659,10 @@ let ComboBox = class ComboBox extends DropDownList {
         if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
             !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
             const inputValue = this.inputElement.value;
-            const activeItem = Search(inputValue, this.liCollections, this.filterType, true);
-            const activeElement = activeItem.item;
+            const dataSource = this.sortedData;
+            const type = this.typeOfData(dataSource).typeof;
+            const activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);
+            var activeElement = activeItem.item;
             if (!isNullOrUndefined(activeElement)) {
                 const count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
                 const height = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);
@@ -7723,9 +7811,11 @@ let ComboBox = class ComboBox extends DropDownList {
         }
         else if (this.inputElement.value === '') {
             this.activeIndex = null;
-            this.list.scrollTop = 0;
-            const focusItem = this.list.querySelector('.' + dropDownListClasses.li);
-            this.setHoverList(focusItem);
+            if (!isNullOrUndefined(this.list)) {
+                this.list.scrollTop = 0;
+                const focusItem = this.list.querySelector('.' + dropDownListClasses.li);
+                this.setHoverList(focusItem);
+            }
         }
         else {
             this.activeIndex = null;
@@ -7971,7 +8061,7 @@ let ComboBox = class ComboBox extends DropDownList {
      * Adds a new item to the combobox popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
      * @deprecated
@@ -7982,9 +8072,9 @@ let ComboBox = class ComboBox extends DropDownList {
     /**
      * To filter the data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @param {Query} query - Specify the query to filter the data.
+     * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
      * @deprecated
      */
@@ -8021,7 +8111,7 @@ let ComboBox = class ComboBox extends DropDownList {
                 this.removeFillSelection();
             }
             const dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();
-            const selected = this.list.querySelector('.' + dropDownListClasses.selected);
+            const selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : null;
             if (this.inputElement && dataItem.text === this.inputElement.value && !isNullOrUndefined(selected)) {
                 if (this.isSelected) {
                     this.onChangeEvent(e);
@@ -8031,10 +8121,12 @@ let ComboBox = class ComboBox extends DropDownList {
                 return;
             }
             if (this.getModuleName() === 'combobox' && this.inputElement.value.trim() !== '') {
-                const searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true);
+                const dataSource = this.sortedData;
+                const type = this.typeOfData(dataSource).typeof;
+                const searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true, dataSource, this.fields, type);
                 this.selectedLI = searchItem.item;
                 if (isNullOrUndefined(searchItem.index)) {
-                    searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true).index;
+                    searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true, dataSource, this.fields, type).index;
                 }
                 this.activeIndex = searchItem.index;
                 if (!isNullOrUndefined(this.selectedLI)) {
@@ -8306,9 +8398,9 @@ let AutoComplete = class AutoComplete extends ComboBox {
     /**
      * To filter the data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @param {Query} query - Specify the query to filter the data.
+     * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
      * @deprecated
      */
@@ -8348,7 +8440,9 @@ let AutoComplete = class AutoComplete extends ComboBox {
     postBackAction() {
         if (this.autofill && !isNullOrUndefined(this.liCollections[0]) && this.searchList) {
             const items = [this.liCollections[0]];
-            const searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase);
+            const dataSource = this.listData;
+            const type = this.typeOfData(dataSource).typeof;
+            const searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase, dataSource, this.fields, type);
             this.searchList = false;
             if (!isNullOrUndefined(searchItem.item)) {
                 super.setAutoFill(this.liCollections[0], true);
@@ -8875,7 +8969,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             for (const htmlAttr of Object.keys(this.htmlAttributes)) {
                 switch (htmlAttr) {
                     case 'class': {
-                        const updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\s+/g, ' ')).trim();
+                        const updatedClassValue = (this.htmlAttributes[`${htmlAttr}`].replace(/\s+/g, ' ')).trim();
                         if (updatedClassValue !== '') {
                             addClass([this.overAllWrapper], updatedClassValue.split(' '));
                             addClass([this.popupWrapper], updatedClassValue.split(' '));
@@ -8887,7 +8981,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         break;
                     case 'placeholder':
                         if (!this.placeholder) {
-                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
                             this.setProperties({ placeholder: this.inputElement.placeholder }, true);
                             this.refreshPlaceHolder();
                         }
@@ -8897,16 +8991,16 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         const validateAttr = ['name', 'required', 'aria-required', 'form'];
                         const containerAttr = ['title', 'role', 'style', 'class'];
                         if (defaultAttr.indexOf(htmlAttr) > -1) {
-                            this.element.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.element.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
                         }
                         else if (htmlAttr.indexOf('data') === 0 || validateAttr.indexOf(htmlAttr) > -1) {
-                            this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
                         }
                         else if (containerAttr.indexOf(htmlAttr) > -1) {
-                            this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
                         }
-                        else if (htmlAttr !== 'size') {
-                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                        else if (htmlAttr !== 'size' && !isNullOrUndefined(this.inputElement)) {
+                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
                         }
                         break;
                     }
@@ -8915,11 +9009,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     updateReadonly(state) {
-        if (state || this.mode === 'CheckBox') {
-            this.inputElement.setAttribute('readonly', 'true');
-        }
-        else {
-            this.inputElement.removeAttribute('readonly');
+        if (!isNullOrUndefined(this.inputElement)) {
+            if (state || this.mode === 'CheckBox') {
+                this.inputElement.setAttribute('readonly', 'true');
+            }
+            else {
+                this.inputElement.removeAttribute('readonly');
+            }
         }
     }
     updateClearButton(state) {
@@ -9061,8 +9157,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (!isNullOrUndefined(this.ulElement)) {
             attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
         }
-        const disableStatus = (this.inputElement.disabled) ? true : false;
-        if (!this.isPopupOpen()) {
+        const disableStatus = !isNullOrUndefined(this.inputElement) && (this.inputElement.disabled) ? true : false;
+        if (!this.isPopupOpen() && !isNullOrUndefined(this.inputElement)) {
             attributes(this.inputElement, this.getAriaAttributes());
         }
         if (disableStatus) {
@@ -9172,7 +9268,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.checkForCustomValue(this.tempQuery, this.fields);
             return;
         }
-        if (this.value && this.value.length && ((this.mode !== 'CheckBox' && this.inputElement.value.trim() !== '') ||
+        if (this.value && this.value.length && ((this.mode !== 'CheckBox' && !isNullOrUndefined(this.inputElement) && this.inputElement.value.trim() !== '') ||
             this.mode === 'CheckBox' || ((this.keyCode === 8 || this.keyCode === 46) && this.allowFiltering &&
             this.allowCustomValue && this.dataSource instanceof DataManager && this.inputElement.value === ''))) {
             this.refreshSelection();
@@ -9242,8 +9338,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     }
                     element.setAttribute('aria-selected', 'true');
                     if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {
-                        const ariaValue = element.firstElementChild.getAttribute('aria-checked');
-                        if (isNullOrUndefined(ariaValue) || ariaValue === 'false') {
+                        const ariaValue = element.getElementsByClassName('e-check').length;
+                        if (ariaValue === 0) {
                             const args = {
                                 module: 'CheckBoxSelection',
                                 enable: this.mode === 'CheckBox',
@@ -9367,9 +9463,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     /**
      * To filter the multiselect data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @param {Query} query - Specify the query to filter the data.
+     * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
      */
     filter(dataSource, query, fields) {
@@ -9636,11 +9732,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     refreshInputHight() {
-        if ((!this.value || !this.value.length) && (isNullOrUndefined(this.text) || this.text === '')) {
-            this.searchWrapper.classList.remove(ZERO_SIZE);
-        }
-        else {
-            this.searchWrapper.classList.add(ZERO_SIZE);
+        if (!isNullOrUndefined(this.searchWrapper)) {
+            if ((!this.value || !this.value.length) && (isNullOrUndefined(this.text) || this.text === '')) {
+                this.searchWrapper.classList.remove(ZERO_SIZE);
+            }
+            else {
+                this.searchWrapper.classList.add(ZERO_SIZE);
+            }
         }
     }
     validateValues(newValue, oldValue) {
@@ -10440,7 +10538,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         HIDE_LIST :
                         dropDownBaseClasses.selected);
                     if (this.mode === 'CheckBox') {
-                        element2.firstElementChild.setAttribute('aria-checked', 'false');
                         removeClass([element2.firstElementChild.lastElementChild], 'e-check');
                     }
                 }
@@ -10450,7 +10547,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         HIDE_LIST :
                         dropDownBaseClasses.selected);
                     if (this.mode === 'CheckBox') {
-                        element2.firstElementChild.setAttribute('aria-checked', 'true');
                         addClass([element2.firstElementChild.lastElementChild], 'e-check');
                     }
                 }
@@ -10708,109 +10804,111 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             super.render();
         }
         if (!this.popupObj) {
-            document.body.appendChild(this.popupWrapper);
-            const checkboxFilter = this.popupWrapper.querySelector('.' + FILTERPARENT);
-            if (this.mode === 'CheckBox' && !this.allowFiltering && checkboxFilter && this.filterParent) {
-                checkboxFilter.remove();
-                this.filterParent = null;
-            }
-            let overAllHeight = parseInt(this.popupHeight, 10);
-            this.popupWrapper.style.visibility = 'hidden';
-            if (this.headerTemplate) {
-                this.setHeaderTemplate();
-                overAllHeight -= this.header.offsetHeight;
-            }
-            append([this.list], this.popupWrapper);
-            if (this.footerTemplate) {
-                this.setFooterTemplate();
-                overAllHeight -= this.footer.offsetHeight;
-            }
-            if (this.mode === 'CheckBox' && this.showSelectAll) {
-                this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
-                overAllHeight -= this.selectAllHeight;
-            }
-            else if (this.mode === 'CheckBox' && !this.showSelectAll && (!this.headerTemplate && !this.footerTemplate)) {
-                this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
-                overAllHeight = parseInt(this.popupHeight, 10);
-            }
-            else if (this.mode === 'CheckBox' && !this.showSelectAll) {
-                this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
-                overAllHeight = parseInt(this.popupHeight, 10);
-                if (this.headerTemplate && this.header) {
+            if (!isNullOrUndefined(this.popupWrapper)) {
+                document.body.appendChild(this.popupWrapper);
+                const checkboxFilter = this.popupWrapper.querySelector('.' + FILTERPARENT);
+                if (this.mode === 'CheckBox' && !this.allowFiltering && checkboxFilter && this.filterParent) {
+                    checkboxFilter.remove();
+                    this.filterParent = null;
+                }
+                let overAllHeight = parseInt(this.popupHeight, 10);
+                this.popupWrapper.style.visibility = 'hidden';
+                if (this.headerTemplate) {
+                    this.setHeaderTemplate();
                     overAllHeight -= this.header.offsetHeight;
                 }
-                if (this.footerTemplate && this.footer) {
+                append([this.list], this.popupWrapper);
+                if (this.footerTemplate) {
+                    this.setFooterTemplate();
                     overAllHeight -= this.footer.offsetHeight;
                 }
-            }
-            if (this.mode === 'CheckBox') {
-                const args = {
-                    module: 'CheckBoxSelection',
-                    enable: this.mode === 'CheckBox',
-                    popupElement: this.popupWrapper
-                };
-                if (this.allowFiltering) {
-                    this.notify('searchBox', args);
-                    overAllHeight -= this.searchBoxHeight;
-                }
-                addClass([this.popupWrapper], 'e-checkbox');
-            }
-            if (this.popupHeight !== 'auto') {
-                this.list.style.maxHeight = formatUnit(overAllHeight);
-                this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);
-            }
-            else {
-                this.list.style.maxHeight = formatUnit(this.popupHeight);
-            }
-            this.popupObj = new Popup(this.popupWrapper, {
-                width: this.calcPopupWidth(), targetType: 'relative', position: { X: 'left', Y: 'bottom' },
-                relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,
-                enableRtl: this.enableRtl, zIndex: this.zIndex,
-                close: () => {
-                    if (this.popupObj.element.parentElement) {
-                        this.popupObj.unwireScrollEvents();
-                        // For restrict the page scrolling in safari browser
-                        const checkboxFilterInput = this.popupWrapper.querySelector('.' + FILTERINPUT);
-                        if (this.mode === 'CheckBox' && checkboxFilterInput && document.activeElement === checkboxFilterInput) {
-                            checkboxFilterInput.blur();
-                        }
-                        detach(this.popupObj.element);
-                    }
-                },
-                open: () => {
-                    this.popupObj.resolveCollision();
-                    if (!this.isFirstClick) {
-                        const ulElement = this.list.querySelector('ul');
-                        if (ulElement) {
-                            if (!(this.mode !== 'CheckBox' && (this.allowFiltering || this.allowCustomValue) &&
-                                this.targetElement().trim() !== '')) {
-                                this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
-                            }
-                        }
-                        this.isFirstClick = true;
+                if (this.mode === 'CheckBox' && this.showSelectAll) {
+                    this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                    overAllHeight -= this.selectAllHeight;
+                }
+                else if (this.mode === 'CheckBox' && !this.showSelectAll && (!this.headerTemplate && !this.footerTemplate)) {
+                    this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                    overAllHeight = parseInt(this.popupHeight, 10);
+                }
+                else if (this.mode === 'CheckBox' && !this.showSelectAll) {
+                    this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                    overAllHeight = parseInt(this.popupHeight, 10);
+                    if (this.headerTemplate && this.header) {
+                        overAllHeight -= this.header.offsetHeight;
                     }
-                    this.popupObj.wireScrollEvents();
-                    if (!(this.mode !== 'CheckBox' && (this.allowFiltering || this.allowCustomValue) &&
-                        this.targetElement().trim() !== '')) {
-                        this.loadTemplate();
+                    if (this.footerTemplate && this.footer) {
+                        overAllHeight -= this.footer.offsetHeight;
                     }
-                    this.setScrollPosition();
+                }
+                if (this.mode === 'CheckBox') {
+                    const args = {
+                        module: 'CheckBoxSelection',
+                        enable: this.mode === 'CheckBox',
+                        popupElement: this.popupWrapper
+                    };
                     if (this.allowFiltering) {
-                        this.notify('inputFocus', {
-                            module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'focus'
-                        });
+                        this.notify('searchBox', args);
+                        overAllHeight -= this.searchBoxHeight;
                     }
-                }, targetExitViewport: () => {
-                    if (!Browser.isDevice) {
-                        this.hidePopup();
+                    addClass([this.popupWrapper], 'e-checkbox');
+                }
+                if (this.popupHeight !== 'auto') {
+                    this.list.style.maxHeight = formatUnit(overAllHeight);
+                    this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);
+                }
+                else {
+                    this.list.style.maxHeight = formatUnit(this.popupHeight);
+                }
+                this.popupObj = new Popup(this.popupWrapper, {
+                    width: this.calcPopupWidth(), targetType: 'relative', position: { X: 'left', Y: 'bottom' },
+                    relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,
+                    enableRtl: this.enableRtl, zIndex: this.zIndex,
+                    close: () => {
+                        if (this.popupObj.element.parentElement) {
+                            this.popupObj.unwireScrollEvents();
+                            // For restrict the page scrolling in safari browser
+                            const checkboxFilterInput = this.popupWrapper.querySelector('.' + FILTERINPUT);
+                            if (this.mode === 'CheckBox' && checkboxFilterInput && document.activeElement === checkboxFilterInput) {
+                                checkboxFilterInput.blur();
+                            }
+                            detach(this.popupObj.element);
+                        }
+                    },
+                    open: () => {
+                        this.popupObj.resolveCollision();
+                        if (!this.isFirstClick) {
+                            const ulElement = this.list.querySelector('ul');
+                            if (ulElement) {
+                                if (!(this.mode !== 'CheckBox' && (this.allowFiltering || this.allowCustomValue) &&
+                                    this.targetElement().trim() !== '')) {
+                                    this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
+                                }
+                            }
+                            this.isFirstClick = true;
+                        }
+                        this.popupObj.wireScrollEvents();
+                        if (!(this.mode !== 'CheckBox' && (this.allowFiltering || this.allowCustomValue) &&
+                            this.targetElement().trim() !== '')) {
+                            this.loadTemplate();
+                        }
+                        this.setScrollPosition();
+                        if (this.allowFiltering) {
+                            this.notify('inputFocus', {
+                                module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'focus'
+                            });
+                        }
+                    }, targetExitViewport: () => {
+                        if (!Browser.isDevice) {
+                            this.hidePopup();
+                        }
                     }
+                });
+                if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
+                    this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
                 }
-            });
-            if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
-                this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                this.popupObj.close();
+                this.popupWrapper.style.visibility = '';
             }
-            this.popupObj.close();
-            this.popupWrapper.style.visibility = '';
         }
     }
     setHeaderTemplate() {
@@ -11071,7 +11169,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         let temp;
         const tempData = this.listData;
         this.listData = this.mainData;
-        this.hiddenElement.innerHTML = '';
+        if (!isNullOrUndefined(this.hiddenElement)) {
+            this.hiddenElement.innerHTML = '';
+        }
         if (!isNullOrUndefined(this.value)) {
             for (let index = 0; !isNullOrUndefined(this.value[index]); index++) {
                 const listValue = this.findListElement(((!isNullOrUndefined(this.mainList)) ? this.mainList : this.ulElement), 'li', 'data-value', this.value[index]);
@@ -11089,7 +11189,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     data += temp + delimiterChar + ' ';
                     text.push(temp);
                 }
-                this.hiddenElement.innerHTML += '<option selected value ="' + this.value[index] + '">' + index + '</option>';
+                if (!isNullOrUndefined(this.hiddenElement)) {
+                    this.hiddenElement.innerHTML += '<option selected value ="' + this.value[index] + '">' + index + '</option>';
+                }
             }
         }
         this.setProperties({ text: text.toString() }, true);
@@ -11300,10 +11402,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     selectItems[temp1 - 1].setAttribute('aria-selected', 'false');
                     if (this.mode === 'CheckBox') {
                         if (selectedItems && (selectedItems.length > (temp1 - 1))) {
-                            selectedItems[temp1 - 1].firstElementChild.setAttribute('aria-checked', 'false');
                             removeClass([selectedItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');
                         }
-                        selectItems[temp1 - 1].firstElementChild.setAttribute('aria-checked', 'false');
                         removeClass([selectItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');
                     }
                     temp1--;
@@ -11361,9 +11461,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             addClass([element], className);
             this.updateMainList(false, element.getAttribute('data-value'), mainElement);
             element.setAttribute('aria-selected', 'true');
-            if (this.mode === 'CheckBox') {
-                const ariaCheck = element.firstElementChild.getAttribute('aria-checked');
-                if (ariaCheck === 'false' || isNullOrUndefined(ariaCheck)) {
+            if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {
+                const ariaCheck = element.getElementsByClassName('e-check').length;
+                if (ariaCheck === 0) {
                     this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: this });
                 }
             }
@@ -11681,9 +11781,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.chipCollectionWrapper) {
             this.chipCollectionWrapper.style.display = 'none';
         }
-        this.viewWrapper.style.display = '';
-        this.viewWrapper.style.width = '';
-        this.viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER$1);
+        if (!isNullOrUndefined(this.viewWrapper)) {
+            this.viewWrapper.style.display = '';
+            this.viewWrapper.style.width = '';
+            this.viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER$1);
+        }
         if (this.value && this.value.length) {
             let data = '';
             let temp;
@@ -11771,8 +11873,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         }
         else {
-            this.viewWrapper.innerHTML = '';
-            this.viewWrapper.style.display = 'none';
+            if (!isNullOrUndefined(this.viewWrapper)) {
+                this.viewWrapper.innerHTML = '';
+                this.viewWrapper.style.display = 'none';
+            }
         }
     }
     checkClearIconWidth() {
@@ -11845,29 +11949,41 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         return temp;
     }
     unWireEvent() {
-        EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);
+        if (!isNullOrUndefined(this.componentWrapper)) {
+            EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);
+        }
         EventHandler.remove(window, 'resize', this.windowResize);
-        EventHandler.remove(this.inputElement, 'focus', this.focusInHandler);
-        EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);
-        if (this.mode !== 'CheckBox') {
-            EventHandler.remove(this.inputElement, 'input', this.onInput);
+        if (!isNullOrUndefined(this.inputElement)) {
+            EventHandler.remove(this.inputElement, 'focus', this.focusInHandler);
+            EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);
+            if (this.mode !== 'CheckBox') {
+                EventHandler.remove(this.inputElement, 'input', this.onInput);
+            }
+            EventHandler.remove(this.inputElement, 'keyup', this.keyUp);
+            const formElement = closest(this.inputElement, 'form');
+            if (formElement) {
+                EventHandler.remove(formElement, 'reset', this.resetValueHandler);
+            }
+            EventHandler.remove(this.inputElement, 'blur', this.onBlurHandler);
         }
-        EventHandler.remove(this.inputElement, 'keyup', this.keyUp);
-        const formElement = closest(this.inputElement, 'form');
-        if (formElement) {
-            EventHandler.remove(formElement, 'reset', this.resetValueHandler);
+        if (!isNullOrUndefined(this.componentWrapper)) {
+            EventHandler.remove(this.componentWrapper, 'mouseover', this.mouseIn);
+            EventHandler.remove(this.componentWrapper, 'mouseout', this.mouseOut);
+        }
+        if (!isNullOrUndefined(this.overAllClear)) {
+            EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);
+        }
+        if (!isNullOrUndefined(this.inputElement)) {
+            EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
         }
-        EventHandler.remove(this.inputElement, 'blur', this.onBlurHandler);
-        EventHandler.remove(this.componentWrapper, 'mouseover', this.mouseIn);
-        EventHandler.remove(this.componentWrapper, 'mouseout', this.mouseOut);
-        EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);
-        EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
     }
     selectAllItem(state, event, list) {
         let li;
-        li = this.list.querySelectorAll(state ?
-            'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide)' :
-            'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
+        if (!isNullOrUndefined(this.list)) {
+            li = this.list.querySelectorAll(state ?
+                'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide)' :
+                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
+        }
         if (this.value && this.value.length && event && event.target
             && closest(event.target, '.e-close-hooker') && this.allowFiltering) {
             li = this.mainList.querySelectorAll(state ?
@@ -12364,7 +12480,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
      * Adds a new item to the multiselect popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
      */
@@ -12671,11 +12787,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     addValidInputClass() {
-        if ((!isNullOrUndefined(this.value) && this.value.length) || this.floatLabelType === 'Always') {
-            addClass([this.overAllWrapper], 'e-valid-input');
-        }
-        else {
-            removeClass([this.overAllWrapper], 'e-valid-input');
+        if (!isNullOrUndefined(this.overAllWrapper)) {
+            if ((!isNullOrUndefined(this.value) && this.value.length) || this.floatLabelType === 'Always') {
+                addClass([this.overAllWrapper], 'e-valid-input');
+            }
+            else {
+                removeClass([this.overAllWrapper], 'e-valid-input');
+            }
         }
     }
     dropDownIcon() {
@@ -12728,13 +12846,17 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         super.destroy();
         const temp = ['readonly', 'aria-disabled', 'placeholder'];
         let length = temp.length;
-        while (length > 0) {
-            this.inputElement.removeAttribute(temp[length - 1]);
-            length--;
+        if (!isNullOrUndefined(this.inputElement)) {
+            while (length > 0) {
+                this.inputElement.removeAttribute(temp[length - 1]);
+                length--;
+            }
         }
-        this.element.removeAttribute('data-initial-value');
-        this.element.style.display = 'block';
-        if (this.overAllWrapper.parentElement) {
+        if (!isNullOrUndefined(this.element)) {
+            this.element.removeAttribute('data-initial-value');
+            this.element.style.display = 'block';
+        }
+        if (this.overAllWrapper && this.overAllWrapper.parentElement) {
             if (this.overAllWrapper.parentElement.tagName === this.getNgDirective()) {
                 remove(this.overAllWrapper);
             }
@@ -12743,6 +12865,25 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 remove(this.overAllWrapper);
             }
         }
+        this.componentWrapper = null;
+        this.overAllClear = null;
+        this.overAllWrapper = null;
+        this.hiddenElement = null;
+        this.searchWrapper = null;
+        this.viewWrapper = null;
+        this.chipCollectionWrapper = null;
+        this.targetInputElement = null;
+        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;
     }
 };
 __decorate$5([
@@ -13092,6 +13233,12 @@ class CheckBoxSelection {
     destroy() {
         this.removeEventListener();
         EventHandler.remove(document, 'mousedown', this.onDocumentClick);
+        this.checkAllParent = null;
+        this.clearIconElement = null;
+        this.filterInput = null;
+        this.filterInputObj = null;
+        this.checkWrapper = null;
+        this.selectAllSpan = null;
     }
     listSelection(args) {
         let target;
@@ -13140,12 +13287,10 @@ class CheckBoxSelection {
         e.preventDefault();
     }
     changeState(wrapper, state, e, isPrevent, selectAll$$1) {
-        let ariaState;
         const frameSpan = wrapper.getElementsByClassName(CHECKBOXFRAME$1)[0];
         if (state === 'check' && !frameSpan.classList.contains(CHECK$1)) {
             frameSpan.classList.remove(INDETERMINATE);
             frameSpan.classList.add(CHECK$1);
-            ariaState = 'true';
             if (selectAll$$1) {
                 this.parent.selectAllItems(true, e);
                 this.setLocale(true);
@@ -13153,7 +13298,6 @@ class CheckBoxSelection {
         }
         else if (state === 'uncheck' && (frameSpan.classList.contains(CHECK$1) || frameSpan.classList.contains(INDETERMINATE))) {
             removeClass([frameSpan], [CHECK$1, INDETERMINATE]);
-            ariaState = 'false';
             if (selectAll$$1) {
                 this.parent.selectAllItems(false, e);
                 this.setLocale();
@@ -13162,16 +13306,11 @@ class CheckBoxSelection {
         else if (state === 'indeterminate' && !(frameSpan.classList.contains(INDETERMINATE))) {
             removeClass([frameSpan], [CHECK$1]);
             frameSpan.classList.add(INDETERMINATE);
-            ariaState = 'false';
             if (selectAll$$1) {
                 this.parent.selectAllItems(false, e);
                 this.setLocale();
             }
         }
-        ariaState = state === 'check' ? 'true' : state === 'uncheck' ? 'false' : ariaState;
-        if (!isNullOrUndefined(ariaState)) {
-            wrapper.setAttribute('aria-checked', ariaState);
-        }
     }
     setSearchBox(args) {
         if (isNullOrUndefined(this.parent.filterParent)) {
@@ -13332,8 +13471,8 @@ class CheckBoxSelection {
                     e.preventDefault();
                 }
             }
-            if (!(!isNullOrUndefined(this.parent.popupObj) && closest(target, '[id="' + this.parent.popupObj.element.id + '"]')) &&
-                !this.parent.overAllWrapper.contains(e.target)) {
+            if (!(!isNullOrUndefined(this.parent.popupObj) && closest(target, '[id="' + this.parent.popupObj.element.id + '"]'))
+                && !isNullOrUndefined(this.parent.overAllWrapper) && !this.parent.overAllWrapper.contains(e.target)) {
                 if (this.parent.overAllWrapper.classList.contains(dropDownBaseClasses.focus) || this.parent.isPopupOpen()) {
                     this.parent.inputFocus = false;
                     this.parent.scrollFocusStatus = false;
@@ -13346,7 +13485,7 @@ class CheckBoxSelection {
                 this.parent.scrollFocusStatus = (Browser.isIE || Browser.info.name === 'edge') &&
                     (document.activeElement === this.filterInput);
             }
-            if (!this.parent.overAllWrapper.contains(e.target) && this.parent.overAllWrapper.classList.contains('e-input-focus') &&
+            if (!isNullOrUndefined(this.parent.overAllWrapper) && !this.parent.overAllWrapper.contains(e.target) && this.parent.overAllWrapper.classList.contains('e-input-focus') &&
                 !this.parent.isPopupOpen()) {
                 if (Browser.isIE) {
                     this.parent.onBlurHandler();
@@ -13377,7 +13516,7 @@ class CheckBoxSelection {
         }
     }
     checkSelectAll(e) {
-        if (e.value === 'check' && this.checkAllParent.getAttribute('aria-checked') !== 'true') {
+        if (e.value === 'check') {
             this.changeState(this.checkAllParent, e.value, null, null, false);
             this.setLocale(true);
         }
@@ -13534,6 +13673,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         this.isCustomFiltering = false;
         this.initialSelectedOptions = this.value;
         super.render();
+        this.setEnabled();
         this.renderComplete();
     }
     initWrapper() {
@@ -13824,14 +13964,14 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     triggerDrag(args) {
         let scrollParent;
         let boundRect;
-        let scrollMoved = 36;
+        const scrollMoved = 36;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let event = args.event;
+        const event = args.event;
         let wrapper;
-        if (args.target && (args.target.classList.contains("e-listbox-wrapper") || args.target.classList.contains("e-list-item")
-            || args.target.classList.contains("e-filter-parent") || args.target.classList.contains("e-input-group"))) {
-            if (args.target.classList.contains("e-list-item") || args.target.classList.contains("e-filter-parent")
-                || args.target.classList.contains("e-input-group")) {
+        if (args.target && (args.target.classList.contains('e-listbox-wrapper') || args.target.classList.contains('e-list-item')
+            || args.target.classList.contains('e-filter-parent') || args.target.classList.contains('e-input-group'))) {
+            if (args.target.classList.contains('e-list-item') || args.target.classList.contains('e-filter-parent')
+                || args.target.classList.contains('e-input-group')) {
                 wrapper = args.target.closest('.e-listbox-wrapper');
             }
             else {
@@ -13885,7 +14025,8 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         const getArgs = this.getDragArgs({ target: args.droppedElement }, true);
         const sourceArgs = { previousData: this.dataSource };
         const destArgs = { previousData: listObj.dataSource };
-        let dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource }, previousIndex: args.previousIndex, currentIndex: args.currentIndex });
+        let dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource },
+            previousIndex: args.previousIndex, currentIndex: args.currentIndex });
         if (listObj !== this) {
             const sourceArgs1 = extend(sourceArgs, { currentData: this.listData });
             dragArgs = extend(dragArgs, { source: sourceArgs1, destination: destArgs });
@@ -13979,14 +14120,14 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 currIdx++;
             });
             if (this.fields.groupBy) {
-                let sourceElem = this.renderItems(this.listData, this.fields);
+                const sourceElem = this.renderItems(this.listData, this.fields);
                 this.updateListItems(sourceElem, this.ulElement);
                 this.setSelection();
             }
             if (listObj.sortOrder !== 'None' || this.selectionSettings.showCheckbox
                 !== listObj.selectionSettings.showCheckbox || listObj.fields.groupBy || listObj.itemTemplate || this.itemTemplate) {
                 const sortable = getComponent(ul, 'sortable');
-                let sourceElem = listObj.renderItems(listData, listObj.fields);
+                const sourceElem = listObj.renderItems(listData, listObj.fields);
                 listObj.updateListItems(sourceElem, ul);
                 this.setSelection();
                 if (sortable.placeHolderElement) {
@@ -14022,7 +14163,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     }
     updateListItems(sourceElem, destElem) {
         const i = 0;
-        destElem.innerHTML = "";
+        destElem.innerHTML = '';
         while (i < sourceElem.childNodes.length) {
             destElem.appendChild(sourceElem.childNodes[i]);
         }
@@ -14051,6 +14192,14 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
         return listObj;
     }
+    /**
+     * Sets the enabled state to DropDownBase.
+     *
+     * @returns {void}
+     */
+    setEnabled() {
+        this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');
+    }
     listOption(dataSource, fields) {
         this.listCurrentOptions = super.listOption(dataSource, fields);
         this.listCurrentOptions = extend({}, this.listCurrentOptions, { itemCreated: this.triggerBeforeItemRender.bind(this) }, true);
@@ -14082,7 +14231,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     enableItems(items, enable = true, isValue) {
         let li;
         items.forEach((item) => {
-            let text = item;
+            const text = item;
             li = this.findListElement(this.list, 'li', 'data-value', isValue ? text : this.getValueByText(text));
             if (!li) {
                 return;
@@ -14487,9 +14636,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             prepend([this.filterParent], this.list);
             attributes(this.filterInput, {
                 'aria-disabled': 'false',
-                'aria-owns': this.element.id + '_options',
-                'role': 'listbox',
-                'aria-activedescendant': null,
+                'aria-label': 'search list item',
                 'autocomplete': 'off',
                 'autocorrect': 'off',
                 'autocapitalize': 'off',
@@ -14813,7 +14960,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             });
             if (isRefresh) {
                 if (fListBox.fields.groupBy) {
-                    let sourceElem = fListBox.renderItems(listData, fListBox.fields);
+                    const sourceElem = fListBox.renderItems(listData, fListBox.fields);
                     fListBox.updateListItems(sourceElem, fListBox.ulElement);
                 }
                 else {
@@ -14846,7 +14993,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             tListBox.jsonData = tJsonData;
             tListBox.sortedData = tSortData;
             if (isRefresh) {
-                let sourceElem = tListBox.renderItems(tListData, tListBox.fields);
+                const sourceElem = tListBox.renderItems(tListData, tListBox.fields);
                 tListBox.updateListItems(sourceElem, tListBox.ulElement);
                 tListBox.setSelection();
                 fListBox.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
@@ -14932,7 +15079,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         listData = listData
             .filter((data) => data.isHeader !== true);
         tListBox.listData = tListBox.jsonData = listData;
-        if (fListBox.listData.length == fListBox.jsonData.length) {
+        if (fListBox.listData.length === fListBox.jsonData.length) {
             fListBox.listData = fListBox.sortedData = fListBox.jsonData = [];
         }
         else if (this.allowFiltering) {
@@ -14946,7 +15093,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             fListBox.listData = fListBox.sortedData = [];
         }
         if (isRefresh) {
-            let sourceElem = tListBox.renderItems(listData, tListBox.fields);
+            const sourceElem = tListBox.renderItems(listData, tListBox.fields);
             tListBox.updateListItems(sourceElem, tListBox.ulElement);
             this.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
         }
@@ -15077,7 +15224,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                     }
                 }
             }
-            else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== "KeyA") {
+            else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== 'KeyA') {
                 this.upDownKeyHandler(e);
             }
         }
@@ -15120,9 +15267,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 this.selectHandler({ target: ul.children[fliIdx], ctrlKey: e.ctrlKey, shiftKey: e.shiftKey }, true);
             }
             if (this.selectionSettings.showCheckbox && e.ctrlKey && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
-                let selectedidx = Array.prototype.indexOf.call(ul.children, fli);
-                let sidx = e.code === "Home" ? 0 : selectedidx;
-                let eidx = e.code === "Home" ? selectedidx : ul.children.length - 1;
+                const selectedidx = Array.prototype.indexOf.call(ul.children, fli);
+                const sidx = e.code === 'Home' ? 0 : selectedidx;
+                const eidx = e.code === 'Home' ? selectedidx : ul.children.length - 1;
                 for (let i = sidx; i <= eidx; i++) {
                     const item = ul.children[i];
                     this.notify('updatelist', { li: item, e: {
@@ -15276,7 +15423,6 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 dvalue = this.getFormattedValue(li.getAttribute('data-value'));
                 if (values.indexOf(dvalue) < 0) {
                     li.getElementsByClassName('e-check')[0].classList.remove('e-check');
-                    li.getElementsByClassName('e-checkbox-wrapper')[0].removeAttribute('aria-checked');
                     li.removeAttribute('aria-selected');
                 }
             });
@@ -15622,6 +15768,12 @@ __decorate$6([
 __decorate$6([
     Property('')
 ], ListBox.prototype, "height", void 0);
+__decorate$6([
+    Property(true)
+], ListBox.prototype, "enabled", void 0);
+__decorate$6([
+    Property(false)
+], ListBox.prototype, "enablePersistence", void 0);
 __decorate$6([
     Property(false)
 ], ListBox.prototype, "allowDragAndDrop", void 0);
@@ -15779,6 +15931,7 @@ let Mention = class Mention extends DropDownBase {
         this.isFiltered = false;
         this.beforePopupOpen = false;
         this.initRemoteRender = false;
+        this.isListResetted = false;
         this.isPopupOpen = false;
         this.isCollided = false;
         this.lineBreak = false;
@@ -15845,6 +15998,7 @@ let Mention = class Mention extends DropDownBase {
     /**
      * Hides the spinner loader.
      *
+     * @private
      * @returns {void}
      */
     hideSpinner() {
@@ -15900,6 +16054,7 @@ let Mention = class Mention extends DropDownBase {
                 break;
             case 'tab':
                 if (this.isPopupOpen) {
+                    e.preventDefault();
                     const li = this.list.querySelector('.' + dropDownBaseClasses.selected);
                     if (li) {
                         this.setSelection(li, e);
@@ -15939,7 +16094,8 @@ let Mention = class Mention extends DropDownBase {
             let startIndex = 0;
             startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;
             index = index < 0 ? this.liCollections.length - 1 : index === this.liCollections.length ? 0 : index;
-            const nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex] : this.liCollections[index];
+            const nextItem = isNullOrUndefined(this.activeIndex) ?
+                this.liCollections[startIndex] : this.liCollections[index];
             if (!isNullOrUndefined(nextItem)) {
                 this.setSelection(nextItem, e);
             }
@@ -15964,9 +16120,14 @@ let Mention = class Mention extends DropDownBase {
         }
         let currentRange = this.getTextRange();
         const lastWordRange = this.getLastLetter(currentRange);
+        // eslint-disable-next-line security/detect-non-literal-regexp
         const Regex = new RegExp(this.mentionChar, 'g');
         const charRegex = new RegExp('[a-zA-Z]', 'g');
         if (e.key === 'Shift' || e.keyCode === 37 || e.keyCode === 39) {
+            if ((e.keyCode === 37 || e.keyCode === 39) && !isNullOrUndefined(currentRange) &&
+                currentRange.indexOf(this.mentionChar) === -1 && this.isPopupOpen) {
+                this.hidePopup();
+            }
             return;
         }
         if ((!currentRange || !lastWordRange) || e.code === 'Enter' || e.keyCode === 27 ||
@@ -15995,7 +16156,7 @@ let Mention = class Mention extends DropDownBase {
                 if (!this.isContentEditable(this.inputElement)) {
                     this.showPopup();
                 }
-                else if (this.isContentEditable(this.inputElement) && this.range && this.range.startContainer !== this.inputElement) {
+                else if (this.isContentEditable(this.inputElement) && this.range && this.range.startContainer !== this.inputElement && e.keyCode !== 9) {
                     this.showPopup();
                 }
             }
@@ -16024,8 +16185,12 @@ let Mention = class Mention extends DropDownBase {
             this.searchLists(e);
         }
         else if (this.queryString === '' && this.isPopupOpen && e.keyCode !== 38 && e.keyCode !== 40) {
-            this.resetList(this.dataSource, this.fields);
+            this.searchLists(e);
+            if (!this.isListResetted) {
+                this.resetList(this.dataSource, this.fields);
+            }
         }
+        this.isListResetted = false;
     }
     isMatchedText() {
         let isMatched = false;
@@ -16058,7 +16223,7 @@ let Mention = class Mention extends DropDownBase {
         this.activeIndex = null;
         const eventArgs = {
             preventDefaultAction: false,
-            text: this.elementValue(),
+            text: this.queryString,
             updateData: (dataSource, query, fields) => {
                 if (eventArgs.cancel) {
                     return;
@@ -16076,8 +16241,9 @@ let Mention = class Mention extends DropDownBase {
     }
     filterAction(dataSource, query, fields) {
         this.beforePopupOpen = true;
-        if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {
+        if (this.queryString.length >= this.minLength) {
             this.resetList(dataSource, fields, query);
+            this.isListResetted = true;
         }
         else {
             if (this.isPopupOpen) {
@@ -16198,12 +16364,14 @@ let Mention = class Mention extends DropDownBase {
             }
         }
         else {
-            const selectedElem = this.range.startContainer;
-            if (!isNullOrUndefined(selectedElem)) {
-                const workingNodeContent = selectedElem.textContent;
-                let selectStartOffset = this.range.startOffset;
-                if (workingNodeContent && selectStartOffset >= 0) {
-                    text = workingNodeContent.substring(0, selectStartOffset);
+            if (this.range) {
+                const selectedElem = this.range.startContainer;
+                if (!isNullOrUndefined(selectedElem)) {
+                    const workingNodeContent = selectedElem.textContent;
+                    const selectStartOffset = this.range.startOffset;
+                    if (workingNodeContent && selectStartOffset >= 0) {
+                        text = workingNodeContent.substring(0, selectStartOffset);
+                    }
                 }
             }
         }
@@ -16215,7 +16383,7 @@ let Mention = class Mention extends DropDownBase {
         }
         const textValue = text.replace(/\u00A0/g, ' ');
         const words = textValue.split(/\s+/);
-        let wordCnt = words.length - 1;
+        const wordCnt = words.length - 1;
         return words[wordCnt].trim();
     }
     isContentEditable(element) {
@@ -16227,6 +16395,10 @@ let Mention = class Mention extends DropDownBase {
      * @returns {void}
      */
     showPopup() {
+        this.beforePopupOpen = true;
+        if (isNullOrUndefined(this.list)) {
+            this.initValue();
+        }
         this.renderPopup();
         attributes(this.inputElement, { 'aria-activedescendant': this.selectedElementID });
         if (this.selectedElementID == null) {
@@ -16290,18 +16462,13 @@ let Mention = class Mention extends DropDownBase {
                     }
                 }
                 append([this.list], popupEle);
-                if ((!this.popupObj || !document.body.contains(this.popupObj.element)) || !document.contains(popupEle) && isNullOrUndefined(this.target)) {
+                if ((!this.popupObj || !document.body.contains(this.popupObj.element)) ||
+                    !document.contains(popupEle) && isNullOrUndefined(this.target)) {
                     document.body.appendChild(popupEle);
                 }
                 let coordinates;
                 popupEle.style.visibility = 'hidden';
-                if (this.popupHeight !== 'auto') {
-                    this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
-                    popupEle.style.maxHeight = formatUnit(this.popupHeight);
-                }
-                else {
-                    popupEle.style.height = 'auto';
-                }
+                this.setHeight(popupEle);
                 const offsetValue = 0;
                 const left = 0;
                 this.initializePopup(popupEle, offsetValue, left);
@@ -16324,6 +16491,9 @@ let Mention = class Mention extends DropDownBase {
                     if (!eventArgs.cancel) {
                         this.renderReactTemplates();
                         this.popupObj.show(new Animation(eventArgs.animation), (this.zIndex === 1000) ? this.inputElement : null);
+                        if (isNullOrUndefined(this.getTriggerCharPosition())) {
+                            return;
+                        }
                         coordinates = this.getCoordinates(this.inputElement, this.getTriggerCharPosition());
                         if (!this.isCollided) {
                             popupEle.style.cssText = 'top: '.concat(coordinates.top.toString(), 'px;\n left: ').concat(coordinates.left.toString(), 'px;\nposition: absolute;\n display: block;');
@@ -16333,6 +16503,8 @@ let Mention = class Mention extends DropDownBase {
                             this.isCollided = false;
                         }
                         popupEle.style.width = this.popupWidth !== '100%' && !isNullOrUndefined(this.popupWidth) ? formatUnit(this.popupWidth) : 'auto';
+                        this.setHeight(popupEle);
+                        popupEle.style.zIndex = this.zIndex === 1000 ? getZindexPartial(popupEle).toString() : this.zIndex.toString();
                     }
                     else {
                         this.beforePopupOpen = false;
@@ -16345,6 +16517,15 @@ let Mention = class Mention extends DropDownBase {
             }
         });
     }
+    setHeight(popupEle) {
+        if (this.popupHeight !== 'auto') {
+            this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
+            popupEle.style.maxHeight = formatUnit(this.popupHeight);
+        }
+        else {
+            popupEle.style.height = 'auto';
+        }
+    }
     checkCollision(popupEle) {
         if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'mention'))) {
             const collision = isCollide(popupEle);
@@ -16424,7 +16605,9 @@ let Mention = class Mention extends DropDownBase {
             computed = getComputedStyle(element);
             div.style.position = 'absolute';
             div.style.visibility = 'hidden';
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             properties.forEach((prop) => {
+                // eslint-disable-next-line security/detect-object-injection
                 div.style[prop] = computed[prop];
             });
             div.textContent = element.value.substring(0, position);
@@ -16458,13 +16641,12 @@ let Mention = class Mention extends DropDownBase {
         }
         else {
             coordinates = {
-                top: rect.top + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize),
+                top: rect.top + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize, 10),
                 left: rect.left + windowLeft
             };
         }
         return coordinates;
     }
-    ;
     initValue() {
         this.renderList();
         if (this.dataSource instanceof DataManager) {
@@ -16599,7 +16781,7 @@ let Mention = class Mention extends DropDownBase {
             const nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;
             let nextOffset = this.list.scrollTop + nextBottom - currentOffset;
             nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset;
-            let boxRange = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;
+            const boxRange = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;
             if (this.activeIndex === 0) {
                 this.list.scrollTop = 0;
             }
@@ -16659,8 +16841,8 @@ let Mention = class Mention extends DropDownBase {
         }
         return items;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     setValue(e) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (!this.isReact) {
             if (!isNullOrUndefined(this.displayTemplate)) {
                 this.setDisplayTemplate();
@@ -16688,12 +16870,12 @@ let Mention = class Mention extends DropDownBase {
         const selection = this.inputElement.ownerDocument.getSelection();
         const startPos = this.getTriggerCharPosition();
         textSuffix = typeof this.suffixText === 'string' ? this.suffixText : '';
-        if (dataItem.value !== null) {
+        if (dataItem.text !== null) {
             value = this.mentionVal(dataItem.text);
         }
         if (!this.isContentEditable(this.inputElement)) {
             const myField = this.inputElement;
-            let currentTriggerSnippet = this.getTextRange().substring(startPos + this.mentionChar.length, this.getTextRange().length);
+            const currentTriggerSnippet = this.getTextRange().substring(startPos + this.mentionChar.length, this.getTextRange().length);
             value += textSuffix;
             endPos = startPos + this.mentionChar.length;
             endPos += currentTriggerSnippet.length;
@@ -16720,6 +16902,7 @@ let Mention = class Mention extends DropDownBase {
             const frag = document.createDocumentFragment();
             let node;
             let lastNode;
+            // eslint-disable-next-line no-cond-assign
             while (node = element.firstChild) {
                 lastNode = frag.appendChild(node);
             }
@@ -16738,7 +16921,7 @@ let Mention = class Mention extends DropDownBase {
         }
     }
     mentionVal(value) {
-        let showChar = this.showMentionChar ? this.mentionChar : '';
+        const showChar = this.showMentionChar ? this.mentionChar : '';
         if (!isNullOrUndefined(this.displayTemplate) && !isNullOrUndefined(this.displayTempElement)) {
             value = this.displayTempElement.innerHTML;
         }
@@ -16774,6 +16957,7 @@ let Mention = class Mention extends DropDownBase {
                 this.displayTempElement.appendChild(displayCompTemp[i]);
             }
         }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (!this.isReact) {
             this.renderTemplates();
         }
@@ -16783,6 +16967,7 @@ let Mention = class Mention extends DropDownBase {
             });
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     renderTemplates(callBack) {
         this.renderReactTemplates(callBack);
     }
@@ -16811,6 +16996,7 @@ let Mention = class Mention extends DropDownBase {
                 this.spinnerTemplateElement.appendChild(spinnerCompTemp[i]);
             }
         }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (!this.isReact) {
             this.renderTemplates();
             this.popupObj.element.appendChild(this.spinnerTemplateElement);
@@ -16905,7 +17091,7 @@ let Mention = class Mention extends DropDownBase {
         this.setHover(currentLi);
     }
     setHover(li) {
-        if (this.enabled && this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {
+        if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {
             this.removeHover();
             addClass([li], dropDownBaseClasses.hover);
         }
@@ -16930,8 +17116,13 @@ let Mention = class Mention extends DropDownBase {
      * @returns {void}
      */
     search(text, positionX, positionY) {
-        if ((this.ignoreCase && (text === this.elementValue() || text === this.elementValue().toLowerCase()))
-            || !this.ignoreCase && text === this.elementValue()) {
+        if (this.isContentEditable(this.inputElement)) {
+            this.range = this.getCurrentRange();
+        }
+        const currentRange = this.getTextRange();
+        const lastWordRange = this.getLastLetter(currentRange);
+        if ((this.ignoreCase && (text === lastWordRange || text === lastWordRange.toLowerCase()))
+            || !this.ignoreCase && text === lastWordRange) {
             this.resetList(this.dataSource, this.fields);
         }
         else {