@syncfusion/ej2-dropdowns 20.3.59 → 20.4.38

package/dist/es6/ej2-dropdowns.es5.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
- */
 var queryString = '';
 var prevString = '';
 var 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) {
     var listItems = items;
     ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;
     var itemData = { item: null, index: null };
@@ -89,14 +86,32 @@ function Search(inputVal, items, searchType, ignoreCase) {
         var strLength = inputVal.length;
         var queryStr = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;
         queryStr = escapeCharRegExp(queryStr);
-        for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {
+        var _loop_1 = function (i, itemsData) {
             var item = itemsData[i];
-            var text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
+            var text = void 0;
+            var filterValue;
+            if (items && dataSource) {
+                var checkField_1 = item;
+                var fieldValue_1 = fields.text.split('.');
+                dataSource.filter(function (data) {
+                    Array.prototype.slice.call(fieldValue_1).forEach(function (value) {
+                        if (type === 'object' && checkField_1.textContent.toString().indexOf(data[value]) !== -1 && checkField_1.getAttribute('data-value') === data[fields.value] || type === 'string' && checkField_1.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;
-                return { item: item, index: i };
+                return { value: { item: item, index: i } };
             }
+        };
+        for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {
+            var state_1 = _loop_1(i, itemsData);
+            if (typeof state_1 === "object")
+                return state_1.value;
         }
         return itemData;
     }
@@ -444,7 +459,9 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 liElem.setAttribute('role', 'option');
             }
             else {
-                ele.innerHTML = content;
+                if (!isNullOrUndefined(ele)) {
+                    ele.innerHTML = content;
+                }
             }
         }
     };
@@ -475,14 +492,16 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     DropDownBase.prototype.setEnableRtl = function () {
-        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);
+            }
         }
     };
     /**
@@ -520,14 +539,6 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
     DropDownBase.prototype.getPersistData = function () {
         return this.addOnPersist([]);
     };
-    /**
-     * Sets the enabled state to DropDownBase.
-     *
-     * @returns {void}
-     */
-    DropDownBase.prototype.setEnabled = function () {
-        this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');
-    };
     /**
      * Sets the enabled state to DropDownBase.
      *
@@ -749,7 +760,9 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         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 */
     DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {
@@ -879,10 +892,12 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         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') {
@@ -973,7 +988,9 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         return item;
     };
     DropDownBase.prototype.setFixedHeader = function () {
-        this.list.parentElement.style.display = 'block';
+        if (!isNullOrUndefined(this.list)) {
+            this.list.parentElement.style.display = 'block';
+        }
         var borderWidth = 0;
         if (this.list && this.list.parentElement) {
             borderWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-width'), 10);
@@ -988,8 +1005,10 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 borderWidth = (borderTopWidth + borderBottomWidth + borderLeftWidth + borderRightWidth);
             }
         }
-        var liWidth = this.getValidLi().offsetWidth - borderWidth;
-        this.fixedHeaderElement.style.width = liWidth.toString() + 'px';
+        if (!isNullOrUndefined(this.liCollections)) {
+            var liWidth = this.getValidLi().offsetWidth - borderWidth;
+            this.fixedHeaderElement.style.width = liWidth.toString() + 'px';
+        }
         setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });
         var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group + ':not(.e-hide-listitem)');
         this.fixedHeaderElement.innerHTML = firstLi.innerHTML;
@@ -1133,9 +1152,6 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 case 'enableRtl':
                     this.setEnableRtl();
                     break;
-                case 'enabled':
-                    this.setEnabled();
-                    break;
                 case 'groupTemplate':
                     this.renderGroupTemplate(this.list);
                     if (this.ulElement && this.fixedHeaderElement) {
@@ -1184,7 +1200,6 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             wrapperElement.appendChild(this.list);
         }
         this.setEnableRtl();
-        this.setEnabled();
         if (!isEmptyData) {
             this.initialize(e);
         }
@@ -1212,7 +1227,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
      * 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
@@ -1276,11 +1291,17 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             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 {
@@ -1401,14 +1422,16 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             }
             detach(this.list);
         }
