@syncfusion/ej2-dropdowns 20.3.60 → 20.4.40

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

@@ -459,7 +459,9 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 liElem.setAttribute('role', 'option');
             }
             else {
-                ele.innerHTML = content;
+                if (!isNullOrUndefined(ele)) {
+                    ele.innerHTML = content;
+                }
             }
         }
     };
@@ -490,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);
+            }
         }
     };
     /**
@@ -535,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.
      *
@@ -764,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) {
@@ -894,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') {
@@ -988,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);
@@ -1003,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;
@@ -1148,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) {
@@ -1199,7 +1200,6 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             wrapperElement.appendChild(this.list);
         }
         this.setEnableRtl();
-        this.setEnabled();
         if (!isEmptyData) {
             this.initialize(e);
         }
@@ -1291,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 {
@@ -1416,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);
@@ -1439,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);
@@ -1702,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;
@@ -1726,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',
@@ -1750,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]);
                     }
                 }
             }
@@ -1817,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';
@@ -1976,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');
@@ -2006,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) {
@@ -2286,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();
     };
     /**
@@ -2297,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') + '"]';
@@ -2307,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;
@@ -2505,9 +2520,11 @@ 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 (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 });
@@ -2678,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 {
@@ -3019,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);
@@ -3170,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);
@@ -3218,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;
@@ -3479,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' });
@@ -3618,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;
@@ -3702,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;
     };
@@ -4077,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);
         }
     };
@@ -4093,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);
@@ -4203,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 */
@@ -4244,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);
@@ -4423,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);
@@ -5232,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) {
@@ -5764,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,
@@ -5989,6 +6057,9 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
         var eventArgs = { data: args.data };
         this.trigger('dataBound', eventArgs);
+        if (this.filterObj === null) {
+            this.isFilteredData = false;
+        }
         if (this.isFilteredData) {
             this.treeObj.expandAll();
         }
@@ -6056,7 +6127,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;
     };
@@ -6069,7 +6140,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;
         }
@@ -6079,7 +6150,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;
@@ -6574,7 +6645,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) {
@@ -7396,6 +7472,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);
@@ -7697,7 +7776,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;
@@ -7857,9 +7936,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;
@@ -8158,7 +8239,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);
@@ -9052,7 +9133,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(' '));
@@ -9064,7 +9145,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();
                         }
@@ -9074,16 +9155,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;
                     }
@@ -9092,11 +9173,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) {
@@ -9239,8 +9322,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) {
@@ -9350,7 +9433,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();
@@ -9420,8 +9503,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',
@@ -9814,11 +9897,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) {
@@ -10619,7 +10704,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');
                     }
                 }
@@ -10629,7 +10713,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');
                     }
                 }
@@ -10890,109 +10973,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 () {
@@ -11255,7 +11340,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]);
@@ -11273,7 +11360,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);
@@ -11485,10 +11574,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--;
@@ -11546,9 +11633,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 });
                 }
             }
@@ -11867,9 +11954,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;
@@ -11957,8 +12046,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 () {
@@ -12031,29 +12122,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 ?
@@ -12866,11 +12969,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 () {
@@ -12923,13 +13028,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);
             }
@@ -12938,6 +13047,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)
@@ -13289,6 +13417,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;
@@ -13337,12 +13471,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);
@@ -13350,7 +13482,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();
@@ -13359,16 +13490,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)) {
@@ -13529,8 +13655,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;
@@ -13543,7 +13669,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();
@@ -13574,7 +13700,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);
         }
@@ -13758,6 +13884,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 () {
@@ -14055,10 +14182,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 {
@@ -14113,7 +14240,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 });
@@ -14241,6 +14369,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             dragArgs = extend(dragArgs, { destination: dragArgs1 });
         }
         this.trigger('drop', dragArgs);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var liCollElem = dragArgs.elements;
         if (liCollElem.length) {
             for (var i = 0; i < liCollElem.length; i++) {
@@ -14250,7 +14379,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]);
         }
@@ -14279,6 +14408,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);
@@ -14728,9 +14865,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',
@@ -15132,7 +15267,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         var isRefresh = tListBox.sortOrder !== 'None' || (tListBox.selectionSettings.showCheckbox !==
             fListBox.selectionSettings.showCheckbox) || tListBox.fields.groupBy || tListBox.itemTemplate || fListBox.itemTemplate;
         this.removeSelected(fListBox, fListBox.getSelectedItems());
-        var tempItems = [].slice.call(fListBox.jsonData);
+        var tempItems = [].slice.call(fListBox.listData);
         var localDataArgs = { cancel: false, items: tempItems, eventName: this.toolbarAction };
         fListBox.trigger('actionBegin', localDataArgs);
         if (localDataArgs.cancel) {
@@ -15177,11 +15312,18 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         fListBox.value = [];
         listData = listData
             .filter(function (data) { return data.isHeader !== true; });
-        tListBox.listData = tListBox.jsonData = listData;
-        if (fListBox.listData.length == fListBox.jsonData.length) {
+        var sortedData = listData.filter(function (val) {
+            return tListBox.jsonData.indexOf(val) === -1;
+        });
+        for (var i = 0; i < sortedData.length; i++) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            tListBox.jsonData.splice(index + i, 0, sortedData[i]);
+        }
+        tListBox.listData = listData;
+        if (fListBox.listData.length === fListBox.jsonData.length) {
             fListBox.listData = fListBox.sortedData = fListBox.jsonData = [];
         }
-        else if (this.allowFiltering) {
+        else if (fListBox.allowFiltering) {
             for (var i = 0; i < fListBox.listData.length; i++) {
                 for (var j = 0; j < fListBox.jsonData.length; j++) {
                     if (fListBox.listData[i] === fListBox.jsonData[j]) {
@@ -15324,7 +15466,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);
             }
         }
@@ -15368,8 +15510,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: {
@@ -15527,7 +15669,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');
                 }
             });
@@ -15879,6 +16020,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);
@@ -16053,6 +16200,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;
@@ -16119,6 +16267,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
     /**
      * Hides the spinner loader.
      *
+     * @private
      * @returns {void}
      */
     Mention.prototype.hideSpinner = function () {
@@ -16174,6 +16323,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);
@@ -16213,7 +16363,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);
             }
@@ -16238,9 +16389,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 ||
@@ -16269,7 +16425,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();
                 }
             }
@@ -16298,8 +16454,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;
@@ -16333,7 +16493,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;
@@ -16351,8 +16511,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) {
@@ -16474,12 +16635,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);
+                    }
                 }
             }
         }
@@ -16503,6 +16666,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) {
@@ -16568,18 +16735,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);
@@ -16602,6 +16764,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;');
@@ -16611,6 +16776,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;
@@ -16623,6 +16790,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);
@@ -16703,7 +16879,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);
@@ -16737,13 +16915,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) {
@@ -16939,8 +17116,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();
@@ -16968,7 +17145,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)) {
@@ -17000,6 +17177,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);
             }
@@ -17055,6 +17233,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();
         }
@@ -17064,6 +17243,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             });
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Mention.prototype.renderTemplates = function (callBack) {
         this.renderReactTemplates(callBack);
     };
@@ -17093,6 +17273,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);
@@ -17187,7 +17368,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);
         }
@@ -17212,8 +17393,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 {