+        this.liCollections = null;
+        this.ulElement = null;
+        this.list = null;
+        this.enableRtlElements = null;
+        this.rippleFun = null;
         _super.prototype.destroy.call(this);
     };
     __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);
@@ -1424,9 +1447,6 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Property('None')
     ], DropDownBase.prototype, "sortOrder", void 0);
-    __decorate([
-        Property(true)
-    ], DropDownBase.prototype, "enabled", void 0);
     __decorate([
         Property([])
     ], DropDownBase.prototype, "dataSource", void 0);
@@ -1687,8 +1707,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 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;
@@ -1711,21 +1735,21 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var htmlAttr = _a[_i];
                 if (htmlAttr === 'class') {
-                    var updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\s+/g, ' ')).trim();
+                    var 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 {
                     var defaultAttr = ['title', 'id', 'placeholder',
@@ -1735,18 +1759,18 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         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]);
                     }
                 }
             }
@@ -1802,7 +1826,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DropDownList.prototype.targetElement = function () {
-        return this.inputWrapper.container;
+        return !isNullOrUndefined(this.inputWrapper) ? this.inputWrapper.container : null;
     };
     DropDownList.prototype.getNgDirective = function () {
         return 'EJS-DROPDOWNLIST';
@@ -1961,7 +1985,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DropDownList.prototype.unBindCommonEvent = function () {
-        if (this.targetElement()) {
+        if (!isNullOrUndefined(this.inputWrapper) && this.targetElement()) {
             EventHandler.remove(this.targetElement(), 'blur', this.onBlurHandler);
         }
         var formElement = this.inputElement && closest(this.inputElement, 'form');
@@ -1991,9 +2015,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     DropDownList.prototype.wireListEvents = function () {
-        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);
+        }
     };
     DropDownList.prototype.onSearch = function (e) {
         if (e.charCode !== 32 && e.charCode !== 13) {
@@ -2271,9 +2297,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         this.setSelection(previousItem, event);
     };
     DropDownList.prototype.unWireEvent = function () {
-        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();
     };
     /**
@@ -2282,9 +2310,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     DropDownList.prototype.unWireListEvents = function () {
-        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);
+        }
     };
     DropDownList.prototype.checkSelector = function (id) {
         return '[id="' + id.replace(/(:|\.|\[|\]|,|=|@|\\|\/|#)/g, '\\$1') + '"]';
@@ -2292,7 +2322,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.onDocumentClick = function (e) {
         var 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;
                 var isActive = this.isRequested;
@@ -2490,14 +2520,16 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             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 });
         }
     };
@@ -2663,9 +2695,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 selectedElement.setAttribute('value', this.value.toString());
             }
             else {
-                this.hiddenElement.innerHTML = '<option selected>' + this.text + '</option>';
-                var selectedElement = this.hiddenElement.querySelector('option');
-                selectedElement.setAttribute('value', this.value.toString());
+                if (!isNullOrUndefined(this.hiddenElement)) {
+                    this.hiddenElement.innerHTML = '<option selected>' + this.text + '</option>';
+                    var selectedElement = this.hiddenElement.querySelector('option');
+                    selectedElement.setAttribute('value', this.value.toString());
+                }
             }
         }
         else {
@@ -2817,9 +2851,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     /**
      * 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
      */
@@ -3004,7 +3038,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     && ((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(function () {
                             _this.updateActionCompleteDataValues(ulElement, list);
                         }, 0);
@@ -3155,9 +3189,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     (_this.isDropDownClick && _this.getModuleName() === 'combobox')))) {
                     offsetValue = _this.getOffsetValue(popupEle);
                     var 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);
@@ -3203,9 +3239,13 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 var eventArgs = { popup: popupInstance, event: e, cancel: false, animation: animModel };
                 _this.trigger('open', eventArgs, function (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;
@@ -3464,11 +3504,13 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 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' });
@@ -3603,6 +3645,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             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;
@@ -3687,6 +3730,14 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var contentEle = popupEle.querySelector('div.e-content');
         popupEle.insertBefore(this.header, contentEle);
     };
+    /**
+     * Sets the enabled state to DropDownBase.
+     *
+     * @returns {void}
+     */
+    DropDownList.prototype.setEnabled = function () {
+        this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');
+    };
     DropDownList.prototype.setOldText = function (text) {
         this.text = text;
     };
@@ -4062,7 +4113,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             };
             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);
         }
     };
@@ -4078,7 +4129,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.hidePopup = function (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)) {
                 var element = this.findListElement(this.ulElement, 'li', 'data-value', this.value);
@@ -4188,6 +4241,21 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             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.prototype.destroy.call(this);
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
@@ -4229,6 +4297,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -4408,6 +4482,9 @@ var Fields = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -5217,7 +5294,12 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                         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) {
@@ -5749,6 +5831,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             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,
@@ -6041,7 +6124,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             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;
     };
@@ -6054,7 +6137,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                 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;
         }
@@ -6064,7 +6147,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             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;
@@ -6559,7 +6642,12 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         });
         var chipContent = this.createElement('span', { className: CHIP_CONTENT });
         var 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) {
@@ -7381,6 +7469,9 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -7682,7 +7773,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
     };
     ComboBox.prototype.getFocusElement = function () {
         var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();
-        var selected = this.list.querySelector('.' + dropDownListClasses.selected);
+        var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : this.list;
         var isSelected = dataItem.text === this.inputElement.value && !isNullOrUndefined(selected);
         if (isSelected) {
             return selected;
@@ -7690,7 +7781,9 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
         if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
             !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
             var inputValue = this.inputElement.value;
-            var activeItem = Search(inputValue, this.liCollections, this.filterType, true);
+            var dataSource = this.sortedData;
+            var type = this.typeOfData(dataSource).typeof;
+            var activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);
             var activeElement = activeItem.item;
             if (!isNullOrUndefined(activeElement)) {
                 var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
@@ -7840,9 +7933,11 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
         }
         else if (this.inputElement.value === '') {
             this.activeIndex = null;
-            this.list.scrollTop = 0;
-            var focusItem = this.list.querySelector('.' + dropDownListClasses.li);
-            this.setHoverList(focusItem);
+            if (!isNullOrUndefined(this.list)) {
+                this.list.scrollTop = 0;
+                var focusItem = this.list.querySelector('.' + dropDownListClasses.li);
+                this.setHoverList(focusItem);
+            }
         }
         else {
             this.activeIndex = null;
@@ -8091,7 +8186,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
      * 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
@@ -8102,9 +8197,9 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
     /**
      * 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
      */
@@ -8141,7 +8236,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
                 this.removeFillSelection();
             }
             var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();
-            var selected = this.list.querySelector('.' + dropDownListClasses.selected);
+            var 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);
@@ -8151,10 +8246,12 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
                 return;
             }
             if (this.getModuleName() === 'combobox' && this.inputElement.value.trim() !== '') {
-                var searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true);
+                var dataSource = this.sortedData;
+                var type = this.typeOfData(dataSource).typeof;
+                var 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)) {
@@ -8443,9 +8540,9 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
     /**
      * 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
      */
@@ -8485,7 +8582,9 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
     AutoComplete.prototype.postBackAction = function () {
         if (this.autofill && !isNullOrUndefined(this.liCollections[0]) && this.searchList) {
             var items = [this.liCollections[0]];
-            var searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase);
+            var dataSource = this.listData;
+            var type = this.typeOfData(dataSource).typeof;
+            var searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase, dataSource, this.fields, type);
             this.searchList = false;
             if (!isNullOrUndefined(searchItem.item)) {
                 _super.prototype.setAutoFill.call(this, this.liCollections[0], true);
@@ -9031,7 +9130,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 var htmlAttr = _a[_i];
                 switch (htmlAttr) {
                     case 'class': {
-                        var updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\s+/g, ' ')).trim();
+                        var updatedClassValue = (this.htmlAttributes["" + htmlAttr].replace(/\s+/g, ' ')).trim();
                         if (updatedClassValue !== '') {
                             addClass([this.overAllWrapper], updatedClassValue.split(' '));
                             addClass([this.popupWrapper], updatedClassValue.split(' '));
@@ -9043,7 +9142,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         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();
                         }
@@ -9053,16 +9152,16 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         var validateAttr = ['name', 'required', 'aria-required', 'form'];
                         var 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;
                     }
@@ -9071,11 +9170,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.updateReadonly = function (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');
+            }
         }
     };
     MultiSelect.prototype.updateClearButton = function (state) {
@@ -9218,8 +9319,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(this.ulElement)) {
             attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
         }
-        var disableStatus = (this.inputElement.disabled) ? true : false;
-        if (!this.isPopupOpen()) {
+        var disableStatus = !isNullOrUndefined(this.inputElement) && (this.inputElement.disabled) ? true : false;
+        if (!this.isPopupOpen() && !isNullOrUndefined(this.inputElement)) {
             attributes(this.inputElement, this.getAriaAttributes());
         }
         if (disableStatus) {
@@ -9329,7 +9430,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             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();
@@ -9399,8 +9500,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     }
                     element.setAttribute('aria-selected', 'true');
                     if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {
-                        var ariaValue = element.firstElementChild.getAttribute('aria-checked');
-                        if (isNullOrUndefined(ariaValue) || ariaValue === 'false') {
+                        var ariaValue = element.getElementsByClassName('e-check').length;
+                        if (ariaValue === 0) {
                             var args = {
                                 module: 'CheckBoxSelection',
                                 enable: this.mode === 'CheckBox',
@@ -9524,9 +9625,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     /**
      * 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}
      */
     MultiSelect.prototype.filter = function (dataSource, query, fields) {
@@ -9793,11 +9894,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.refreshInputHight = function () {
-        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);
+            }
         }
     };
     MultiSelect.prototype.validateValues = function (newValue, oldValue) {
@@ -10598,7 +10701,6 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         HIDE_LIST :
                         dropDownBaseClasses.selected);
                     if (this.mode === 'CheckBox') {
-                        element2.firstElementChild.setAttribute('aria-checked', 'false');
                         removeClass([element2.firstElementChild.lastElementChild], 'e-check');
                     }
                 }
@@ -10608,7 +10710,6 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         HIDE_LIST :
                         dropDownBaseClasses.selected);
                     if (this.mode === 'CheckBox') {
-                        element2.firstElementChild.setAttribute('aria-checked', 'true');
                         addClass([element2.firstElementChild.lastElementChild], 'e-check');
                     }
                 }
@@ -10869,109 +10970,111 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             _super.prototype.render.call(this);
         }
         if (!this.popupObj) {
-            document.body.appendChild(this.popupWrapper);
-            var checkboxFilter = this.popupWrapper.querySelector('.' + FILTERPARENT);
-            if (this.mode === 'CheckBox' && !this.allowFiltering && checkboxFilter && this.filterParent) {
-                checkboxFilter.remove();
-                this.filterParent = null;
-            }
-            var 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);
+                var checkboxFilter = this.popupWrapper.querySelector('.' + FILTERPARENT);
+                if (this.mode === 'CheckBox' && !this.allowFiltering && checkboxFilter && this.filterParent) {
+                    checkboxFilter.remove();
+                    this.filterParent = null;
+                }
+                var 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') {
-                var args = {
-                    module: 'CheckBoxSelection',
-                    enable: this.mode === 'CheckBox',
-                    popupElement: this.popupWrapper
-                };
-                if (this.allowFiltering) {
-                    this.notify('searchBox', args);
-                    overAllHeight -= this.searchBoxHeight;
+                if (this.mode === 'CheckBox' && this.showSelectAll) {
+                    this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                    overAllHeight -= this.selectAllHeight;
                 }
-                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: function () {
-                    if (_this.popupObj.element.parentElement) {
-                        _this.popupObj.unwireScrollEvents();
-                        // For restrict the page scrolling in safari browser
-                        var checkboxFilterInput = _this.popupWrapper.querySelector('.' + FILTERINPUT);
-                        if (_this.mode === 'CheckBox' && checkboxFilterInput && document.activeElement === checkboxFilterInput) {
-                            checkboxFilterInput.blur();
-                        }
-                        detach(_this.popupObj.element);
-                    }
-                },
-                open: function () {
-                    _this.popupObj.resolveCollision();
-                    if (!_this.isFirstClick) {
-                        var 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;
+                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.allowFiltering) {
-                        _this.notify('inputFocus', {
-                            module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'focus'
-                        });
+                }
+                if (this.mode === 'CheckBox') {
+                    var args = {
+                        module: 'CheckBoxSelection',
+                        enable: this.mode === 'CheckBox',
+                        popupElement: this.popupWrapper
+                    };
+                    if (this.allowFiltering) {
+                        this.notify('searchBox', args);
+                        overAllHeight -= this.searchBoxHeight;
                     }
-                }, targetExitViewport: function () {
-                    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: function () {
+                        if (_this.popupObj.element.parentElement) {
+                            _this.popupObj.unwireScrollEvents();
+                            // For restrict the page scrolling in safari browser
+                            var checkboxFilterInput = _this.popupWrapper.querySelector('.' + FILTERINPUT);
+                            if (_this.mode === 'CheckBox' && checkboxFilterInput && document.activeElement === checkboxFilterInput) {
+                                checkboxFilterInput.blur();
+                            }
+                            detach(_this.popupObj.element);
+                        }
+                    },
+                    open: function () {
+                        _this.popupObj.resolveCollision();
+                        if (!_this.isFirstClick) {
+                            var 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: function () {
+                        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 = '';
         }
     };
     MultiSelect.prototype.setHeaderTemplate = function () {
@@ -11234,7 +11337,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         var temp;
         var tempData = this.listData;
         this.listData = this.mainData;
-        this.hiddenElement.innerHTML = '';
+        if (!isNullOrUndefined(this.hiddenElement)) {
+            this.hiddenElement.innerHTML = '';
+        }
         if (!isNullOrUndefined(this.value)) {
             for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {
                 var listValue = this.findListElement(((!isNullOrUndefined(this.mainList)) ? this.mainList : this.ulElement), 'li', 'data-value', this.value[index]);
@@ -11252,7 +11357,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     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);
@@ -11464,10 +11571,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     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--;
@@ -11525,9 +11630,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             addClass([element], className);
             this.updateMainList(false, element.getAttribute('data-value'), mainElement);
             element.setAttribute('aria-selected', 'true');
-            if (this.mode === 'CheckBox') {
-                var ariaCheck = element.firstElementChild.getAttribute('aria-checked');
-                if (ariaCheck === 'false' || isNullOrUndefined(ariaCheck)) {
+            if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {
+                var ariaCheck = element.getElementsByClassName('e-check').length;
+                if (ariaCheck === 0) {
                     this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: this });
                 }
             }
@@ -11846,9 +11951,11 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         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) {
             var data = '';
             var temp = void 0;
@@ -11936,8 +12043,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             }
         }
         else {
-            this.viewWrapper.innerHTML = '';
-            this.viewWrapper.style.display = 'none';
+            if (!isNullOrUndefined(this.viewWrapper)) {
+                this.viewWrapper.innerHTML = '';
+                this.viewWrapper.style.display = 'none';
+            }
         }
     };
     MultiSelect.prototype.checkClearIconWidth = function () {
@@ -12010,29 +12119,41 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         return temp;
     };
     MultiSelect.prototype.unWireEvent = function () {
-        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);
+            var 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);
-        var 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);
     };
     MultiSelect.prototype.selectAllItem = function (state, event, list) {
         var 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 ?
@@ -12534,7 +12655,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
      * 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}
      */
@@ -12845,11 +12966,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.addValidInputClass = function () {
-        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');
+            }
         }
     };
     MultiSelect.prototype.dropDownIcon = function () {
@@ -12902,13 +13025,17 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         _super.prototype.destroy.call(this);
         var temp = ['readonly', 'aria-disabled', 'placeholder'];
         var 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);
             }
@@ -12917,6 +13044,25 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 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([
         Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)
@@ -13268,6 +13414,12 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
     CheckBoxSelection.prototype.destroy = function () {
         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;
     };
     CheckBoxSelection.prototype.listSelection = function (args) {
         var target;
@@ -13316,12 +13468,10 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
         e.preventDefault();
     };
     CheckBoxSelection.prototype.changeState = function (wrapper, state, e, isPrevent, selectAll$$1) {
-        var ariaState;
         var 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);
@@ -13329,7 +13479,6 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
         }
         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();
@@ -13338,16 +13487,11 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
         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);
-        }
     };
     CheckBoxSelection.prototype.setSearchBox = function (args) {
         if (isNullOrUndefined(this.parent.filterParent)) {
@@ -13508,8 +13652,8 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
                     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;
@@ -13522,7 +13666,7 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
                 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();
@@ -13553,7 +13697,7 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
         }
     };
     CheckBoxSelection.prototype.checkSelectAll = function (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);
         }
@@ -13737,6 +13881,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         this.isCustomFiltering = false;
         this.initialSelectedOptions = this.value;
         _super.prototype.render.call(this);
+        this.setEnabled();
         this.renderComplete();
     };
     ListBox.prototype.initWrapper = function () {
@@ -14034,10 +14179,10 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var event = args.event;
         var 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 {
@@ -14092,7 +14237,8 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         var getArgs = this.getDragArgs({ target: args.droppedElement }, true);
         var sourceArgs = { previousData: this.dataSource };
         var destArgs = { previousData: listObj.dataSource };
-        var dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource }, previousIndex: args.previousIndex, currentIndex: args.currentIndex });
+        var dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource },
+            previousIndex: args.previousIndex, currentIndex: args.currentIndex });
         if (listObj !== this) {
             var sourceArgs1 = extend(sourceArgs, { currentData: this.listData });
             dragArgs = extend(dragArgs, { source: sourceArgs1, destination: destArgs });
@@ -14229,7 +14375,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
     };
     ListBox.prototype.updateListItems = function (sourceElem, destElem) {
         var i = 0;
-        destElem.innerHTML = "";
+        destElem.innerHTML = '';
         while (i < sourceElem.childNodes.length) {
             destElem.appendChild(sourceElem.childNodes[i]);
         }
@@ -14258,6 +14404,14 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         }
         return listObj;
     };
+    /**
+     * Sets the enabled state to DropDownBase.
+     *
+     * @returns {void}
+     */
+    ListBox.prototype.setEnabled = function () {
+        this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');
+    };
     ListBox.prototype.listOption = function (dataSource, fields) {
         this.listCurrentOptions = _super.prototype.listOption.call(this, dataSource, fields);
         this.listCurrentOptions = extend({}, this.listCurrentOptions, { itemCreated: this.triggerBeforeItemRender.bind(this) }, true);
@@ -14707,9 +14861,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             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',
@@ -15157,7 +15309,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         listData = listData
             .filter(function (data) { return 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) {
@@ -15303,7 +15455,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
             }
-            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);
             }
         }
@@ -15347,8 +15499,8 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             }
             if (this.selectionSettings.showCheckbox && e.ctrlKey && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
                 var selectedidx = Array.prototype.indexOf.call(ul.children, fli);
-                var sidx = e.code === "Home" ? 0 : selectedidx;
-                var eidx = e.code === "Home" ? selectedidx : ul.children.length - 1;
+                var sidx = e.code === 'Home' ? 0 : selectedidx;
+                var eidx = e.code === 'Home' ? selectedidx : ul.children.length - 1;
                 for (var i = sidx; i <= eidx; i++) {
                     var item = ul.children[i];
                     this.notify('updatelist', { li: item, e: {
@@ -15506,7 +15658,6 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                 dvalue_1 = _this.getFormattedValue(li.getAttribute('data-value'));
                 if (values.indexOf(dvalue_1) < 0) {
                     li.getElementsByClassName('e-check')[0].classList.remove('e-check');
-                    li.getElementsByClassName('e-checkbox-wrapper')[0].removeAttribute('aria-checked');
                     li.removeAttribute('aria-selected');
                 }
             });
@@ -15858,6 +16009,12 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -16032,6 +16189,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         this.isFiltered = false;
         this.beforePopupOpen = false;
         this.initRemoteRender = false;
+        this.isListResetted = false;
         this.isPopupOpen = false;
         this.isCollided = false;
         this.lineBreak = false;
@@ -16098,6 +16256,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
     /**
      * Hides the spinner loader.
      *
+     * @private
      * @returns {void}
      */
     Mention.prototype.hideSpinner = function () {
@@ -16153,6 +16312,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                 break;
             case 'tab':
                 if (this.isPopupOpen) {
+                    e.preventDefault();
                     var li = this.list.querySelector('.' + dropDownBaseClasses.selected);
                     if (li) {
                         this.setSelection(li, e);
@@ -16192,7 +16352,8 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             var 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;
-            var nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex] : this.liCollections[index];
+            var nextItem = isNullOrUndefined(this.activeIndex) ?
+                this.liCollections[startIndex] : this.liCollections[index];
             if (!isNullOrUndefined(nextItem)) {
                 this.setSelection(nextItem, e);
             }
@@ -16217,9 +16378,14 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         }
         var currentRange = this.getTextRange();
         var lastWordRange = this.getLastLetter(currentRange);
+        // eslint-disable-next-line security/detect-non-literal-regexp
         var Regex = new RegExp(this.mentionChar, 'g');
         var 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 ||
@@ -16248,7 +16414,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                 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();
                 }
             }
@@ -16277,8 +16443,12 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             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;
     };
     Mention.prototype.isMatchedText = function () {
         var isMatched = false;
@@ -16312,7 +16482,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         this.activeIndex = null;
         var eventArgs = {
             preventDefaultAction: false,
-            text: this.elementValue(),
+            text: this.queryString,
             updateData: function (dataSource, query, fields) {
                 if (eventArgs.cancel) {
                     return;
@@ -16330,8 +16500,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
     };
     Mention.prototype.filterAction = function (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) {
@@ -16453,12 +16624,14 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             }
         }
         else {
-            var selectedElem = this.range.startContainer;
-            if (!isNullOrUndefined(selectedElem)) {
-                var workingNodeContent = selectedElem.textContent;
-                var selectStartOffset = this.range.startOffset;
-                if (workingNodeContent && selectStartOffset >= 0) {
-                    text = workingNodeContent.substring(0, selectStartOffset);
+            if (this.range) {
+                var selectedElem = this.range.startContainer;
+                if (!isNullOrUndefined(selectedElem)) {
+                    var workingNodeContent = selectedElem.textContent;
+                    var selectStartOffset = this.range.startOffset;
+                    if (workingNodeContent && selectStartOffset >= 0) {
+                        text = workingNodeContent.substring(0, selectStartOffset);
+                    }
                 }
             }
         }
@@ -16482,6 +16655,10 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Mention.prototype.showPopup = function () {
+        this.beforePopupOpen = true;
+        if (isNullOrUndefined(this.list)) {
+            this.initValue();
+        }
         this.renderPopup();
         attributes(this.inputElement, { 'aria-activedescendant': this.selectedElementID });
         if (this.selectedElementID == null) {
@@ -16547,18 +16724,13 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
                 append([_this.list], popupEle_1);
-                if ((!_this.popupObj || !document.body.contains(_this.popupObj.element)) || !document.contains(popupEle_1) && isNullOrUndefined(_this.target)) {
+                if ((!_this.popupObj || !document.body.contains(_this.popupObj.element)) ||
+                    !document.contains(popupEle_1) && isNullOrUndefined(_this.target)) {
                     document.body.appendChild(popupEle_1);
                 }
                 var coordinates_1;
                 popupEle_1.style.visibility = 'hidden';
-                if (_this.popupHeight !== 'auto') {
-                    _this.list.style.maxHeight = (parseInt(_this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
-                    popupEle_1.style.maxHeight = formatUnit(_this.popupHeight);
-                }
-                else {
-                    popupEle_1.style.height = 'auto';
-                }
+                _this.setHeight(popupEle_1);
                 var offsetValue = 0;
                 var left = 0;
                 _this.initializePopup(popupEle_1, offsetValue, left);
@@ -16581,6 +16753,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                     if (!eventArgs.cancel) {
                         _this.renderReactTemplates();
                         _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.inputElement : null);
+                        if (isNullOrUndefined(_this.getTriggerCharPosition())) {
+                            return;
+                        }
                         coordinates_1 = _this.getCoordinates(_this.inputElement, _this.getTriggerCharPosition());
                         if (!_this.isCollided) {
                             popupEle_1.style.cssText = 'top: '.concat(coordinates_1.top.toString(), 'px;\n left: ').concat(coordinates_1.left.toString(), 'px;\nposition: absolute;\n display: block;');
@@ -16590,6 +16765,8 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                             _this.isCollided = false;
                         }
                         popupEle_1.style.width = _this.popupWidth !== '100%' && !isNullOrUndefined(_this.popupWidth) ? formatUnit(_this.popupWidth) : 'auto';
+                        _this.setHeight(popupEle_1);
+                        popupEle_1.style.zIndex = _this.zIndex === 1000 ? getZindexPartial(popupEle_1).toString() : _this.zIndex.toString();
                     }
                     else {
                         _this.beforePopupOpen = false;
@@ -16602,6 +16779,15 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             }
         });
     };
+    Mention.prototype.setHeight = function (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';
+        }
+    };
     Mention.prototype.checkCollision = function (popupEle) {
         if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'mention'))) {
             var collision = isCollide(popupEle);
@@ -16682,7 +16868,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             computed = getComputedStyle(element);
             div.style.position = 'absolute';
             div.style.visibility = 'hidden';
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             properties.forEach(function (prop) {
+                // eslint-disable-next-line security/detect-object-injection
                 div.style[prop] = computed[prop];
             });
             div.textContent = element.value.substring(0, position);
@@ -16716,13 +16904,12 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         }
         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;
     };
-    
     Mention.prototype.initValue = function () {
         this.renderList();
         if (this.dataSource instanceof DataManager) {
@@ -16918,8 +17105,8 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         }
         return items;
     };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Mention.prototype.setValue = function (e) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (!this.isReact) {
             if (!isNullOrUndefined(this.displayTemplate)) {
                 this.setDisplayTemplate();
@@ -16947,7 +17134,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         var selection = this.inputElement.ownerDocument.getSelection();
         var 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)) {
@@ -16979,6 +17166,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             var frag = document.createDocumentFragment();
             var node = void 0;
             var lastNode = void 0;
+            // eslint-disable-next-line no-cond-assign
             while (node = element.firstChild) {
                 lastNode = frag.appendChild(node);
             }
@@ -17034,6 +17222,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                 this.displayTempElement.appendChild(displayCompTemp[i]);
             }
         }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (!this.isReact) {
             this.renderTemplates();
         }
@@ -17043,6 +17232,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             });
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Mention.prototype.renderTemplates = function (callBack) {
         this.renderReactTemplates(callBack);
     };
@@ -17072,6 +17262,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                 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);
@@ -17166,7 +17357,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         this.setHover(currentLi);
     };
     Mention.prototype.setHover = function (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);
         }
@@ -17191,8 +17382,13 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Mention.prototype.search = function (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();
+        }
+        var currentRange = this.getTextRange();
+        var lastWordRange = this.getLastLetter(currentRange);
+        if ((this.ignoreCase && (text === lastWordRange || text === lastWordRange.toLowerCase()))
+            || !this.ignoreCase && text === lastWordRange) {
             this.resetList(this.dataSource, this.fields);
         }
         else {