@syncfusion/ej2-dropdowns 20.2.39 → 20.2.43-3197

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

@@ -6,9 +6,6 @@ import { Input, TextBox } from '@syncfusion/ej2-inputs';
 import { Button, createCheckBox } from '@syncfusion/ej2-buttons';
 import { TreeView } from '@syncfusion/ej2-navigations';
 
-/**
- * IncrementalSearch module file
- */
 let queryString = '';
 let prevString = '';
 let matches$1 = [];
@@ -81,7 +78,7 @@ function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId)
  * @param {boolean} ignoreCase - Specifies the case sensitive option for search operation.
  * @returns {Element | number} Returns the search matched items.
  */
-function Search(inputVal, items, searchType, ignoreCase) {
+function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, type) {
     const listItems = items;
     ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;
     const itemData = { item: null, index: null };
@@ -91,7 +88,20 @@ function Search(inputVal, items, searchType, ignoreCase) {
         queryStr = escapeCharRegExp(queryStr);
         for (let i = 0, itemsData = listItems; i < itemsData.length; i++) {
             const item = itemsData[i];
-            const text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
+            let text;
+            let filterValue;
+            if (items && dataSource) {
+                let checkField = item;
+                let fieldValue = fields.text.split('.');
+                dataSource.filter(function (data) {
+                    Array.prototype.slice.call(fieldValue).forEach(function (value) {
+                        if (type === 'object' && checkField.textContent.toString().indexOf(data[value]) !== -1 && checkField.getAttribute('data-value') === data[fields.value] || type === 'string' && checkField.textContent.toString().indexOf(data) !== -1) {
+                            filterValue = type === 'object' ? data[value] : data;
+                        }
+                    });
+                });
+            }
+            text = dataSource && filterValue ? (ignoreCase ? filterValue.toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
             if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, "g").test(text))) {
                 itemData.item = item;
                 itemData.index = i;
@@ -214,6 +224,8 @@ const dropDownBaseClasses = {
     grouping: 'e-dd-group'
 };
 const ITEMTEMPLATE_PROPERTY = 'ItemTemplate';
+const DISPLAYTEMPLATE_PROPERTY = 'DisplayTemplate';
+const SPINNERTEMPLATE_PROPERTY = 'SpinnerTemplate';
 const VALUETEMPLATE_PROPERTY = 'ValueTemplate';
 const GROUPTEMPLATE_PROPERTY = 'GroupTemplate';
 const HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';
@@ -238,6 +250,7 @@ let DropDownBase = class DropDownBase extends Component {
         this.isAngular = false;
         this.isPreventChange = false;
         this.isDynamicDataChange = false;
+        this.addedNewItem = false;
     }
     getPropObject(prop, newProp, oldProp) {
         const newProperty = new Object();
@@ -406,7 +419,8 @@ let DropDownBase = class DropDownBase extends Component {
                 this.l10n = componentLocale;
             }
             else {
-                this.l10n = new L10n(this.getModuleName() === 'listbox' ? 'listbox' : 'dropdowns', l10nLocale, this.locale);
+                this.l10n = new L10n(this.getModuleName() === 'listbox' ? 'listbox' :
+                    this.getModuleName() === 'mention' ? 'mention' : 'dropdowns', l10nLocale, this.locale);
             }
             const content = actionFailure ?
                 this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');
@@ -415,9 +429,12 @@ let DropDownBase = class DropDownBase extends Component {
                 liElem.textContent = content;
                 ele.appendChild(liElem);
                 liElem.classList.add('e-list-nrt');
+                liElem.setAttribute('role', 'option');
             }
             else {
-                ele.innerHTML = content;
+                if (!isNullOrUndefined(ele)) {
+                    ele.innerHTML = content;
+                }
             }
         }
     }
@@ -448,14 +465,16 @@ let DropDownBase = class DropDownBase extends Component {
      * @returns {void}
      */
     setEnableRtl() {
-        if (this.list) {
-            this.enableRtlElements.push(this.list);
-        }
-        if (this.enableRtl) {
-            addClass(this.enableRtlElements, dropDownBaseClasses.rtl);
-        }
-        else {
-            removeClass(this.enableRtlElements, dropDownBaseClasses.rtl);
+        if (!isNullOrUndefined(this.enableRtlElements)) {
+            if (this.list) {
+                this.enableRtlElements.push(this.list);
+            }
+            if (this.enableRtl) {
+                addClass(this.enableRtlElements, dropDownBaseClasses.rtl);
+            }
+            else {
+                removeClass(this.enableRtlElements, dropDownBaseClasses.rtl);
+            }
         }
     }
     /**
@@ -463,7 +482,7 @@ let DropDownBase = class DropDownBase extends Component {
      *
      * @returns {void}
      */
-    initialize() {
+    initialize(e) {
         this.bindEvent = true;
         this.actionFailureTemplateId = `${this.element.id}${ACTIONFAILURETEMPLATE_PROPERTY}`;
         if (this.element.tagName === 'UL') {
@@ -482,7 +501,7 @@ let DropDownBase = class DropDownBase extends Component {
             }
         }
         else {
-            this.setListData(this.dataSource, this.fields, this.query);
+            this.setListData(this.dataSource, this.fields, this.query, e);
         }
     }
     /**
@@ -493,14 +512,6 @@ let DropDownBase = class DropDownBase extends Component {
     getPersistData() {
         return this.addOnPersist([]);
     }
-    /**
-     * Sets the enabled state to DropDownBase.
-     *
-     * @returns {void}
-     */
-    setEnabled() {
-        this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');
-    }
     /**
      * Sets the enabled state to DropDownBase.
      *
@@ -508,7 +519,7 @@ let DropDownBase = class DropDownBase extends Component {
      * @returns {void}
      */
     updateDataAttribute(value) {
-        const invalidAttr = ['class', 'style', 'id', 'type'];
+        const invalidAttr = ['class', 'style', 'id', 'type', 'aria-expanded', 'aria-autocomplete', 'aria-readonly'];
         const attr = {};
         for (let a = 0; a < this.element.attributes.length; a++) {
             if (invalidAttr.indexOf(this.element.attributes[a].name) === -1 &&
@@ -575,6 +586,8 @@ let DropDownBase = class DropDownBase extends Component {
         this.isRequested = false;
         this.isDataFetched = false;
         this.itemTemplateId = `${this.element.id}${ITEMTEMPLATE_PROPERTY}`;
+        this.displayTemplateId = `${this.element.id}${DISPLAYTEMPLATE_PROPERTY}`;
+        this.spinnerTemplateId = `${this.element.id}${SPINNERTEMPLATE_PROPERTY}`;
         this.valueTemplateId = `${this.element.id}${VALUETEMPLATE_PROPERTY}`;
         this.groupTemplateId = `${this.element.id}${GROUPTEMPLATE_PROPERTY}`;
         this.headerTemplateId = `${this.element.id}${HEADERTEMPLATE_PROPERTY}`;
@@ -589,7 +602,7 @@ let DropDownBase = class DropDownBase extends Component {
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @returns {void}
      */
-    setListData(dataSource, fields, query) {
+    setListData(dataSource, fields, query, event) {
         fields = fields ? fields : this.fields;
         let ulElement;
         this.isActive = true;
@@ -613,10 +626,10 @@ let DropDownBase = class DropDownBase extends Component {
                                     this.isDataFetched = true;
                                 }
                                 ulElement = this.renderItems(listItems, fields);
+                                this.onActionComplete(ulElement, listItems, e);
                                 if (this.groupTemplate) {
                                     this.renderGroupTemplate(ulElement);
                                 }
-                                this.onActionComplete(ulElement, listItems, e);
                                 this.isRequested = false;
                                 this.bindChildItems(listItems, ulElement, fields, e);
                             }
@@ -635,7 +648,7 @@ let DropDownBase = class DropDownBase extends Component {
                     this.trigger('actionComplete', localDataArgs, (localDataArgs) => {
                         if (!localDataArgs.cancel) {
                             ulElement = this.renderItems(localDataArgs.result, fields);
-                            this.onActionComplete(ulElement, localDataArgs.result);
+                            this.onActionComplete(ulElement, localDataArgs.result, event);
                             if (this.groupTemplate) {
                                 this.renderGroupTemplate(ulElement);
                             }
@@ -717,7 +730,9 @@ let DropDownBase = class DropDownBase extends Component {
         this.liCollections = [];
         this.trigger('actionFailure', e);
         this.l10nUpdate(true);
-        addClass([this.list], dropDownBaseClasses.noData);
+        if (!isNullOrUndefined(this.list)) {
+            addClass([this.list], dropDownBaseClasses.noData);
+        }
     }
     /* eslint-disable @typescript-eslint/no-unused-vars */
     onActionComplete(ulElement, list, e) {
@@ -844,18 +859,22 @@ let DropDownBase = class DropDownBase extends Component {
         return extend({}, options, fields, true);
     }
     setFloatingHeader(e) {
-        if (isNullOrUndefined(this.fixedHeaderElement)) {
-            this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });
-            if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {
-                this.fixedHeaderElement.style.display = 'none';
+        if (!isNullOrUndefined(this.list) && !this.list.classList.contains(dropDownBaseClasses.noData)) {
+            if (isNullOrUndefined(this.fixedHeaderElement)) {
+                this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });
+                if (!isNullOrUndefined(this.list) && !this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {
+                    this.fixedHeaderElement.style.display = 'none';
+                }
+                if (!isNullOrUndefined(this.fixedHeaderElement) && !isNullOrUndefined(this.list)) {
+                    prepend([this.fixedHeaderElement], this.list);
+                }
+                this.setFixedHeader();
             }
-            prepend([this.fixedHeaderElement], this.list);
-            this.setFixedHeader();
-        }
-        if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {
-            this.setFixedHeader();
+            if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {
+                this.setFixedHeader();
+            }
+            this.scrollStop(e);
         }
-        this.scrollStop(e);
     }
     scrollStop(e) {
         let target = !isNullOrUndefined(e) ? e.target : this.list;
@@ -939,7 +958,9 @@ let DropDownBase = class DropDownBase extends Component {
         return item;
     }
     setFixedHeader() {
-        this.list.parentElement.style.display = 'block';
+        if (!isNullOrUndefined(this.list)) {
+            this.list.parentElement.style.display = 'block';
+        }
         let borderWidth = 0;
         if (this.list && this.list.parentElement) {
             borderWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-width'), 10);
@@ -954,8 +975,10 @@ let DropDownBase = class DropDownBase extends Component {
                 borderWidth = (borderTopWidth + borderBottomWidth + borderLeftWidth + borderRightWidth);
             }
         }
-        const liWidth = this.getValidLi().offsetWidth - borderWidth;
-        this.fixedHeaderElement.style.width = liWidth.toString() + 'px';
+        if (!isNullOrUndefined(this.liCollections)) {
+            const liWidth = this.getValidLi().offsetWidth - borderWidth;
+            this.fixedHeaderElement.style.width = liWidth.toString() + 'px';
+        }
         setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });
         const firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group + ':not(.e-hide-listitem)');
         this.fixedHeaderElement.innerHTML = firstLi.innerHTML;
@@ -1024,7 +1047,7 @@ let DropDownBase = class DropDownBase extends Component {
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @returns {void}
      */
-    resetList(dataSource, fields, query) {
+    resetList(dataSource, fields, query, e) {
         if (this.list) {
             if ((this.element.tagName === 'SELECT' && this.element.options.length > 0)
                 || (this.element.tagName === 'UL' && this.element.childNodes.length > 0)) {
@@ -1034,8 +1057,9 @@ let DropDownBase = class DropDownBase extends Component {
                     dataSource = this.selectData;
                 }
             }
-            dataSource = this.getModuleName() === 'combobox' && this.selectData && dataSource instanceof Array && dataSource.length < this.selectData.length ? this.selectData : dataSource;
-            this.setListData(dataSource, fields, query);
+            dataSource = this.getModuleName() === 'combobox' && this.selectData && dataSource instanceof Array && dataSource.length < this.selectData.length && this.addedNewItem ? this.selectData : dataSource;
+            this.addedNewItem = false;
+            this.setListData(dataSource, fields, query, e);
         }
     }
     updateSelectElementData(isFiltering) {
@@ -1097,9 +1121,6 @@ let DropDownBase = class DropDownBase extends Component {
                 case 'enableRtl':
                     this.setEnableRtl();
                     break;
-                case 'enabled':
-                    this.setEnabled();
-                    break;
                 case 'groupTemplate':
                     this.renderGroupTemplate(this.list);
                     if (this.ulElement && this.fixedHeaderElement) {
@@ -1126,7 +1147,7 @@ let DropDownBase = class DropDownBase extends Component {
      * @private
      * @returns {void}
      */
-    render(isEmptyData) {
+    render(e, isEmptyData) {
         this.list = this.createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });
         this.list.classList.add(dropDownBaseClasses.root);
         this.setFields();
@@ -1148,9 +1169,8 @@ let DropDownBase = class DropDownBase extends Component {
             wrapperElement.appendChild(this.list);
         }
         this.setEnableRtl();
-        this.setEnabled();
         if (!isEmptyData) {
-            this.initialize();
+            this.initialize(e);
         }
     }
     /**
@@ -1176,7 +1196,7 @@ let DropDownBase = class DropDownBase extends Component {
      * Adds a new item to the popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
      * @deprecated
@@ -1240,11 +1260,17 @@ let DropDownBase = class DropDownBase extends Component {
             this.trigger('beforeItemRender', { element: li, item: item });
         }
         if (itemsCount === 0 && isNullOrUndefined(this.list.querySelector('ul'))) {
-            this.list.innerHTML = '';
-            this.list.classList.remove(dropDownBaseClasses.noData);
-            this.list.appendChild(this.ulElement);
+            if (!isNullOrUndefined(this.list)) {
+                this.list.innerHTML = '';
+                this.list.classList.remove(dropDownBaseClasses.noData);
+                if (!isNullOrUndefined(this.ulElement)) {
+                    this.list.appendChild(this.ulElement);
+                }
+            }
             this.liCollections = liCollections;
-            append(liCollections, this.ulElement);
+            if (!isNullOrUndefined(liCollections) && !isNullOrUndefined(this.ulElement)) {
+                append(liCollections, this.ulElement);
+            }
             this.updateAddItemList(this.list, itemsCount);
         }
         else {
@@ -1291,6 +1317,7 @@ let DropDownBase = class DropDownBase extends Component {
         if (selectedItemValue || itemIndex === 0) {
             this.updateSelection();
         }
+        this.addedNewItem = true;
     }
     validationAttribute(target, hidden) {
         const name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');
@@ -1362,15 +1389,17 @@ let DropDownBase = class DropDownBase extends Component {
             }
             detach(this.list);
         }
+        this.liCollections = null;
+        this.ulElement = null;
+        this.list = null;
+        this.enableRtlElements = null;
+        this.rippleFun = null;
         super.destroy();
     }
 };
 __decorate([
     Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)
 ], DropDownBase.prototype, "fields", void 0);
-__decorate([
-    Property(false)
-], DropDownBase.prototype, "enablePersistence", void 0);
 __decorate([
     Property(null)
 ], DropDownBase.prototype, "itemTemplate", void 0);
@@ -1386,9 +1415,6 @@ __decorate([
 __decorate([
     Property('None')
 ], DropDownBase.prototype, "sortOrder", void 0);
-__decorate([
-    Property(true)
-], DropDownBase.prototype, "enabled", void 0);
 __decorate([
     Property([])
 ], DropDownBase.prototype, "dataSource", void 0);
@@ -1567,8 +1593,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.popupObj.setProperties({ 'zIndex': this.zIndex });
         }
     }
-    renderList(isEmptyData) {
-        super.render(isEmptyData);
+    renderList(e, isEmptyData) {
+        super.render(e, isEmptyData);
         this.unWireListEvents();
         this.wireListEvents();
     }
@@ -1600,6 +1626,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
     }
     clearAll(e, properties) {
+        this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;
         if (isNullOrUndefined(properties) || (!isNullOrUndefined(properties) &&
             (isNullOrUndefined(properties.dataSource) ||
                 (!(properties.dataSource instanceof DataManager) && properties.dataSource.length === 0)))) {
@@ -1625,14 +1652,18 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
             else {
                 if (this.allowFiltering && this.getModuleName() !== 'autocomplete'
-                    && !isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list)) {
+                    && !isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list) && this.actionCompleteData.list.length > 0) {
                     this.onActionComplete(this.actionCompleteData.ulElement.cloneNode(true), this.actionCompleteData.list);
                 }
                 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;
@@ -1654,42 +1685,42 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (Object.keys(this.htmlAttributes).length) {
             for (const htmlAttr of Object.keys(this.htmlAttributes)) {
                 if (htmlAttr === 'class') {
-                    const updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\s+/g, ' ')).trim();
+                    const updatedClassValue = (this.htmlAttributes[`${htmlAttr}`].replace(/\s+/g, ' ')).trim();
                     if (updatedClassValue !== '') {
                         addClass([this.inputWrapper.container], updatedClassValue.split(' '));
                     }
                 }
-                else if (htmlAttr === 'disabled' && this.htmlAttributes[htmlAttr] === 'disabled') {
+                else if (htmlAttr === 'disabled' && this.htmlAttributes[`${htmlAttr}`] === 'disabled') {
                     this.enabled = false;
                     this.setEnable();
                 }
-                else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes[htmlAttr])) {
+                else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes[`${htmlAttr}`])) {
                     this.readonly = true;
                     this.dataBind();
                 }
                 else if (htmlAttr === 'style') {
-                    this.inputWrapper.container.setAttribute('style', this.htmlAttributes[htmlAttr]);
+                    this.inputWrapper.container.setAttribute('style', this.htmlAttributes[`${htmlAttr}`]);
                 }
                 else {
-                    const defaultAttr = ['title', 'id', 'placeholder', 'aria-placeholder',
-                        'role', 'autocorrect', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
+                    const defaultAttr = ['title', 'id', 'placeholder',
+                        'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
                     const validateAttr = ['name', 'required'];
                     if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {
                         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}`]);
                     }
                 }
             }
@@ -1701,11 +1732,8 @@ let DropDownList = class DropDownList extends DropDownBase {
     getAriaAttributes() {
         return {
             'aria-disabled': 'false',
-            'aria-owns': this.element.id + '_options',
             'role': 'combobox',
-            'aria-haspopup': 'true',
             'aria-expanded': 'false',
-            'aria-activedescendant': 'null',
             'aria-live': 'polite',
             'aria-labelledby': this.hiddenElement.id
         };
@@ -1748,7 +1776,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
     }
     targetElement() {
-        return this.inputWrapper.container;
+        return !isNullOrUndefined(this.inputWrapper) ? this.inputWrapper.container : null;
     }
     getNgDirective() {
         return 'EJS-DROPDOWNLIST';
@@ -1906,7 +1934,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
     }
     unBindCommonEvent() {
-        if (this.targetElement()) {
+        if (!isNullOrUndefined(this.inputWrapper) && this.targetElement()) {
             EventHandler.remove(this.targetElement(), 'blur', this.onBlurHandler);
         }
         const formElement = this.inputElement && closest(this.inputElement, 'form');
@@ -1936,9 +1964,11 @@ let DropDownList = class DropDownList extends DropDownBase {
      * @returns {void}
      */
     wireListEvents() {
-        EventHandler.add(this.list, 'click', this.onMouseClick, this);
-        EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
-        EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
+        if (!isNullOrUndefined(this.list)) {
+            EventHandler.add(this.list, 'click', this.onMouseClick, this);
+            EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
+            EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
+        }
     }
     onSearch(e) {
         if (e.charCode !== 32 && e.charCode !== 13) {
@@ -2051,7 +2081,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             const isTabAction = e.action === 'tab' || e.action === 'close';
             if (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape') {
                 this.searchKeyEvent = e;
-                this.renderList();
+                this.renderList(e);
             }
             if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&
                 isNavigation && this.liCollections.length === 0) || this.isRequested) {
@@ -2090,7 +2120,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                     break;
                 case 'open':
-                    this.showPopup();
+                    this.showPopup(e);
                     break;
                 case 'hide':
                     this.preventAltUp = this.isPopupOpen;
@@ -2216,9 +2246,11 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.setSelection(previousItem, event);
     }
     unWireEvent() {
-        EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);
-        EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);
-        EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);
+        if (!isNullOrUndefined(this.inputWrapper)) {
+            EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);
+            EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);
+            EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);
+        }
         this.unBindCommonEvent();
     }
     /**
@@ -2227,9 +2259,11 @@ let DropDownList = class DropDownList extends DropDownBase {
      * @returns {void}
      */
     unWireListEvents() {
-        EventHandler.remove(this.list, 'click', this.onMouseClick);
-        EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
-        EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
+        if (this.list) {
+            EventHandler.remove(this.list, 'click', this.onMouseClick);
+            EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
+            EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
+        }
     }
     checkSelector(id) {
         return '[id="' + id.replace(/(:|\.|\[|\]|,|=|@|\\|\/|#)/g, '\\$1') + '"]';
@@ -2237,7 +2271,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     onDocumentClick(e) {
         const target = e.target;
         if (!(!isNullOrUndefined(this.popupObj) && closest(target, this.checkSelector(this.popupObj.element.id))) &&
-            !this.inputWrapper.container.contains(e.target)) {
+            !isNullOrUndefined(this.inputWrapper) && !this.inputWrapper.container.contains(e.target)) {
             if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {
                 this.isDocumentClick = true;
                 const isActive = this.isRequested;
@@ -2282,7 +2316,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         if (!this.readonly) {
             if (this.isPopupOpen) {
-                this.hidePopup();
+                this.hidePopup(e);
                 if (this.isFilterLayout()) {
                     this.focusDropDown(e);
                 }
@@ -2292,7 +2326,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.floatLabelChange();
                 this.queryString = this.inputElement.value.trim() === '' ? null : this.inputElement.value;
                 this.isDropDownClick = true;
-                this.showPopup();
+                this.showPopup(e);
             }
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const proxy = this;
@@ -2355,6 +2389,9 @@ let DropDownList = class DropDownList extends DropDownBase {
     }
     selectEventCallback(li, e, preventSelect, selectedData, value) {
         this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;
+        if (this.itemData != selectedData) {
+            this.previousValue = (!isNullOrUndefined(this.itemData)) ? typeof this.itemData == "object" ? this.checkFieldValue(this.itemData, this.fields.value.split('.')) : this.itemData : null;
+        }
         this.item = li;
         this.itemData = selectedData;
         const focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
@@ -2425,10 +2462,6 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (this.setValue(e)) {
             return;
         }
-        attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
-        if (this.isFilterLayout() && this.filterInput) {
-            attributes(this.filterInput, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
-        }
         if ((!this.isPopupOpen && !isNullOrUndefined(li)) || (this.isPopupOpen && !isNullOrUndefined(e) &&
             (e.type !== 'keydown' || e.type === 'keydown' && e.action === 'enter'))) {
             this.isSelectCustom = false;
@@ -2438,9 +2471,17 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.setScrollPosition(e);
         }
         if (Browser.info.name !== 'mozilla') {
-            attributes(this.inputElement, { 'aria-label': this.inputElement.value });
-            attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id });
-            this.targetElement().removeAttribute('aria-live');
+            if (this.targetElement()) {
+                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');
+            }
+        }
+        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 (this.isPopupOpen && !isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-active')[0])) {
+            attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });
         }
     }
     dropdownCompiler(dropdownTemplate) {
@@ -2605,9 +2646,11 @@ let DropDownList = class DropDownList extends DropDownBase {
                 selectedElement.setAttribute('value', this.value.toString());
             }
             else {
-                this.hiddenElement.innerHTML = '<option selected>' + this.text + '</option>';
-                const selectedElement = this.hiddenElement.querySelector('option');
-                selectedElement.setAttribute('value', this.value.toString());
+                if (!isNullOrUndefined(this.hiddenElement)) {
+                    this.hiddenElement.innerHTML = '<option selected>' + this.text + '</option>';
+                    const selectedElement = this.hiddenElement.querySelector('option');
+                    selectedElement.setAttribute('value', this.value.toString());
+                }
             }
         }
         else {
@@ -2634,6 +2677,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                         this.preventAutoFill = false;
                     }
                     this.preventAltUp = false;
+                    if (this.getModuleName() === 'autocomplete' && !isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
+                        attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
+                    }
                     e.preventDefault();
                     break;
                 case 46: //delete
@@ -2755,9 +2801,9 @@ let DropDownList = class DropDownList extends DropDownBase {
     /**
      * To filter the data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @param {Query} query - Specify the query to filter the data.
+     * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
      * @deprecated
      */
@@ -2823,11 +2869,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             prepend([parentElement], popupElement);
             attributes(this.filterInput, {
                 'aria-disabled': 'false',
-                'aria-owns': this.element.id + '_options',
-                'role': 'listbox',
-                'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null,
+                'role': 'combobox',
                 'autocomplete': 'off',
-                'autocorrect': 'off',
                 'autocapitalize': 'off',
                 'spellcheck': 'false'
             });
@@ -2911,7 +2954,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.initRemoteRender = false;
                 if (this.value && this.dataSource instanceof DataManager) {
                     const checkField = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
-                    const checkVal = list.some((x) => x[checkField] === this.value);
+                    const fieldValue = this.fields.value.split('.');
+                    const checkVal = list.some((x) => isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ? this.checkFieldValue(x, fieldValue) === this.value : x[checkField] === this.value);
                     if (!checkVal) {
                         this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', this.value)))
                             .then((e) => {
@@ -2933,6 +2977,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
                 this.initial = false;
             }
+            else if (this.getModuleName() === 'autocomplete' && this.value) {
+                this.setInputValue();
+            }
             if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {
                 if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter
                     && !this.isFilterFocus) || (isNullOrUndefined(this.itemData) && this.allowFiltering)
@@ -2954,10 +3001,17 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
             }
             if (this.beforePopupOpen) {
-                this.renderPopup();
+                this.renderPopup(e);
             }
         }
     }
+    checkFieldValue(list, fieldValue) {
+        let checkField = list;
+        fieldValue.forEach((value) => {
+            checkField = checkField[value];
+        });
+        return checkField;
+    }
     updateActionCompleteDataValues(ulElement, list) {
         this.actionCompleteData = { ulElement: ulElement.cloneNode(true), list: list, isUpdated: true };
         if (this.actionData.list !== this.actionCompleteData.list && this.actionCompleteData.ulElement && this.actionCompleteData.list) {
@@ -3024,7 +3078,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             removeClass(highlightedItem, dropDownListClasses.focus);
         }
     }
-    renderPopup() {
+    renderPopup(e) {
         if (this.popupObj && document.body.contains(this.popupObj.element)) {
             this.refreshPopup();
             return;
@@ -3080,9 +3134,11 @@ let DropDownList = class DropDownList extends DropDownBase {
                     (this.isDropDownClick && this.getModuleName() === 'combobox')))) {
                     offsetValue = this.getOffsetValue(popupEle);
                     const firstItem = this.isEmptyList() ? this.list : this.liCollections[0];
-                    left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -
-                        parseInt(getComputedStyle(this.inputElement).paddingLeft, 10) +
-                        parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10));
+                    if (!isNullOrUndefined(this.inputElement)) {
+                        left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -
+                            parseInt(getComputedStyle(this.inputElement).paddingLeft, 10) +
+                            parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10));
+                    }
                 }
                 this.getFocusElement();
                 this.createPopup(popupEle, offsetValue, left);
@@ -3112,25 +3168,28 @@ let DropDownList = class DropDownList extends DropDownBase {
                 for (const element of scrollParentElements) {
                     EventHandler.add(element, 'scroll', this.scrollHandler, this);
                 }
-                if (Browser.isDevice && this.isFilterLayout()) {
-                    EventHandler.add(this.list, 'scroll', this.listScroll, this);
-                }
                 if (!isNullOrUndefined(this.list)) {
                     this.unWireListEvents();
                     this.wireListEvents();
                 }
-                attributes(this.targetElement(), { 'aria-expanded': 'true' });
+                this.selectedElementID = this.selectedLI ? this.selectedLI.id : null;
+                attributes(this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': this.inputElement.id + '_options' });
+                this.inputElement.setAttribute('aria-expanded', 'true');
                 const inputParent = this.isFiltering() ? this.filterInput.parentElement : this.inputWrapper.container;
                 addClass([inputParent], [dropDownListClasses.inputFocus]);
                 const animModel = { name: 'FadeIn', duration: 100 };
                 this.beforePopupOpen = true;
                 const popupInstance = this.popupObj;
-                const eventArgs = { popup: popupInstance, cancel: false, animation: animModel };
+                const eventArgs = { popup: popupInstance, event: e, cancel: false, animation: animModel };
                 this.trigger('open', eventArgs, (eventArgs) => {
                     if (!eventArgs.cancel) {
-                        addClass([this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
+                        if (!isNullOrUndefined(this.inputWrapper)) {
+                            addClass([this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
+                        }
                         this.renderReactTemplates();
-                        this.popupObj.show(new Animation(eventArgs.animation), (this.zIndex === 1000) ? this.element : null);
+                        if (!isNullOrUndefined(this.popupObj)) {
+                            this.popupObj.show(new Animation(eventArgs.animation), (this.zIndex === 1000) ? this.element : null);
+                        }
                     }
                     else {
                         this.beforePopupOpen = false;
@@ -3187,6 +3246,12 @@ let DropDownList = class DropDownList extends DropDownBase {
                 const actionList = this.actionCompleteData && this.actionCompleteData.ulElement &&
                     this.actionCompleteData.ulElement.querySelector('li');
                 const ulElement = this.list.querySelector('ul li');
+                if (!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])) {
+                    attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });
+                }
                 if (this.isFiltering() && this.itemTemplate && (this.element.tagName === this.getNgDirective()) &&
                     (actionList && ulElement && actionList.textContent !== ulElement.textContent) &&
                     this.element.tagName !== 'EJS-COMBOBOX') {
@@ -3342,9 +3407,6 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.filterInput.value = this.typedString = '';
         this.searchLists(null);
     }
-    listScroll() {
-        this.filterInput.blur();
-    }
     setEleWidth(width) {
         if (!isNullOrUndefined(width)) {
             if (typeof width === 'number') {
@@ -3371,7 +3433,6 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         if (Browser.isDevice && this.isFilterLayout()) {
             removeClass([document.body, this.popupObj.element], dropDownListClasses.popupFullScreen);
-            EventHandler.remove(this.list, 'scroll', this.listScroll);
         }
         if (this.isFilterLayout()) {
             if (!Browser.isDevice) {
@@ -3384,14 +3445,19 @@ let DropDownList = class DropDownList extends DropDownBase {
                 EventHandler.remove(this.backIconElement, 'click', this.clickOnBackIcon);
                 EventHandler.remove(this.clearIconElement, 'click', this.clearText);
             }
-            EventHandler.remove(this.filterInput, 'input', this.onInput);
-            EventHandler.remove(this.filterInput, 'keyup', this.onFilterUp);
-            EventHandler.remove(this.filterInput, 'keydown', this.onFilterDown);
-            EventHandler.remove(this.filterInput, 'blur', this.onBlurHandler);
-            EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);
+            if (!isNullOrUndefined(this.filterInput)) {
+                EventHandler.remove(this.filterInput, 'input', this.onInput);
+                EventHandler.remove(this.filterInput, 'keyup', this.onFilterUp);
+                EventHandler.remove(this.filterInput, 'keydown', this.onFilterDown);
+                EventHandler.remove(this.filterInput, 'blur', this.onBlurHandler);
+                EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);
+            }
             this.filterInput = null;
         }
         attributes(this.targetElement(), { 'aria-expanded': 'false' });
+        this.inputElement.setAttribute('aria-expanded', 'false');
+        this.targetElement().removeAttribute('aria-owns');
+        this.targetElement().removeAttribute('aria-activedescendant');
         this.inputWrapper.container.classList.remove(dropDownListClasses.iconAnimation);
         if (this.isFiltering()) {
             this.actionCompleteData.isUpdated = false;
@@ -3444,14 +3510,15 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (this.element.tagName === 'INPUT') {
             this.inputElement = this.element;
             if (isNullOrUndefined(this.inputElement.getAttribute('role'))) {
-                this.inputElement.setAttribute('role', 'textbox');
+                this.inputElement.setAttribute('role', 'combobox');
             }
             if (isNullOrUndefined(this.inputElement.getAttribute('type'))) {
                 this.inputElement.setAttribute('type', 'text');
             }
+            this.inputElement.setAttribute('aria-expanded', 'false');
         }
         else {
-            this.inputElement = this.createElement('input', { attrs: { role: 'textbox', type: 'text' } });
+            this.inputElement = this.createElement('input', { attrs: { role: 'combobox', type: 'text' } });
             if (this.element.tagName !== this.getNgDirective()) {
                 this.element.style.display = 'none';
             }
@@ -3462,6 +3529,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
             updatedCssClassValues = (this.cssClass.replace(/\s+/g, ' ')).trim();
         }
+        if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+            this.enabled = false;
+        }
         this.inputWrapper = Input.createInput({
             element: this.inputElement,
             buttons: this.isPopupButton() ? [dropDownListClasses.icon] : null,
@@ -3490,6 +3560,10 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.setFields();
         this.inputWrapper.container.style.width = formatUnit(this.width);
         this.inputWrapper.container.classList.add('e-ddl');
+        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never') {
+            this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
+        }
         this.wireEvent();
         this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
         this.element.removeAttribute('tabindex');
@@ -3500,6 +3574,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         attributes(this.targetElement(), this.getAriaAttributes());
         this.updateDataAttribute(this.htmlAttributes);
         this.setHTMLAttributes();
+        if (this.targetElement() === this.inputElement) {
+            this.inputElement.removeAttribute('aria-labelledby');
+        }
         if (this.value !== null || this.activeIndex !== null || this.text !== null) {
             this.initValue();
         }
@@ -3509,6 +3586,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectElement.selectedIndex].textContent;
             this.initValue();
         }
+        this.setEnabled();
         this.preventTabIndex(this.element);
         if (!this.enabled) {
             this.targetElement().tabIndex = -1;
@@ -3530,12 +3608,22 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
         }
+        const floatLabelElement = this.inputWrapper.container.getElementsByClassName('e-float-text')[0];
+        if (!isNullOrUndefined(this.element.id) && this.element.id !== '' && !isNullOrUndefined(floatLabelElement)) {
+            floatLabelElement.id = 'label_' + this.element.id.replace(/ /g, '_');
+            attributes(this.inputElement, { 'aria-labelledby': floatLabelElement.id });
+        }
         this.renderComplete();
     }
     setFooterTemplate(popupEle) {
         let compiledString;
         if (this.footer) {
-            this.footer.innerHTML = '';
+            if (this.isReact) {
+                this.clearTemplate(['footerTemplate']);
+            }
+            else {
+                this.footer.innerHTML = '';
+            }
         }
         else {
             this.footer = this.createElement('div');
@@ -3583,6 +3671,14 @@ let DropDownList = class DropDownList extends DropDownBase {
         const contentEle = popupEle.querySelector('div.e-content');
         popupEle.insertBefore(this.header, contentEle);
     }
+    /**
+     * Sets the enabled state to DropDownBase.
+     *
+     * @returns {void}
+     */
+    setEnabled() {
+        this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');
+    }
     setOldText(text) {
         this.text = text;
     }
@@ -3669,6 +3765,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                     break;
                 case 'width':
                     this.setEleWidth(newProp.width);
+                    Input.calculateWidth(this.inputElement, this.inputWrapper.container);
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(newProp.placeholder, this.inputElement);
@@ -3686,6 +3783,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                     break;
                 case 'cssClass':
                     this.setCssClass(newProp.cssClass, oldProp.cssClass);
+                    Input.calculateWidth(this.inputElement, this.inputWrapper.container);
                     break;
                 case 'enableRtl':
                     this.setEnableRtl();
@@ -3726,6 +3824,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                                     }
                                 });
                             }
+                            else if (this.getModuleName() === 'autocomplete') {
+                                this.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this.setOldText(oldProp.text);
                             }
@@ -3767,6 +3868,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                                     }
                                 });
                             }
+                            else if (this.getModuleName() === 'autocomplete') {
+                                this.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this.setOldValue(oldProp.value);
                             }
@@ -3826,6 +3930,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                 case 'floatLabelType':
                     Input.removeFloating(this.inputWrapper);
                     Input.addFloating(this.inputElement, newProp.floatLabelType, this.placeholder, this.createElement);
+                    if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0] && this.floatLabelType !== 'Never') {
+                        this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
+                    }
                     break;
                 case 'showClearButton':
                     Input.setClearButton(newProp.showClearButton, this.inputElement, this.inputWrapper, null, this.createElement);
@@ -3879,6 +3986,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             removeClass([this.inputWrapper.container], ['e-readonly']);
         }
     }
+    setInputValue(newProp, oldProp) {
+    }
     setCssClass(newClass, oldClass) {
         if (!isNullOrUndefined(oldClass)) {
             oldClass = (oldClass.replace(/\s+/g, ' ')).trim();
@@ -3905,7 +4014,7 @@ let DropDownList = class DropDownList extends DropDownBase {
      *
      * @returns {void}
      */
-    showPopup() {
+    showPopup(e) {
         if (!this.enabled) {
             return;
         }
@@ -3925,11 +4034,11 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         else if (isNullOrUndefined(this.list) || !isUndefined(this.list) && (this.list.classList.contains(dropDownBaseClasses.noData) ||
             this.list.querySelectorAll('.' + dropDownBaseClasses.li).length <= 0)) {
-            this.renderList();
+            this.renderList(e);
         }
-        this.invokeRenderPopup();
+        this.invokeRenderPopup(e);
     }
-    invokeRenderPopup() {
+    invokeRenderPopup(e) {
         if (Browser.isDevice && this.isFilterLayout()) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const proxy = this;
@@ -3938,10 +4047,9 @@ let DropDownList = class DropDownList extends DropDownBase {
             };
             history.pushState({}, '');
         }
-        if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {
-            this.renderPopup();
+        if (!isNullOrUndefined(this.list) && (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData))) {
+            this.renderPopup(e);
         }
-        attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
     }
     renderHightSearch() {
         // update high light search
@@ -3955,7 +4063,9 @@ let DropDownList = class DropDownList extends DropDownBase {
     hidePopup(e) {
         /* eslint-enable valid-jsdoc, jsdoc/require-param */
         if (this.isEscapeKey && this.getModuleName() === 'dropdownlist') {
-            Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+            if (!isNullOrUndefined(this.inputElement)) {
+                Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+            }
             this.isEscapeKey = false;
             if (!isNullOrUndefined(this.index)) {
                 const element = this.findListElement(this.ulElement, 'li', 'data-value', this.value);
@@ -4005,6 +4115,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         addClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);
         this.onFocus(e);
+        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
     }
     /**
      * Moves the focus from the component if the component is already focused.
@@ -4022,6 +4133,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.targetElement().blur();
         }
         removeClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);
+        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
     }
     /**
      * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
@@ -4045,10 +4157,9 @@ let DropDownList = class DropDownList extends DropDownBase {
             return;
         }
         if (this.inputElement) {
-            const attrArray = ['readonly', 'aria-disabled', 'aria-placeholder',
-                'placeholder', 'aria-owns', 'aria-labelledby', 'aria-haspopup', 'aria-expanded',
-                'aria-activedescendant', 'autocomplete', 'aria-readonly', 'autocorrect',
-                'autocapitalize', 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label'];
+            const attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',
+                'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',
+                'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label'];
             for (let i = 0; i < attrArray.length; i++) {
                 this.inputElement.removeAttribute(attrArray[i]);
             }
@@ -4064,6 +4175,21 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.inputWrapper.container.parentElement.insertBefore(this.element, this.inputWrapper.container);
             detach(this.inputWrapper.container);
         }
+        this.hiddenElement = null;
+        this.inputWrapper = null;
+        this.keyboardModule = null;
+        this.ulElement = null;
+        this.list = null;
+        this.popupObj = null;
+        this.rippleFun = null;
+        this.selectedLI = null;
+        this.liCollections = null;
+        this.item = null;
+        this.inputWrapper = null;
+        this.footer = null;
+        this.header = null;
+        this.previousSelectedLI = null;
+        this.valueTempElement = null;
         super.destroy();
     }
     /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
@@ -4106,6 +4232,12 @@ __decorate$1([
 __decorate$1([
     Property('100%')
 ], DropDownList.prototype, "width", void 0);
+__decorate$1([
+    Property(true)
+], DropDownList.prototype, "enabled", void 0);
+__decorate$1([
+    Property(false)
+], DropDownList.prototype, "enablePersistence", void 0);
 __decorate$1([
     Property('300px')
 ], DropDownList.prototype, "popupHeight", void 0);
@@ -4267,6 +4399,9 @@ __decorate$2([
 __decorate$2([
     Property(null)
 ], Fields.prototype, "query", void 0);
+__decorate$2([
+    Property('selectable')
+], Fields.prototype, "selectable", void 0);
 __decorate$2([
     Property('selected')
 ], Fields.prototype, "selected", void 0);
@@ -4315,6 +4450,8 @@ let DropDownTree = class DropDownTree extends Component {
         this.selectedData = [];
         this.filterDelayTime = 300;
         this.isClicked = false;
+        // Specifies if the checkAll method has been called
+        this.isCheckAllCalled = false;
     }
     /**
      * Get the properties to be maintained in the persisted state.
@@ -4442,7 +4579,7 @@ let DropDownTree = class DropDownTree extends Component {
         this.updateDataAttribute();
         this.setHTMLAttributes();
         this.setAttributes();
-        this.popupDiv = this.createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });
+        this.popupDiv = this.createElement('div', { className: CONTENT });
         this.popupDiv.classList.add(DROPDOWN);
         this.tree = this.createElement('div', { id: this.element.id + '_tree' });
         this.popupDiv.appendChild(this.tree);
@@ -5062,7 +5199,12 @@ let DropDownTree = class DropDownTree extends Component {
                         temp = this.getOverflowVal(index);
                         data += temp;
                         temp = this.overFlowWrapper.innerHTML;
-                        this.overFlowWrapper.innerHTML = data;
+                        if (this.enableHtmlSanitizer) {
+                            this.overFlowWrapper.innerText = data;
+                        }
+                        else {
+                            this.overFlowWrapper.innerHTML = data;
+                        }
                         wrapperleng = this.overFlowWrapper.offsetWidth;
                         overAllContainer = this.inputWrapper.offsetWidth;
                         if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {
@@ -5232,7 +5374,7 @@ let DropDownTree = class DropDownTree extends Component {
             if (isValid && this.value !== null && (this.value && this.value.length !== 0)) {
                 addClass([this.inputEle], CHIP_INPUT);
             }
-            else if (this.value === null || (this.value && this.value.length === 0)) {
+            else if (this.value === null || (this.value && this.value.length === 0) || this.chipWrapper) {
                 addClass([this.chipWrapper], HIDEICON);
             }
         }
@@ -5287,6 +5429,7 @@ let DropDownTree = class DropDownTree extends Component {
             frameSpan.classList.add(CHECK);
             ariaState = 'true';
             if (!this.isReverseUpdate) {
+                this.isCheckAllCalled = true;
                 this.treeObj.checkAll();
                 if (!this.changeOnBlur) {
                     this.triggerChangeEvent(e);
@@ -5587,10 +5730,12 @@ let DropDownTree = class DropDownTree extends Component {
             nodeSelected: this.onNodeSelected.bind(this),
             nodeChecked: this.onNodeChecked.bind(this),
             nodeChecking: this.beforeCheck.bind(this),
+            nodeExpanded: this.onNodeExpanded.bind(this),
             actionFailure: this.onActionFailure.bind(this),
             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,
@@ -5692,7 +5837,7 @@ let DropDownTree = class DropDownTree extends Component {
             const height = Math.round(this.header.getBoundingClientRect().height);
             popupHeight = formatUnit(parseInt(popupHeight, 10) - height + 'px');
         }
-        if (this.showCheckBox && this.showSelectAll) {
+        if (this.showCheckBox && this.showSelectAll && (!this.popupDiv.classList.contains(NODATA))) {
             const height = Math.round(this.checkAllParent.getBoundingClientRect().height);
             popupHeight = formatUnit(parseInt(popupHeight, 10) - height + 'px');
         }
@@ -5774,14 +5919,14 @@ let DropDownTree = class DropDownTree extends Component {
         const isFooter = closest(target, '.' + FOOTER);
         const isScroller = target.classList.contains(DROPDOWN) ? true :
             (matches(target, '.e-ddt .e-popup') || matches(target, '.e-ddt .e-treeview'));
-        if ((this.isPopupOpen && (this.inputWrapper.contains(target) || isTree || isFilter || isScroller || isHeader || isFooter)) ||
+        if ((this.isPopupOpen && (this.inputWrapper.contains(target) || isTree || isScroller || isHeader || isFooter)) ||
             ((this.allowMultiSelection || this.showCheckBox) && (this.isPopupOpen && target.classList.contains(CHIP_CLOSE) ||
                 (this.isPopupOpen && (target.classList.contains(CHECKALLPARENT) || target.classList.contains(ALLTEXT)
                     || target.classList.contains(CHECKBOXFRAME)))))) {
             this.isDocumentClick = false;
             e.preventDefault();
         }
-        else if (!this.inputWrapper.contains(target) && this.inputFocus) {
+        else if (!this.inputWrapper.contains(target) && this.inputFocus && !isFilter) {
             this.focusOut(e);
         }
     }
@@ -5814,6 +5959,9 @@ let DropDownTree = class DropDownTree extends Component {
         }
         const eventArgs = { data: args.data };
         this.trigger('dataBound', eventArgs);
+        if (this.filterObj === null) {
+            this.isFilteredData = false;
+        }
         if (this.isFilteredData) {
             this.treeObj.expandAll();
         }
@@ -5881,7 +6029,7 @@ let DropDownTree = class DropDownTree extends Component {
             dataSource: fields.dataSource, value: fields.value, text: fields.text, parentValue: fields.parentValue,
             child: this.cloneChildField(fields.child), hasChildren: fields.hasChildren, expanded: fields.expanded,
             iconCss: fields.iconCss, imageUrl: fields.imageUrl, htmlAttributes: fields.htmlAttributes, query: fields.query,
-            selected: fields.selected, tableName: fields.tableName, tooltip: fields.tooltip
+            selected: fields.selected, selectable: fields.selectable, tableName: fields.tableName, tooltip: fields.tooltip
         };
         return clonedField;
     }
@@ -5894,7 +6042,7 @@ let DropDownTree = class DropDownTree extends Component {
                 dataSource: fields.dataSource, value: fields.value, text: fields.text, parentValue: fields.parentValue,
                 child: (fields.child ? this.cloneChildField(fields.child) : null), hasChildren: fields.hasChildren,
                 expanded: fields.expanded, iconCss: fields.iconCss, imageUrl: fields.imageUrl, htmlAttributes: fields.htmlAttributes,
-                query: fields.query, selected: fields.selected, tableName: fields.tableName, tooltip: fields.tooltip
+                query: fields.query, selected: fields.selected, selectable: fields.selectable, tableName: fields.tableName, tooltip: fields.tooltip
             };
             return clonedField;
         }
@@ -5904,7 +6052,7 @@ let DropDownTree = class DropDownTree extends Component {
             dataSource: fields.dataSource, id: fields.value, text: fields.text, parentID: fields.parentValue,
             child: this.getTreeChildren(fields.child), hasChildren: fields.hasChildren, expanded: fields.expanded,
             iconCss: fields.iconCss, imageUrl: fields.imageUrl, isChecked: fields.selected,
-            htmlAttributes: fields.htmlAttributes, query: fields.query, selected: fields.selected,
+            htmlAttributes: fields.htmlAttributes, query: fields.query, selectable: fields.selectable, selected: fields.selected,
             tableName: fields.tableName, tooltip: fields.tooltip
         };
         return treeFields;
@@ -5942,7 +6090,8 @@ let DropDownTree = class DropDownTree extends Component {
             }
             return 2;
         }
-        this.fields.dataSource = isNullOrUndefined(this.fields.dataSource) ? [] : this.fields.dataSource;
+        if (isNullOrUndefined(this.fields.dataSource))
+            this.fields.dataSource = [];
         for (let i = 0, len = this.fields.dataSource.length; i < len; i++) {
             if ((typeof field.child === 'string') && !isNullOrUndefined(getValue(field.child, this.fields.dataSource[i]))) {
                 return 2;
@@ -6081,13 +6230,14 @@ let DropDownTree = class DropDownTree extends Component {
             const nodes = this.treeObj.element.querySelectorAll('li');
             const checkedNodes = this.treeObj.element.querySelectorAll('li .e-checkbox-wrapper[aria-checked=true]');
             const wrap = closest(this.checkBoxElement, '.' + CHECKBOXWRAP);
-            if (wrap && args.action === 'uncheck') {
+            if (wrap && args.action === 'uncheck' && (args.isInteracted || checkedNodes.length === 0)) {
                 this.isReverseUpdate = true;
                 this.changeState(wrap, 'uncheck');
                 this.isReverseUpdate = false;
             }
-            else if (wrap && args.action === 'check' && checkedNodes.length === nodes.length) {
+            else if (wrap && args.action === 'check' && checkedNodes.length === nodes.length && this.isCheckAllCalled) {
                 this.isReverseUpdate = true;
+                this.isCheckAllCalled = false;
                 this.changeState(wrap, 'check');
                 this.isReverseUpdate = false;
             }
@@ -6098,6 +6248,13 @@ let DropDownTree = class DropDownTree extends Component {
             this.oldValue = this.value ? this.value.slice() : this.value;
         }
     }
+    onNodeExpanded(args) {
+        if (this.hasTemplate && this.portals) {
+            this.portals = [].concat(this.treeObj.portals);
+            /* eslint-enable */
+            this.renderReactTemplates();
+        }
+    }
     updateClearButton(state) {
         if (state) {
             if (!this.inputWrapper.contains(this.overAllClear)) {
@@ -6398,7 +6555,12 @@ let DropDownTree = class DropDownTree extends Component {
         });
         const chipContent = this.createElement('span', { className: CHIP_CONTENT });
         const chipClose = this.createElement('span', { className: CHIP_CLOSE + ' ' + ICONS });
-        chipContent.innerHTML = text;
+        if (this.enableHtmlSanitizer) {
+            chipContent.innerText = text;
+        }
+        else {
+            chipContent.innerHTML = text;
+        }
         chip.appendChild(chipContent);
         this.chipCollection.appendChild(chip);
         if (this.showClearButton) {
@@ -6594,6 +6756,7 @@ let DropDownTree = class DropDownTree extends Component {
     selectAllItems(state) {
         if (this.showCheckBox) {
             if (state) {
+                this.isCheckAllCalled = true;
                 this.treeObj.checkAll();
             }
             else {
@@ -6688,8 +6851,6 @@ let DropDownTree = class DropDownTree extends Component {
         }
         else {
             this.noRecord = this.createElement('div');
-            addClass([this.noRecord], NODATACONTAINER);
-            prepend([this.noRecord], this.popupDiv);
         }
         if (this.noRecordsTemplate !== 'No Records Found' || this.actionFailureTemplate !== 'The Request Failed') {
             const template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;
@@ -6701,6 +6862,8 @@ let DropDownTree = class DropDownTree extends Component {
             if (tempArr) {
                 tempArr = Array.prototype.slice.call(tempArr);
                 append(tempArr, this.noRecord);
+                addClass([this.noRecord], NODATACONTAINER);
+                prepend([this.noRecord], this.popupDiv);
             }
         }
         else {
@@ -6709,6 +6872,8 @@ let DropDownTree = class DropDownTree extends Component {
             this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
             this.noRecord.innerHTML = actionFailure ?
                 this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');
+            addClass([this.noRecord], NODATACONTAINER);
+            prepend([this.noRecord], this.popupDiv);
         }
     }
     updateRecordTemplate(action) {
@@ -7220,6 +7385,9 @@ __decorate$2([
 __decorate$2([
     Property(false)
 ], DropDownTree.prototype, "showCheckBox", void 0);
+__decorate$2([
+    Property(false)
+], DropDownTree.prototype, "enableHtmlSanitizer", void 0);
 __decorate$2([
     Property(true)
 ], DropDownTree.prototype, "showClearButton", void 0);
@@ -7457,15 +7625,12 @@ let ComboBox = class ComboBox extends DropDownList {
     }
     getAriaAttributes() {
         const ariaAttributes = {
-            'aria-owns': this.element.id + '_options',
             'role': 'combobox',
             'aria-autocomplete': 'both',
             'aria-labelledby': this.hiddenElement.id,
-            'aria-hasPopup': 'true',
             'aria-expanded': 'false',
             'aria-readonly': this.readonly.toString(),
             'autocomplete': 'off',
-            'autocorrect': 'off',
             'autocapitalize': 'off',
             'spellcheck': 'false'
         };
@@ -7507,7 +7672,7 @@ let ComboBox = class ComboBox extends DropDownList {
     }
     getFocusElement() {
         const dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();
-        const selected = this.list.querySelector('.' + dropDownListClasses.selected);
+        const selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : this.list;
         const isSelected = dataItem.text === this.inputElement.value && !isNullOrUndefined(selected);
         if (isSelected) {
             return selected;
@@ -7515,8 +7680,10 @@ let ComboBox = class ComboBox extends DropDownList {
         if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
             !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
             const inputValue = this.inputElement.value;
-            const activeItem = Search(inputValue, this.liCollections, this.filterType, true);
-            const activeElement = activeItem.item;
+            const dataSource = this.sortedData;
+            const type = this.typeOfData(dataSource).typeof;
+            const activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);
+            var activeElement = activeItem.item;
             if (!isNullOrUndefined(activeElement)) {
                 const count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
                 const height = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);
@@ -7556,7 +7723,7 @@ let ComboBox = class ComboBox extends DropDownList {
         this.itemData = this.getDataByValue(this.value);
         const dataItem = this.getItemData();
         if (!(this.allowCustom && isNullOrUndefined(dataItem.value) && isNullOrUndefined(dataItem.text))) {
-            this.setProperties({ 'value': dataItem.value, 'text': dataItem.text }, !this.allowCustom);
+            this.setProperties({ 'value': dataItem.value }, !this.allowCustom);
         }
     }
     /**
@@ -7665,9 +7832,11 @@ let ComboBox = class ComboBox extends DropDownList {
         }
         else if (this.inputElement.value === '') {
             this.activeIndex = null;
-            this.list.scrollTop = 0;
-            const focusItem = this.list.querySelector('.' + dropDownListClasses.li);
-            this.setHoverList(focusItem);
+            if (!isNullOrUndefined(this.list)) {
+                this.list.scrollTop = 0;
+                const focusItem = this.list.querySelector('.' + dropDownListClasses.li);
+                this.setHoverList(focusItem);
+            }
         }
         else {
             this.activeIndex = null;
@@ -7678,7 +7847,7 @@ let ComboBox = class ComboBox extends DropDownList {
         }
     }
     incrementalSearch(e) {
-        this.showPopup();
+        this.showPopup(e);
         if (!isNullOrUndefined(this.listData)) {
             this.inlineSearch(e);
             e.preventDefault();
@@ -7763,6 +7932,7 @@ let ComboBox = class ComboBox extends DropDownList {
             this.preventFocus = false;
         }
         this.onFocus(e);
+        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
     }
     dropDownClick(e) {
         e.preventDefault();
@@ -7912,7 +8082,7 @@ let ComboBox = class ComboBox extends DropDownList {
      * Adds a new item to the combobox popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
      * @deprecated
@@ -7923,9 +8093,9 @@ let ComboBox = class ComboBox extends DropDownList {
     /**
      * To filter the data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @param {Query} query - Specify the query to filter the data.
+     * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
      * @deprecated
      */
@@ -7938,8 +8108,8 @@ let ComboBox = class ComboBox extends DropDownList {
      * @returns {void}
      * @deprecated
      */
-    showPopup() {
-        super.showPopup();
+    showPopup(e) {
+        super.showPopup(e);
     }
     /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
@@ -7962,7 +8132,7 @@ let ComboBox = class ComboBox extends DropDownList {
                 this.removeFillSelection();
             }
             const dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();
-            const selected = this.list.querySelector('.' + dropDownListClasses.selected);
+            const selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : null;
             if (this.inputElement && dataItem.text === this.inputElement.value && !isNullOrUndefined(selected)) {
                 if (this.isSelected) {
                     this.onChangeEvent(e);
@@ -7972,10 +8142,12 @@ let ComboBox = class ComboBox extends DropDownList {
                 return;
             }
             if (this.getModuleName() === 'combobox' && this.inputElement.value.trim() !== '') {
-                const searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true);
+                const dataSource = this.sortedData;
+                const type = this.typeOfData(dataSource).typeof;
+                const searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true, dataSource, this.fields, type);
                 this.selectedLI = searchItem.item;
                 if (isNullOrUndefined(searchItem.index)) {
-                    searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true).index;
+                    searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true, dataSource, this.fields, type).index;
                 }
                 this.activeIndex = searchItem.index;
                 if (!isNullOrUndefined(this.selectedLI)) {
@@ -8214,13 +8386,13 @@ let AutoComplete = class AutoComplete extends ComboBox {
         this.isTyped = true;
         this.isDataFetched = this.isSelectCustom = false;
         if (isNullOrUndefined(this.list)) {
-            super.renderList(true);
+            super.renderList(e, true);
         }
         this.queryString = this.filterInput.value;
         if (e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38)) {
             this.queryString = this.queryString === '' ? null : this.queryString;
             this.beforePopupOpen = true;
-            this.resetList(this.dataSource, this.fields);
+            this.resetList(this.dataSource, this.fields, null, e);
             return;
         }
         this.isSelected = false;
@@ -8240,16 +8412,16 @@ let AutoComplete = class AutoComplete extends ComboBox {
         this.trigger('filtering', eventArgs, (eventArgs) => {
             if (!eventArgs.cancel && !this.isFiltered && !eventArgs.preventDefaultAction) {
                 this.searchList = true;
-                this.filterAction(this.dataSource, null, this.fields);
+                this.filterAction(this.dataSource, null, this.fields, e);
             }
         });
     }
     /**
      * 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
      */
@@ -8257,13 +8429,13 @@ let AutoComplete = class AutoComplete extends ComboBox {
         this.isFiltered = true;
         this.filterAction(dataSource, query, fields);
     }
-    filterAction(dataSource, query, fields) {
+    filterAction(dataSource, query, fields, e) {
         this.beforePopupOpen = true;
         if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {
-            this.resetList(dataSource, fields, query);
+            this.resetList(dataSource, fields, query, e);
         }
         else {
-            this.hidePopup();
+            this.hidePopup(e);
             this.beforePopupOpen = false;
         }
         this.renderReactTemplates();
@@ -8289,7 +8461,9 @@ let AutoComplete = class AutoComplete extends ComboBox {
     postBackAction() {
         if (this.autofill && !isNullOrUndefined(this.liCollections[0]) && this.searchList) {
             const items = [this.liCollections[0]];
-            const searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase);
+            const dataSource = this.listData;
+            const type = this.typeOfData(dataSource).typeof;
+            const searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase, dataSource, this.fields, type);
             this.searchList = false;
             if (!isNullOrUndefined(searchItem.item)) {
                 super.setAutoFill(this.liCollections[0], true);
@@ -8298,6 +8472,7 @@ let AutoComplete = class AutoComplete extends ComboBox {
     }
     setSelection(li, e) {
         if (!this.isValidLI(li)) {
+            this.selectedLI = li;
             return;
         }
         if (!isNullOrUndefined(e) && e.type === 'keydown' && e.action !== 'enter'
@@ -8313,7 +8488,6 @@ let AutoComplete = class AutoComplete extends ComboBox {
                     e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown');
                 super.setAutoFill(li, isKeyNavigate);
             }
-            attributes(this.inputElement, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
         }
         else {
             super.setSelection(li, e);
@@ -8349,9 +8523,9 @@ let AutoComplete = class AutoComplete extends ComboBox {
     isFiltering() {
         return true;
     }
-    renderPopup() {
+    renderPopup(e) {
         this.list.scrollTop = 0;
-        super.renderPopup();
+        super.renderPopup(e);
     }
     isEditTextBox() {
         return true && this.inputElement.value.trim() !== '';
@@ -8363,13 +8537,37 @@ let AutoComplete = class AutoComplete extends ComboBox {
     isSelectFocusItem(element) {
         return false;
     }
+    setInputValue(newProp, oldProp) {
+        let oldValue = oldProp && oldProp.text ? oldProp.text : oldProp ? oldProp.value : oldProp;
+        let value = newProp && newProp.text ? newProp.text : newProp && newProp.value ? newProp.value : this.value;
+        if (value && this.typedString === '' && !this.allowCustom && !(this.dataSource instanceof DataManager)) {
+            let checkFields_1 = this.typeOfData(this.dataSource).typeof === 'string' ? '' : this.fields.value;
+            const listLength = this.getItems().length;
+            let query = new Query();
+            let _this = this;
+            new DataManager(this.dataSource).executeQuery(query.where(new Predicate(checkFields_1, 'equal', value)))
+                .then(function (e) {
+                if (e.result.length > 0) {
+                    _this.value = checkFields_1 !== '' ? e.result[0][_this.fields.value].toString() : e.result[0].toString();
+                    _this.addItem(e.result, listLength);
+                    _this.updateValues();
+                }
+                else {
+                    newProp && newProp.text ? _this.setOldText(oldValue) : newProp && newProp.value ? _this.setOldValue(oldValue) : _this.updateValues();
+                }
+            });
+        }
+        else if (newProp) {
+            newProp.text ? this.setOldText(oldValue) : this.setOldValue(oldValue);
+        }
+    }
     /**
      * Search the entered text and show it in the suggestion list if available.
      *
      * @returns {void}
      * @deprecated
      */
-    showPopup() {
+    showPopup(e) {
         if (!this.enabled) {
             return;
         }
@@ -8380,10 +8578,10 @@ let AutoComplete = class AutoComplete extends ComboBox {
         this.beforePopupOpen = true;
         this.preventAutoFill = true;
         if (isNullOrUndefined(this.list)) {
-            this.renderList();
+            this.renderList(e);
         }
         else {
-            this.resetList(this.dataSource, this.fields);
+            this.resetList(this.dataSource, this.fields, null, e);
         }
     }
     /**
@@ -8413,6 +8611,10 @@ let AutoComplete = class AutoComplete extends ComboBox {
                     if (this.showPopupButton) {
                         const button = Input.appendSpan(dropDownListClasses.icon, this.inputWrapper.container, this.createElement);
                         this.inputWrapper.buttons[0] = button;
+                        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+                        if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {
+                            this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
+                        }
                         if (this.inputWrapper && this.inputWrapper.buttons && this.inputWrapper.buttons[0]) {
                             EventHandler.add(this.inputWrapper.buttons[0], 'click', this.dropDownClick, this);
                         }
@@ -8540,9 +8742,11 @@ const LABELBOTTOM = 'e-label-bottom';
 function createFloatLabel(overAllWrapper, searchWrapper, element, inputElement, value, floatLabelType, placeholder) {
     const floatLinelement = createElement('span', { className: FLOATLINE });
     const floatLabelElement = createElement('label', { className: FLOATTEXT });
+    const id = element.getAttribute('id') ? element.getAttribute('id') : getUniqueID('ej2_multiselect');
+    element.id = id;
     if (!isNullOrUndefined(element.id) && element.id !== '') {
         floatLabelElement.id = 'label_' + element.id.replace(/ /g, '_');
-        attributes(element, { 'aria-labelledby': floatLabelElement.id });
+        attributes(inputElement, { 'aria-labelledby': floatLabelElement.id });
     }
     if (!isNullOrUndefined(inputElement.placeholder) && inputElement.placeholder !== '') {
         floatLabelElement.innerText = encodePlaceholder(inputElement.placeholder);
@@ -8746,6 +8950,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.isValidKey = false;
         this.selectAllEventData = [];
         this.selectAllEventEle = [];
+        this.resetMainList = null;
+        this.resetFilteredData = false;
         this.scrollFocusStatus = false;
         this.keyDownStatus = false;
     }
@@ -8786,7 +8992,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             for (const htmlAttr of Object.keys(this.htmlAttributes)) {
                 switch (htmlAttr) {
                     case 'class': {
-                        const updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\s+/g, ' ')).trim();
+                        const updatedClassValue = (this.htmlAttributes[`${htmlAttr}`].replace(/\s+/g, ' ')).trim();
                         if (updatedClassValue !== '') {
                             addClass([this.overAllWrapper], updatedClassValue.split(' '));
                             addClass([this.popupWrapper], updatedClassValue.split(' '));
@@ -8798,7 +9004,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         break;
                     case 'placeholder':
                         if (!this.placeholder) {
-                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
                             this.setProperties({ placeholder: this.inputElement.placeholder }, true);
                             this.refreshPlaceHolder();
                         }
@@ -8808,16 +9014,16 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         const validateAttr = ['name', 'required', 'aria-required', 'form'];
                         const containerAttr = ['title', 'role', 'style', 'class'];
                         if (defaultAttr.indexOf(htmlAttr) > -1) {
-                            this.element.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.element.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
                         }
                         else if (htmlAttr.indexOf('data') === 0 || validateAttr.indexOf(htmlAttr) > -1) {
-                            this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
                         }
                         else if (containerAttr.indexOf(htmlAttr) > -1) {
-                            this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
                         }
-                        else if (htmlAttr !== 'size') {
-                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                        else if (htmlAttr !== 'size' && !isNullOrUndefined(this.inputElement)) {
+                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
                         }
                         break;
                     }
@@ -8826,11 +9032,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     updateReadonly(state) {
-        if (state || this.mode === 'CheckBox') {
-            this.inputElement.setAttribute('readonly', 'true');
-        }
-        else {
-            this.inputElement.removeAttribute('readonly');
+        if (!isNullOrUndefined(this.inputElement)) {
+            if (state || this.mode === 'CheckBox') {
+                this.inputElement.setAttribute('readonly', 'true');
+            }
+            else {
+                this.inputElement.removeAttribute('readonly');
+            }
         }
     }
     updateClearButton(state) {
@@ -8867,7 +9075,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         }
     }
-    onPopupShown() {
+    onPopupShown(e) {
         if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const proxy = this;
@@ -8878,7 +9086,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             history.pushState({}, '');
         }
         const animModel = { name: 'FadeIn', duration: 100 };
-        const eventArgs = { popup: this.popupObj, cancel: false, animation: animModel };
+        const eventArgs = { popup: this.popupObj, event: e, cancel: false, animation: animModel };
         this.trigger('open', eventArgs, (eventArgs) => {
             if (!eventArgs.cancel) {
                 this.focusAtFirstListItem();
@@ -8892,7 +9100,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.refreshPopup();
                 this.renderReactTemplates();
                 this.popupObj.show(eventArgs.animation, (this.zIndex === 1000) ? this.element : null);
-                attributes(this.inputElement, { 'aria-expanded': 'true' });
+                attributes(this.inputElement, { 'aria-expanded': 'true', 'aria-owns': this.inputElement.id + '_options' });
+                this.updateAriaActiveDescendant();
                 if (this.isFirstClick) {
                     this.loadTemplate();
                 }
@@ -8962,11 +9171,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     getAriaAttributes() {
         const ariaAttributes = {
             'aria-disabled': 'false',
-            'aria-owns': this.element.id + '_options',
-            'role': 'listbox',
-            'aria-multiselectable': 'true',
-            'aria-activedescendant': 'null',
-            'aria-haspopup': 'true',
+            'role': 'combobox',
             'aria-expanded': 'false'
         };
         return ariaAttributes;
@@ -8975,8 +9180,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (!isNullOrUndefined(this.ulElement)) {
             attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
         }
-        const disableStatus = (this.inputElement.disabled) ? true : false;
-        attributes(this.inputElement, this.getAriaAttributes());
+        const disableStatus = !isNullOrUndefined(this.inputElement) && (this.inputElement.disabled) ? true : false;
+        if (!this.isPopupOpen() && !isNullOrUndefined(this.inputElement)) {
+            attributes(this.inputElement, this.getAriaAttributes());
+        }
         if (disableStatus) {
             attributes(this.inputElement, { 'aria-disabled': 'true' });
         }
@@ -9044,13 +9251,23 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
             for (let i = 0; i < this.value.length; i++) {
                 const checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', proxy.value[i]);
-                if (!checkEle) {
+                if (!checkEle && !(this.dataSource instanceof DataManager)) {
                     this.value.splice(i, 1);
                     i -= 1;
                 }
             }
         }
-        this.updateActionList(ulElement, list, e);
+        let valuecheck = [];
+        if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
+            valuecheck = this.presentItemValue(this.ulElement);
+        }
+        if (valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
+            && this.listData != null) {
+            this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
+        }
+        else {
+            this.updateActionList(ulElement, list, e);
+        }
         if (this.dataSource instanceof DataManager && this.mode === 'CheckBox' && this.allowFiltering) {
             this.removeFocus();
         }
@@ -9074,7 +9291,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.checkForCustomValue(this.tempQuery, this.fields);
             return;
         }
-        if (this.value && this.value.length && ((this.mode !== 'CheckBox' && this.inputElement.value.trim() !== '') ||
+        if (this.value && this.value.length && ((this.mode !== 'CheckBox' && !isNullOrUndefined(this.inputElement) && this.inputElement.value.trim() !== '') ||
             this.mode === 'CheckBox' || ((this.keyCode === 8 || this.keyCode === 46) && this.allowFiltering &&
             this.allowCustomValue && this.dataSource instanceof DataManager && this.inputElement.value === ''))) {
             this.refreshSelection();
@@ -9102,7 +9319,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.renderPopup();
         if (this.beforePopupOpen) {
             this.beforePopupOpen = false;
-            this.onPopupShown();
+            this.onPopupShown(e);
         }
     }
     refreshSelection() {
@@ -9132,6 +9349,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');
                         if (listEle.length > 0) {
                             addClass([listEle[0]], dropDownBaseClasses.focus);
+                            this.updateAriaActiveDescendant();
                         }
                         else {
                             //EJ2-57588 - for this task, we prevent the ul element cloning ( this.ulElement = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
@@ -9143,8 +9361,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     }
                     element.setAttribute('aria-selected', 'true');
                     if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {
-                        const ariaValue = element.firstElementChild.getAttribute('aria-checked');
-                        if (isNullOrUndefined(ariaValue) || ariaValue === 'false') {
+                        const ariaValue = element.getElementsByClassName('e-check').length;
+                        if (ariaValue === 0) {
                             const args = {
                                 module: 'CheckBoxSelection',
                                 enable: this.mode === 'CheckBox',
@@ -9268,9 +9486,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     /**
      * To filter the multiselect data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @param {Query} query - Specify the query to filter the data.
+     * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
      */
     filter(dataSource, query, fields) {
@@ -9358,7 +9576,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.resetList(tempData, field, query);
             }
             else {
-                const tempData = [this.inputElement.value];
+                const tempData = JSON.parse(JSON.stringify(this.listData));
+                tempData.splice(0, 0, this.inputElement.value);
                 tempData[0] = (typeof customData === 'number' && !isNaN(parseFloat(tempData[0]))) ?
                     parseFloat(tempData[0]) : tempData[0];
                 tempData[0] = (typeof customData === 'boolean') ?
@@ -9394,7 +9613,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
             if (!this.isPopupOpen() &&
                 (this.openOnClick || (this.showDropDownIcon && e.target && e.target.className === dropdownIcon))) {
-                this.showPopup();
+                this.showPopup(e);
             }
             else {
                 this.hidePopup(e);
@@ -9476,6 +9695,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         }
         this.updateDataList();
+        if (this.resetMainList) {
+            this.mainList = this.resetMainList;
+            this.resetMainList = null;
+        }
         this.refreshListItems(null);
         if (this.mode !== 'Box' && this.mode !== 'CheckBox') {
             this.updateDelimView();
@@ -9503,6 +9726,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.ulElement = this.mainList;
         }
         this.checkPlaceholderSize();
+        Input.createSpanElement(this.overAllWrapper, this.createElement);
+        Input.calculateWidth(this.inputElement, this.overAllWrapper);
+        if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
+            this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
+        }
     }
     checkPlaceholderSize() {
         if (this.showDropDownIcon) {
@@ -9531,11 +9759,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     refreshInputHight() {
-        if ((!this.value || !this.value.length) && (isNullOrUndefined(this.text) || this.text === '')) {
-            this.searchWrapper.classList.remove(ZERO_SIZE);
-        }
-        else {
-            this.searchWrapper.classList.add(ZERO_SIZE);
+        if (!isNullOrUndefined(this.searchWrapper)) {
+            if ((!this.value || !this.value.length) && (isNullOrUndefined(this.text) || this.text === '')) {
+                this.searchWrapper.classList.remove(ZERO_SIZE);
+            }
+            else {
+                this.searchWrapper.classList.add(ZERO_SIZE);
+            }
         }
     }
     validateValues(newValue, oldValue) {
@@ -9573,6 +9803,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.tempValues = this.value.slice();
         }
     }
+    updateAriaActiveDescendant() {
+        if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
+            attributes(this.inputElement, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
+        }
+    }
     getPagingCount() {
         const height = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
             getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
@@ -9633,6 +9868,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (this.isPopupOpen()) {
                 this.refreshPopup();
             }
+            Input.calculateWidth(this.inputElement, this.overAllWrapper);
             return true;
         }
         else {
@@ -9688,7 +9924,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 break;
             case 40:
                 if (!this.isPopupOpen()) {
-                    this.showPopup();
+                    this.showPopup(e);
                     e.preventDefault();
                 }
                 break;
@@ -9715,6 +9951,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             const element = scrollEle[(isHome) ? 0 : (scrollEle.length - 1)];
             element.classList.add(dropDownBaseClasses.focus);
             this.scrollBottom(element);
+            this.updateAriaActiveDescendant();
         }
     }
     onKeyDown(e) {
@@ -10216,7 +10453,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     invokeCheckboxSelection(element, eve, isClearAll) {
         this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: eve });
-        attributes(this.inputElement, { 'aria-activedescendant': element.id });
+        this.updateAriaActiveDescendant();
         if ((this.value && this.value.length !== this.mainData.length)
             && (this.mode === 'CheckBox' && this.showSelectAll && !(this.isSelectAll || isClearAll))) {
             this.notify('checkSelectAll', {
@@ -10328,7 +10565,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         HIDE_LIST :
                         dropDownBaseClasses.selected);
                     if (this.mode === 'CheckBox') {
-                        element2.firstElementChild.setAttribute('aria-checked', 'false');
                         removeClass([element2.firstElementChild.lastElementChild], 'e-check');
                     }
                 }
@@ -10338,7 +10574,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         HIDE_LIST :
                         dropDownBaseClasses.selected);
                     if (this.mode === 'CheckBox') {
-                        element2.firstElementChild.setAttribute('aria-checked', 'true');
                         addClass([element2.firstElementChild.lastElementChild], 'e-check');
                     }
                 }
@@ -10596,109 +10831,111 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             super.render();
         }
         if (!this.popupObj) {
-            document.body.appendChild(this.popupWrapper);
-            const checkboxFilter = this.popupWrapper.querySelector('.' + FILTERPARENT);
-            if (this.mode === 'CheckBox' && !this.allowFiltering && checkboxFilter && this.filterParent) {
-                checkboxFilter.remove();
-                this.filterParent = null;
-            }
-            let overAllHeight = parseInt(this.popupHeight, 10);
-            this.popupWrapper.style.visibility = 'hidden';
-            if (this.headerTemplate) {
-                this.setHeaderTemplate();
-                overAllHeight -= this.header.offsetHeight;
-            }
-            append([this.list], this.popupWrapper);
-            if (this.footerTemplate) {
-                this.setFooterTemplate();
-                overAllHeight -= this.footer.offsetHeight;
-            }
-            if (this.mode === 'CheckBox' && this.showSelectAll) {
-                this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
-                overAllHeight -= this.selectAllHeight;
-            }
-            else if (this.mode === 'CheckBox' && !this.showSelectAll && (!this.headerTemplate && !this.footerTemplate)) {
-                this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
-                overAllHeight = parseInt(this.popupHeight, 10);
-            }
-            else if (this.mode === 'CheckBox' && !this.showSelectAll) {
-                this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
-                overAllHeight = parseInt(this.popupHeight, 10);
-                if (this.headerTemplate && this.header) {
+            if (!isNullOrUndefined(this.popupWrapper)) {
+                document.body.appendChild(this.popupWrapper);
+                const checkboxFilter = this.popupWrapper.querySelector('.' + FILTERPARENT);
+                if (this.mode === 'CheckBox' && !this.allowFiltering && checkboxFilter && this.filterParent) {
+                    checkboxFilter.remove();
+                    this.filterParent = null;
+                }
+                let overAllHeight = parseInt(this.popupHeight, 10);
+                this.popupWrapper.style.visibility = 'hidden';
+                if (this.headerTemplate) {
+                    this.setHeaderTemplate();
                     overAllHeight -= this.header.offsetHeight;
                 }
-                if (this.footerTemplate && this.footer) {
+                append([this.list], this.popupWrapper);
+                if (this.footerTemplate) {
+                    this.setFooterTemplate();
                     overAllHeight -= this.footer.offsetHeight;
                 }
-            }
-            if (this.mode === 'CheckBox') {
-                const args = {
-                    module: 'CheckBoxSelection',
-                    enable: this.mode === 'CheckBox',
-                    popupElement: this.popupWrapper
-                };
-                if (this.allowFiltering) {
-                    this.notify('searchBox', args);
-                    overAllHeight -= this.searchBoxHeight;
-                }
-                addClass([this.popupWrapper], 'e-checkbox');
-            }
-            if (this.popupHeight !== 'auto') {
-                this.list.style.maxHeight = formatUnit(overAllHeight);
-                this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);
-            }
-            else {
-                this.list.style.maxHeight = formatUnit(this.popupHeight);
-            }
-            this.popupObj = new Popup(this.popupWrapper, {
-                width: this.calcPopupWidth(), targetType: 'relative', position: { X: 'left', Y: 'bottom' },
-                relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,
-                enableRtl: this.enableRtl, zIndex: this.zIndex,
-                close: () => {
-                    if (this.popupObj.element.parentElement) {
-                        this.popupObj.unwireScrollEvents();
-                        // For restrict the page scrolling in safari browser
-                        const checkboxFilterInput = this.popupWrapper.querySelector('.' + FILTERINPUT);
-                        if (this.mode === 'CheckBox' && checkboxFilterInput && document.activeElement === checkboxFilterInput) {
-                            checkboxFilterInput.blur();
-                        }
-                        detach(this.popupObj.element);
-                    }
-                },
-                open: () => {
-                    this.popupObj.resolveCollision();
-                    if (!this.isFirstClick) {
-                        const ulElement = this.list.querySelector('ul');
-                        if (ulElement) {
-                            if (!(this.mode !== 'CheckBox' && (this.allowFiltering || this.allowCustomValue) &&
-                                this.targetElement().trim() !== '')) {
-                                this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
-                            }
-                        }
-                        this.isFirstClick = true;
+                if (this.mode === 'CheckBox' && this.showSelectAll) {
+                    this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                    overAllHeight -= this.selectAllHeight;
+                }
+                else if (this.mode === 'CheckBox' && !this.showSelectAll && (!this.headerTemplate && !this.footerTemplate)) {
+                    this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                    overAllHeight = parseInt(this.popupHeight, 10);
+                }
+                else if (this.mode === 'CheckBox' && !this.showSelectAll) {
+                    this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                    overAllHeight = parseInt(this.popupHeight, 10);
+                    if (this.headerTemplate && this.header) {
+                        overAllHeight -= this.header.offsetHeight;
                     }
-                    this.popupObj.wireScrollEvents();
-                    if (!(this.mode !== 'CheckBox' && (this.allowFiltering || this.allowCustomValue) &&
-                        this.targetElement().trim() !== '')) {
-                        this.loadTemplate();
+                    if (this.footerTemplate && this.footer) {
+                        overAllHeight -= this.footer.offsetHeight;
                     }
-                    this.setScrollPosition();
+                }
+                if (this.mode === 'CheckBox') {
+                    const args = {
+                        module: 'CheckBoxSelection',
+                        enable: this.mode === 'CheckBox',
+                        popupElement: this.popupWrapper
+                    };
                     if (this.allowFiltering) {
-                        this.notify('inputFocus', {
-                            module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'focus'
-                        });
+                        this.notify('searchBox', args);
+                        overAllHeight -= this.searchBoxHeight;
                     }
-                }, targetExitViewport: () => {
-                    if (!Browser.isDevice) {
-                        this.hidePopup();
+                    addClass([this.popupWrapper], 'e-checkbox');
+                }
+                if (this.popupHeight !== 'auto') {
+                    this.list.style.maxHeight = formatUnit(overAllHeight);
+                    this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);
+                }
+                else {
+                    this.list.style.maxHeight = formatUnit(this.popupHeight);
+                }
+                this.popupObj = new Popup(this.popupWrapper, {
+                    width: this.calcPopupWidth(), targetType: 'relative', position: { X: 'left', Y: 'bottom' },
+                    relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,
+                    enableRtl: this.enableRtl, zIndex: this.zIndex,
+                    close: () => {
+                        if (this.popupObj.element.parentElement) {
+                            this.popupObj.unwireScrollEvents();
+                            // For restrict the page scrolling in safari browser
+                            const checkboxFilterInput = this.popupWrapper.querySelector('.' + FILTERINPUT);
+                            if (this.mode === 'CheckBox' && checkboxFilterInput && document.activeElement === checkboxFilterInput) {
+                                checkboxFilterInput.blur();
+                            }
+                            detach(this.popupObj.element);
+                        }
+                    },
+                    open: () => {
+                        this.popupObj.resolveCollision();
+                        if (!this.isFirstClick) {
+                            const ulElement = this.list.querySelector('ul');
+                            if (ulElement) {
+                                if (!(this.mode !== 'CheckBox' && (this.allowFiltering || this.allowCustomValue) &&
+                                    this.targetElement().trim() !== '')) {
+                                    this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
+                                }
+                            }
+                            this.isFirstClick = true;
+                        }
+                        this.popupObj.wireScrollEvents();
+                        if (!(this.mode !== 'CheckBox' && (this.allowFiltering || this.allowCustomValue) &&
+                            this.targetElement().trim() !== '')) {
+                            this.loadTemplate();
+                        }
+                        this.setScrollPosition();
+                        if (this.allowFiltering) {
+                            this.notify('inputFocus', {
+                                module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'focus'
+                            });
+                        }
+                    }, targetExitViewport: () => {
+                        if (!Browser.isDevice) {
+                            this.hidePopup();
+                        }
                     }
+                });
+                if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
+                    this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
                 }
-            });
-            if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
-                this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                this.popupObj.close();
+                this.popupWrapper.style.visibility = '';
             }
-            this.popupObj.close();
-            this.popupWrapper.style.visibility = '';
         }
     }
     setHeaderTemplate() {
@@ -10768,6 +11005,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         this.removeValue(temp, e, null, true);
                     }
                 }
+                this.selectedElementID = null;
+                this.inputElement.removeAttribute('aria-activedescendant');
             }
             else {
                 this.clearAllCallback(e);
@@ -10869,11 +11108,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         });
     }
     search(e) {
+        this.resetFilteredData = true;
         if (!isNullOrUndefined(e)) {
             this.keyCode = e.keyCode;
         }
         if (!this.isPopupOpen() && this.openOnClick) {
-            this.showPopup();
+            this.showPopup(e);
         }
         this.openClick(e);
         if (this.checkTextLength() && !this.allowFiltering && !isNullOrUndefined(e) && (e.keyCode !== 8)) {
@@ -10957,7 +11197,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         let temp;
         const tempData = this.listData;
         this.listData = this.mainData;
-        this.hiddenElement.innerHTML = '';
+        if (!isNullOrUndefined(this.hiddenElement)) {
+            this.hiddenElement.innerHTML = '';
+        }
         if (!isNullOrUndefined(this.value)) {
             for (let index = 0; !isNullOrUndefined(this.value[index]); index++) {
                 const listValue = this.findListElement(((!isNullOrUndefined(this.mainList)) ? this.mainList : this.ulElement), 'li', 'data-value', this.value[index]);
@@ -10975,7 +11217,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     data += temp + delimiterChar + ' ';
                     text.push(temp);
                 }
-                this.hiddenElement.innerHTML += '<option selected value ="' + this.value[index] + '">' + index + '</option>';
+                if (!isNullOrUndefined(this.hiddenElement)) {
+                    this.hiddenElement.innerHTML += '<option selected value ="' + this.value[index] + '">' + index + '</option>';
+                }
             }
         }
         this.setProperties({ text: text.toString() }, true);
@@ -11020,7 +11264,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             || this.list.querySelector('.e-ul') && this.list.querySelector('.e-ul').childElementCount === 0)) {
             isEmptyData = true;
         }
-        super.render(isEmptyData);
+        super.render(null, isEmptyData);
         this.unwireListEvents();
         this.wireListEvents();
     }
@@ -11108,7 +11352,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     updateDataList() {
-        if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction)) {
+        if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction || this.targetElement().trim())) {
             let isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
             let isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
             let isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0 && !(this.ulElement.childElementCount < this.mainList.childElementCount) && (this.ulElement.children[0].childElementCount > 0 || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
@@ -11186,10 +11430,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     selectItems[temp1 - 1].setAttribute('aria-selected', 'false');
                     if (this.mode === 'CheckBox') {
                         if (selectedItems && (selectedItems.length > (temp1 - 1))) {
-                            selectedItems[temp1 - 1].firstElementChild.setAttribute('aria-checked', 'false');
                             removeClass([selectedItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');
                         }
-                        selectItems[temp1 - 1].firstElementChild.setAttribute('aria-checked', 'false');
                         removeClass([selectItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');
                     }
                     temp1--;
@@ -11230,10 +11472,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.enabled && this.isValidLI(element)) {
             this.removeFocus();
             addClass([element], dropDownBaseClasses.focus);
+            this.updateAriaActiveDescendant();
         }
         else {
             if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
                 addClass([element], dropDownBaseClasses.focus);
+                this.updateAriaActiveDescendant();
             }
         }
     }
@@ -11245,9 +11489,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             addClass([element], className);
             this.updateMainList(false, element.getAttribute('data-value'), mainElement);
             element.setAttribute('aria-selected', 'true');
-            if (this.mode === 'CheckBox') {
-                const ariaCheck = element.firstElementChild.getAttribute('aria-checked');
-                if (ariaCheck === 'false' || isNullOrUndefined(ariaCheck)) {
+            if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {
+                const ariaCheck = element.getElementsByClassName('e-check').length;
+                if (ariaCheck === 0) {
                     this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: this });
                 }
             }
@@ -11255,7 +11499,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (this.chipCollectionWrapper) {
                 this.removeChipSelection();
             }
-            attributes(this.inputElement, { 'aria-activedescendant': element.id });
+            this.selectedElementID = element.id;
         }
     }
     updateDelimeter(delimChar, e) {
@@ -11565,9 +11809,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.chipCollectionWrapper) {
             this.chipCollectionWrapper.style.display = 'none';
         }
-        this.viewWrapper.style.display = '';
-        this.viewWrapper.style.width = '';
-        this.viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER$1);
+        if (!isNullOrUndefined(this.viewWrapper)) {
+            this.viewWrapper.style.display = '';
+            this.viewWrapper.style.width = '';
+            this.viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER$1);
+        }
         if (this.value && this.value.length) {
             let data = '';
             let temp;
@@ -11618,7 +11864,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     overAllContainer = this.componentWrapper.offsetWidth -
                         parseInt(window.getComputedStyle(this.componentWrapper).paddingLeft, 10) -
                         parseInt(window.getComputedStyle(this.componentWrapper).paddingRight, 10);
-                    if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {
+                    if ((wrapperleng + downIconWidth + this.clearIconWidth) >= overAllContainer) {
                         if (tempData !== undefined && tempData !== '') {
                             temp = tempData;
                             index = tempIndex + 1;
@@ -11627,7 +11873,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         remaining = this.value.length - index;
                         wrapperleng = this.viewWrapper.offsetWidth +
                             parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);
-                        while (((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) > overAllContainer) && wrapperleng !== 0
+                        while (((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) >= overAllContainer) && wrapperleng !== 0
                             && this.viewWrapper.innerHTML !== '') {
                             const textArr = [];
                             this.viewWrapper.innerHTML = textArr.join(this.delimiterChar);
@@ -11637,7 +11883,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         }
                         break;
                     }
-                    else if ((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) <= overAllContainer) {
+                    else if ((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) < overAllContainer) {
                         tempData = data;
                         tempIndex = index;
                     }
@@ -11655,8 +11901,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         }
         else {
-            this.viewWrapper.innerHTML = '';
-            this.viewWrapper.style.display = 'none';
+            if (!isNullOrUndefined(this.viewWrapper)) {
+                this.viewWrapper.innerHTML = '';
+                this.viewWrapper.style.display = 'none';
+            }
         }
     }
     checkClearIconWidth() {
@@ -11729,29 +11977,41 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         return temp;
     }
     unWireEvent() {
-        EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);
+        if (!isNullOrUndefined(this.componentWrapper)) {
+            EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);
+        }
         EventHandler.remove(window, 'resize', this.windowResize);
-        EventHandler.remove(this.inputElement, 'focus', this.focusInHandler);
-        EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);
-        if (this.mode !== 'CheckBox') {
-            EventHandler.remove(this.inputElement, 'input', this.onInput);
+        if (!isNullOrUndefined(this.inputElement)) {
+            EventHandler.remove(this.inputElement, 'focus', this.focusInHandler);
+            EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);
+            if (this.mode !== 'CheckBox') {
+                EventHandler.remove(this.inputElement, 'input', this.onInput);
+            }
+            EventHandler.remove(this.inputElement, 'keyup', this.keyUp);
+            const formElement = closest(this.inputElement, 'form');
+            if (formElement) {
+                EventHandler.remove(formElement, 'reset', this.resetValueHandler);
+            }
+            EventHandler.remove(this.inputElement, 'blur', this.onBlurHandler);
         }
-        EventHandler.remove(this.inputElement, 'keyup', this.keyUp);
-        const formElement = closest(this.inputElement, 'form');
-        if (formElement) {
-            EventHandler.remove(formElement, 'reset', this.resetValueHandler);
+        if (!isNullOrUndefined(this.componentWrapper)) {
+            EventHandler.remove(this.componentWrapper, 'mouseover', this.mouseIn);
+            EventHandler.remove(this.componentWrapper, 'mouseout', this.mouseOut);
+        }
+        if (!isNullOrUndefined(this.overAllClear)) {
+            EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);
+        }
+        if (!isNullOrUndefined(this.inputElement)) {
+            EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
         }
-        EventHandler.remove(this.inputElement, 'blur', this.onBlurHandler);
-        EventHandler.remove(this.componentWrapper, 'mouseover', this.mouseIn);
-        EventHandler.remove(this.componentWrapper, 'mouseout', this.mouseOut);
-        EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);
-        EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
     }
     selectAllItem(state, event, list) {
         let li;
-        li = this.list.querySelectorAll(state ?
-            'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide)' :
-            'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
+        if (!isNullOrUndefined(this.list)) {
+            li = this.list.querySelectorAll(state ?
+                'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide)' :
+                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
+        }
         if (this.value && this.value.length && event && event.target
             && closest(event.target, '.e-close-hooker') && this.allowFiltering) {
             li = this.mainList.querySelectorAll(state ?
@@ -11801,6 +12061,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         target.classList.remove('e-active');
                     }
                     target.classList.add('e-item-focus');
+                    this.updateAriaActiveDescendant();
                 }
                 this.textboxValueUpdate();
                 this.checkPlaceholderSize();
@@ -11815,6 +12076,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         else {
             this.updateValue(event, li, state);
         }
+        this.addValidInputClass();
     }
     updateValue(event, li, state) {
         const length = li.length;
@@ -12037,6 +12299,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     onPropertyChanged(newProp, oldProp) {
         if (newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))
             || newProp.query && !isNullOrUndefined(Object.keys(newProp.query))) {
+            if (this.resetFilteredData) {
+                // The filtered data is not being reset in the component after the user focuses out.
+                this.resetMainList = !this.resetMainList ? this.mainList : this.resetMainList;
+                this.resetFilteredData = false;
+            }
             this.mainList = null;
             this.mainData = null;
             this.isFirstClick = false;
@@ -12096,6 +12363,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 case 'cssClass':
                     this.updateOldPropCssClass(oldProp.cssClass);
                     this.updateCssClass();
+                    Input.calculateWidth(this.inputElement.parentElement.parentElement, this.overAllWrapper);
                     break;
                 case 'enableRtl':
                     this.enableRTL(newProp.enableRtl);
@@ -12122,6 +12390,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 case 'floatLabelType':
                     this.setFloatLabelType();
                     this.addValidInputClass();
+                    Input.createSpanElement(this.overAllWrapper, this.createElement);
+                    Input.calculateWidth(this.inputElement.parentElement.parentElement, this.overAllWrapper);
+                    if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
+                        this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
+                    }
                     break;
                 case 'enableSelectionOrder':
                     break;
@@ -12180,7 +12453,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     ;
     addNonPresentItems(valuecheck, ulElement, list, event) {
         this.dataSource.executeQuery(this.getForQuery(valuecheck)).then((e) => {
-            this.addItem(e.result, list.length);
+            if (e.result.length > 0) {
+                this.addItem(e.result, list.length);
+            }
             this.updateActionList(ulElement, list, event);
         });
     }
@@ -12239,7 +12514,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
      * Adds a new item to the multiselect popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
      */
@@ -12270,6 +12545,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.overAllWrapper.classList.remove(iconAnimation);
                     this.popupObj.hide(new Animation(eventArgs.animation));
                     attributes(this.inputElement, { 'aria-expanded': 'false' });
+                    this.inputElement.removeAttribute('aria-owns');
+                    this.inputElement.removeAttribute('aria-activedescendant');
                     if (this.allowFiltering) {
                         this.notify('inputFocus', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'clear' });
                     }
@@ -12285,7 +12562,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
      *
      * @returns {void}
      */
-    showPopup() {
+    showPopup(e) {
         if (!this.enabled) {
             return;
         }
@@ -12294,7 +12571,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (!args.cancel) {
                 if (!this.ulElement) {
                     this.beforePopupOpen = true;
-                    super.render();
+                    super.render(e);
                     if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
                         this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
                     }
@@ -12310,7 +12587,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.beforePopupOpen = false;
                     return;
                 }
-                this.onPopupShown();
+                this.onPopupShown(e);
             }
         });
     }
@@ -12411,12 +12688,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 spellcheck: 'false',
                 type: 'text',
                 autocomplete: 'off',
-                tabindex: '0'
+                tabindex: '0',
+                role: 'combobox'
             }
         });
         if (this.mode === 'Default' || this.mode === 'Box') {
             this.inputElement.setAttribute('aria-describedby', this.chipCollectionWrapper.id);
-            this.inputElement.setAttribute('aria-labelledby', this.chipCollectionWrapper.id);
         }
         if (this.element.tagName !== this.getNgDirective()) {
             this.element.style.display = 'none';
@@ -12449,6 +12726,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.mode !== 'CheckBox') {
             this.hideOverAllClear();
         }
+        if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+            this.enabled = false;
+        }
         this.wireEvent();
         this.enable(this.enabled);
         this.enableRTL(this.enableRtl);
@@ -12456,6 +12736,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
         }
+        Input.createSpanElement(this.overAllWrapper, this.createElement);
+        Input.calculateWidth(this.inputElement.parentElement.parentElement, this.overAllWrapper);
+        if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
+            this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
+        }
         this.renderComplete();
     }
     checkInitialValue() {
@@ -12536,11 +12821,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     addValidInputClass() {
-        if ((!isNullOrUndefined(this.value) && this.value.length) || this.floatLabelType === 'Always') {
-            addClass([this.overAllWrapper], 'e-valid-input');
-        }
-        else {
-            removeClass([this.overAllWrapper], 'e-valid-input');
+        if (!isNullOrUndefined(this.overAllWrapper)) {
+            if ((!isNullOrUndefined(this.value) && this.value.length) || this.floatLabelType === 'Always') {
+                addClass([this.overAllWrapper], 'e-valid-input');
+            }
+            else {
+                removeClass([this.overAllWrapper], 'e-valid-input');
+            }
         }
     }
     dropDownIcon() {
@@ -12591,15 +12878,19 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.ulElement = null;
         this.mainListCollection = null;
         super.destroy();
-        const temp = ['readonly', 'aria-disabled', 'aria-placeholder', 'placeholder'];
+        const temp = ['readonly', 'aria-disabled', 'placeholder'];
         let length = temp.length;
-        while (length > 0) {
-            this.inputElement.removeAttribute(temp[length - 1]);
-            length--;
+        if (!isNullOrUndefined(this.inputElement)) {
+            while (length > 0) {
+                this.inputElement.removeAttribute(temp[length - 1]);
+                length--;
+            }
         }
-        this.element.removeAttribute('data-initial-value');
-        this.element.style.display = 'block';
-        if (this.overAllWrapper.parentElement) {
+        if (!isNullOrUndefined(this.element)) {
+            this.element.removeAttribute('data-initial-value');
+            this.element.style.display = 'block';
+        }
+        if (this.overAllWrapper && this.overAllWrapper.parentElement) {
             if (this.overAllWrapper.parentElement.tagName === this.getNgDirective()) {
                 remove(this.overAllWrapper);
             }
@@ -12608,6 +12899,25 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 remove(this.overAllWrapper);
             }
         }
+        this.componentWrapper = null;
+        this.overAllClear = null;
+        this.overAllWrapper = null;
+        this.hiddenElement = null;
+        this.searchWrapper = null;
+        this.viewWrapper = null;
+        this.chipCollectionWrapper = null;
+        this.targetInputElement = null;
+        this.popupWrapper = null;
+        this.inputElement = null;
+        this.delimiterWrapper = null;
+        this.popupObj = null;
+        this.popupWrapper = null;
+        this.liCollections = null;
+        this.header = null;
+        this.mainList = null;
+        this.mainListCollection = null;
+        this.footer = null;
+        this.selectAllEventEle = null;
     }
 };
 __decorate$5([
@@ -12957,6 +13267,12 @@ class CheckBoxSelection {
     destroy() {
         this.removeEventListener();
         EventHandler.remove(document, 'mousedown', this.onDocumentClick);
+        this.checkAllParent = null;
+        this.clearIconElement = null;
+        this.filterInput = null;
+        this.filterInputObj = null;
+        this.checkWrapper = null;
+        this.selectAllSpan = null;
     }
     listSelection(args) {
         let target;
@@ -13005,12 +13321,10 @@ class CheckBoxSelection {
         e.preventDefault();
     }
     changeState(wrapper, state, e, isPrevent, selectAll$$1) {
-        let ariaState;
         const frameSpan = wrapper.getElementsByClassName(CHECKBOXFRAME$1)[0];
         if (state === 'check' && !frameSpan.classList.contains(CHECK$1)) {
             frameSpan.classList.remove(INDETERMINATE);
             frameSpan.classList.add(CHECK$1);
-            ariaState = 'true';
             if (selectAll$$1) {
                 this.parent.selectAllItems(true, e);
                 this.setLocale(true);
@@ -13018,7 +13332,6 @@ class CheckBoxSelection {
         }
         else if (state === 'uncheck' && (frameSpan.classList.contains(CHECK$1) || frameSpan.classList.contains(INDETERMINATE))) {
             removeClass([frameSpan], [CHECK$1, INDETERMINATE]);
-            ariaState = 'false';
             if (selectAll$$1) {
                 this.parent.selectAllItems(false, e);
                 this.setLocale();
@@ -13027,16 +13340,11 @@ class CheckBoxSelection {
         else if (state === 'indeterminate' && !(frameSpan.classList.contains(INDETERMINATE))) {
             removeClass([frameSpan], [CHECK$1]);
             frameSpan.classList.add(INDETERMINATE);
-            ariaState = 'false';
             if (selectAll$$1) {
                 this.parent.selectAllItems(false, e);
                 this.setLocale();
             }
         }
-        ariaState = state === 'check' ? 'true' : state === 'uncheck' ? 'false' : ariaState;
-        if (!isNullOrUndefined(ariaState)) {
-            wrapper.setAttribute('aria-checked', ariaState);
-        }
     }
     setSearchBox(args) {
         if (isNullOrUndefined(this.parent.filterParent)) {
@@ -13070,11 +13378,8 @@ class CheckBoxSelection {
             prepend([this.parent.filterParent], args.popupElement);
             attributes(this.filterInput, {
                 'aria-disabled': 'false',
-                'aria-owns': this.parent.element.id + '_options',
-                'role': 'listbox',
-                'aria-activedescendant': null,
+                'role': 'combobox',
                 'autocomplete': 'off',
-                'autocorrect': 'off',
                 'autocapitalize': 'off',
                 'spellcheck': 'false'
             });
@@ -13200,8 +13505,8 @@ class CheckBoxSelection {
                     e.preventDefault();
                 }
             }
-            if (!(!isNullOrUndefined(this.parent.popupObj) && closest(target, '[id="' + this.parent.popupObj.element.id + '"]')) &&
-                !this.parent.overAllWrapper.contains(e.target)) {
+            if (!(!isNullOrUndefined(this.parent.popupObj) && closest(target, '[id="' + this.parent.popupObj.element.id + '"]'))
+                && !isNullOrUndefined(this.parent.overAllWrapper) && !this.parent.overAllWrapper.contains(e.target)) {
                 if (this.parent.overAllWrapper.classList.contains(dropDownBaseClasses.focus) || this.parent.isPopupOpen()) {
                     this.parent.inputFocus = false;
                     this.parent.scrollFocusStatus = false;
@@ -13214,7 +13519,7 @@ class CheckBoxSelection {
                 this.parent.scrollFocusStatus = (Browser.isIE || Browser.info.name === 'edge') &&
                     (document.activeElement === this.filterInput);
             }
-            if (!this.parent.overAllWrapper.contains(e.target) && this.parent.overAllWrapper.classList.contains('e-input-focus') &&
+            if (!isNullOrUndefined(this.parent.overAllWrapper) && !this.parent.overAllWrapper.contains(e.target) && this.parent.overAllWrapper.classList.contains('e-input-focus') &&
                 !this.parent.isPopupOpen()) {
                 if (Browser.isIE) {
                     this.parent.onBlurHandler();
@@ -13245,7 +13550,7 @@ class CheckBoxSelection {
         }
     }
     checkSelectAll(e) {
-        if (e.value === 'check' && this.checkAllParent.getAttribute('aria-checked') !== 'true') {
+        if (e.value === 'check') {
             this.changeState(this.checkAllParent, e.value, null, null, false);
             this.setLocale(true);
         }
@@ -13402,6 +13707,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         this.isCustomFiltering = false;
         this.initialSelectedOptions = this.value;
         super.render();
+        this.setEnabled();
         this.renderComplete();
     }
     initWrapper() {
@@ -13436,7 +13742,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         removeClass([this.list], [dropDownBaseClasses.content, dropDownBaseClasses.root]);
         this.validationAttribute(this.element, hiddenSelect);
         this.list.setAttribute('role', 'listbox');
-        attributes(this.list, { 'role': 'listbox', 'aria-multiselectable': this.selectionSettings.mode === 'Multiple' ? 'true' : 'false' });
+        attributes(this.list, { 'role': 'listbox', 'aria-label': 'listbox', 'aria-multiselectable': this.selectionSettings.mode === 'Multiple' ? 'true' : 'false' });
         this.updateSelectionSettings();
     }
     updateSelectionSettings() {
@@ -13692,14 +13998,14 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     triggerDrag(args) {
         let scrollParent;
         let boundRect;
-        let scrollMoved = 36;
+        const scrollMoved = 36;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let event = args.event;
+        const event = args.event;
         let wrapper;
-        if (args.target && (args.target.classList.contains("e-listbox-wrapper") || args.target.classList.contains("e-list-item")
-            || args.target.classList.contains("e-filter-parent") || args.target.classList.contains("e-input-group"))) {
-            if (args.target.classList.contains("e-list-item") || args.target.classList.contains("e-filter-parent")
-                || args.target.classList.contains("e-input-group")) {
+        if (args.target && (args.target.classList.contains('e-listbox-wrapper') || args.target.classList.contains('e-list-item')
+            || args.target.classList.contains('e-filter-parent') || args.target.classList.contains('e-input-group'))) {
+            if (args.target.classList.contains('e-list-item') || args.target.classList.contains('e-filter-parent')
+                || args.target.classList.contains('e-input-group')) {
                 wrapper = args.target.closest('.e-listbox-wrapper');
             }
             else {
@@ -13753,7 +14059,8 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         const getArgs = this.getDragArgs({ target: args.droppedElement }, true);
         const sourceArgs = { previousData: this.dataSource };
         const destArgs = { previousData: listObj.dataSource };
-        let dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource }, previousIndex: args.previousIndex, currentIndex: args.currentIndex });
+        let dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource },
+            previousIndex: args.previousIndex, currentIndex: args.currentIndex });
         if (listObj !== this) {
             const sourceArgs1 = extend(sourceArgs, { currentData: this.listData });
             dragArgs = extend(dragArgs, { source: sourceArgs1, destination: destArgs });
@@ -13847,14 +14154,14 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 currIdx++;
             });
             if (this.fields.groupBy) {
-                let sourceElem = this.renderItems(this.listData, this.fields);
+                const sourceElem = this.renderItems(this.listData, this.fields);
                 this.updateListItems(sourceElem, this.ulElement);
                 this.setSelection();
             }
             if (listObj.sortOrder !== 'None' || this.selectionSettings.showCheckbox
                 !== listObj.selectionSettings.showCheckbox || listObj.fields.groupBy || listObj.itemTemplate || this.itemTemplate) {
                 const sortable = getComponent(ul, 'sortable');
-                let sourceElem = listObj.renderItems(listData, listObj.fields);
+                const sourceElem = listObj.renderItems(listData, listObj.fields);
                 listObj.updateListItems(sourceElem, ul);
                 this.setSelection();
                 if (sortable.placeHolderElement) {
@@ -13881,10 +14188,17 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             dragArgs = extend(dragArgs, { destination: dragArgs1 });
         }
         this.trigger('drop', dragArgs);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const liCollElem = dragArgs.elements;
+        if (liCollElem.length) {
+            for (let i = 0; i < liCollElem.length; i++) {
+                liCollElem[i].classList.remove('e-grabbed');
+            }
+        }
     }
     updateListItems(sourceElem, destElem) {
         const i = 0;
-        destElem.innerHTML = "";
+        destElem.innerHTML = '';
         while (i < sourceElem.childNodes.length) {
             destElem.appendChild(sourceElem.childNodes[i]);
         }
@@ -13913,6 +14227,14 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
         return listObj;
     }
+    /**
+     * Sets the enabled state to DropDownBase.
+     *
+     * @returns {void}
+     */
+    setEnabled() {
+        this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');
+    }
     listOption(dataSource, fields) {
         this.listCurrentOptions = super.listOption(dataSource, fields);
         this.listCurrentOptions = extend({}, this.listCurrentOptions, { itemCreated: this.triggerBeforeItemRender.bind(this) }, true);
@@ -13944,7 +14266,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     enableItems(items, enable = true, isValue) {
         let li;
         items.forEach((item) => {
-            let text = item;
+            const text = item;
             li = this.findListElement(this.list, 'li', 'data-value', isValue ? text : this.getValueByText(text));
             if (!li) {
                 return;
@@ -14069,7 +14391,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         if (this.listData.length === 0) {
             this.l10nUpdate();
         }
-        this.value = null;
+        this.value = [];
         this.updateToolBarState();
     }
     /**
@@ -14349,9 +14671,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             prepend([this.filterParent], this.list);
             attributes(this.filterInput, {
                 'aria-disabled': 'false',
-                'aria-owns': this.element.id + '_options',
-                'role': 'listbox',
-                'aria-activedescendant': null,
+                'aria-label': 'search list item',
                 'autocomplete': 'off',
                 'autocorrect': 'off',
                 'autocapitalize': 'off',
@@ -14388,12 +14708,12 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         if (li && li.parentElement) {
             currSelIdx = [].slice.call(li.parentElement.children).indexOf(li);
             if (!this.selectionSettings.showCheckbox) {
-                if ((e.ctrlKey || Browser.isDevice) && this.isSelected(li)) {
+                if ((e.ctrlKey || e.metaKey || Browser.isDevice) && this.isSelected(li)) {
                     li.classList.remove(cssClass.selected);
                     li.removeAttribute('aria-selected');
                     isSelect = false;
                 }
-                else if (!(this.selectionSettings.mode === 'Multiple' && (e.ctrlKey || Browser.isDevice))) {
+                else if (!(this.selectionSettings.mode === 'Multiple' && (e.ctrlKey || e.metaKey || Browser.isDevice))) {
                     this.getSelectedItems().forEach((ele) => {
                         ele.removeAttribute('aria-selected');
                     });
@@ -14675,7 +14995,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             });
             if (isRefresh) {
                 if (fListBox.fields.groupBy) {
-                    let sourceElem = fListBox.renderItems(listData, fListBox.fields);
+                    const sourceElem = fListBox.renderItems(listData, fListBox.fields);
                     fListBox.updateListItems(sourceElem, fListBox.ulElement);
                 }
                 else {
@@ -14708,7 +15028,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             tListBox.jsonData = tJsonData;
             tListBox.sortedData = tSortData;
             if (isRefresh) {
-                let sourceElem = tListBox.renderItems(tListData, tListBox.fields);
+                const sourceElem = tListBox.renderItems(tListData, tListBox.fields);
                 tListBox.updateListItems(sourceElem, tListBox.ulElement);
                 tListBox.setSelection();
                 fListBox.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
@@ -14748,7 +15068,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         const isRefresh = tListBox.sortOrder !== 'None' || (tListBox.selectionSettings.showCheckbox !==
             fListBox.selectionSettings.showCheckbox) || tListBox.fields.groupBy || tListBox.itemTemplate || fListBox.itemTemplate;
         this.removeSelected(fListBox, fListBox.getSelectedItems());
-        const tempItems = [].slice.call(fListBox.jsonData);
+        const tempItems = [].slice.call(fListBox.listData);
         const localDataArgs = { cancel: false, items: tempItems, eventName: this.toolbarAction };
         fListBox.trigger('actionBegin', localDataArgs);
         if (localDataArgs.cancel) {
@@ -14793,11 +15113,29 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         fListBox.value = [];
         listData = listData
             .filter((data) => data.isHeader !== true);
+        const sortedData = listData.filter(function (val) {
+            return tListBox.jsonData.indexOf(val) === -1;
+        });
+        for (let 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;
-        tListBox.jsonData = jsonData;
-        fListBox.listData = fListBox.sortedData = fListBox.jsonData = [];
+        if (fListBox.listData.length === fListBox.jsonData.length) {
+            fListBox.listData = fListBox.sortedData = fListBox.jsonData = [];
+        }
+        else if (fListBox.allowFiltering) {
+            for (let i = 0; i < fListBox.listData.length; i++) {
+                for (let j = 0; j < fListBox.jsonData.length; j++) {
+                    if (fListBox.listData[i] === fListBox.jsonData[j]) {
+                        fListBox.jsonData.splice(j, 1);
+                    }
+                }
+            }
+            fListBox.listData = fListBox.sortedData = [];
+        }
         if (isRefresh) {
-            let sourceElem = tListBox.renderItems(listData, tListBox.fields);
+            const sourceElem = tListBox.renderItems(listData, tListBox.fields);
             tListBox.updateListItems(sourceElem, tListBox.ulElement);
             this.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
         }
@@ -14848,21 +15186,35 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
         return listObj;
     }
-    getGrabbedItems() {
+    getGrabbedItems(args) {
+        let grabbItems = false;
         for (let i = 0; i < this.value.length; i++) {
-            if (this.value[i] === this.dragValue) {
+            if (this.value[i] === this.getFormattedValue(args.target.getAttribute('data-value'))) {
+                grabbItems = true;
+                break;
+            }
+        }
+        if (grabbItems) {
+            for (let i = 0; i < this.value.length; i++) {
                 const liColl = this.list.querySelectorAll('[aria-selected="true"]');
-                for (let i = 0; i < liColl.length; i++) {
-                    liColl[i].classList.add('e-grabbed');
+                for (let j = 0; j < liColl.length; j++) {
+                    if (this.value[i] === this.getFormattedValue(liColl[j].getAttribute('data-value'))) {
+                        liColl[j].classList.add('e-grabbed');
+                    }
                 }
-                break;
             }
         }
-        const elems = Array.prototype.slice.call(this.element.querySelectorAll('.e-grabbed'));
+        let elems;
+        if (this.isAngular) {
+            elems = Array.prototype.slice.call(this.element.getElementsByClassName('e-list-parent')[0].querySelectorAll('.e-grabbed'));
+        }
+        else {
+            elems = Array.prototype.slice.call(this.element.nextElementSibling.querySelectorAll('.e-grabbed'));
+        }
         return elems;
     }
     getDragArgs(args, isDragEnd) {
-        let elems = this.getGrabbedItems();
+        let elems = this.getGrabbedItems(args);
         if (elems.length) {
             if (isDragEnd) {
                 elems.push(args.target);
@@ -14914,7 +15266,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                     }
                 }
             }
-            else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== "KeyA") {
+            else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== 'KeyA') {
                 this.upDownKeyHandler(e);
             }
         }
@@ -14957,9 +15309,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 this.selectHandler({ target: ul.children[fliIdx], ctrlKey: e.ctrlKey, shiftKey: e.shiftKey }, true);
             }
             if (this.selectionSettings.showCheckbox && e.ctrlKey && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
-                let selectedidx = Array.prototype.indexOf.call(ul.children, fli);
-                let sidx = e.code === "Home" ? 0 : selectedidx;
-                let eidx = e.code === "Home" ? selectedidx : ul.children.length - 1;
+                const selectedidx = Array.prototype.indexOf.call(ul.children, fli);
+                const sidx = e.code === 'Home' ? 0 : selectedidx;
+                const eidx = e.code === 'Home' ? selectedidx : ul.children.length - 1;
                 for (let i = sidx; i <= eidx; i++) {
                     const item = ul.children[i];
                     this.notify('updatelist', { li: item, e: {
@@ -15113,7 +15465,6 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 dvalue = this.getFormattedValue(li.getAttribute('data-value'));
                 if (values.indexOf(dvalue) < 0) {
                     li.getElementsByClassName('e-check')[0].classList.remove('e-check');
-                    li.getElementsByClassName('e-checkbox-wrapper')[0].removeAttribute('aria-checked');
                     li.removeAttribute('aria-selected');
                 }
             });
@@ -15131,6 +15482,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 else {
                     text = value;
                 }
+                if (typeof (text) === 'string') {
+                    text = text.split("\\").join("\\\\");
+                }
                 li = this.list.querySelector('[data-value="' + text + '"]');
                 if (li) {
                     if (this.selectionSettings.showCheckbox) {
@@ -15459,6 +15813,12 @@ __decorate$6([
 __decorate$6([
     Property('')
 ], ListBox.prototype, "height", void 0);
+__decorate$6([
+    Property(true)
+], ListBox.prototype, "enabled", void 0);
+__decorate$6([
+    Property(false)
+], ListBox.prototype, "enablePersistence", void 0);
 __decorate$6([
     Property(false)
 ], ListBox.prototype, "allowDragAndDrop", void 0);
@@ -15533,6 +15893,1444 @@ const listBoxClasses = {
     clearIcon: 'e-clear-icon'
 };
 
+/**
+ * export all modules from current location
+ */
+
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The Mention component is used to list someone or something based on user input in textarea, input,
+ * or any other editable element from which the user can select.
+ */
+let Mention = class Mention extends DropDownBase {
+    /**
+     * * Constructor for creating the widget
+     *
+     * @param {MentionModel} options - Specifies the MentionComponent model.
+     * @param {string | HTMLElement} element - Specifies the element to render as component.
+     * @private
+     */
+    constructor(options, element) {
+        super(options, element);
+    }
+    /**
+     * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.
+     *
+     * @param {MentionModel} newProp - Returns the dynamic property value of the component.
+     * @param {MentionModel} oldProp - Returns the previous property value of the component.
+     * @private
+     * @returns {void}
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onPropertyChanged(newProp, oldProp) {
+        for (const prop of Object.keys(newProp)) {
+            switch (prop) {
+                case 'minLength':
+                    this.minLength = newProp.minLength;
+                    break;
+                case 'suffixText':
+                    this.suffixText = newProp.suffixText;
+                    break;
+                case 'allowSpaces':
+                    this.allowSpaces = newProp.allowSpaces;
+                    break;
+                case 'mentionChar':
+                    this.mentionChar = newProp.mentionChar;
+                    break;
+                case 'showMentionChar':
+                    this.showMentionChar = newProp.showMentionChar;
+                    break;
+                case 'cssClass':
+                    this.updateCssClass(newProp.cssClass, oldProp.cssClass);
+                    break;
+            }
+        }
+    }
+    updateCssClass(newClass, oldClass) {
+        if (!isNullOrUndefined(oldClass)) {
+            oldClass = (oldClass.replace(/\s+/g, ' ')).trim();
+        }
+        if (!isNullOrUndefined(newClass)) {
+            newClass = (newClass.replace(/\s+/g, ' ')).trim();
+        }
+        this.setCssClass(newClass, [this.inputElement], oldClass);
+        if (this.popupObj) {
+            this.setCssClass(newClass, [this.popupObj.element], oldClass);
+        }
+    }
+    setCssClass(cssClass$$1, elements, oldClass) {
+        if (!isNullOrUndefined(oldClass) && oldClass !== '') {
+            removeClass(elements, oldClass.split(' '));
+        }
+        if (!isNullOrUndefined(cssClass$$1) && cssClass$$1 !== '') {
+            addClass(elements, cssClass$$1.split(' '));
+        }
+    }
+    initializeData() {
+        this.isSelected = false;
+        this.isFiltered = false;
+        this.beforePopupOpen = false;
+        this.initRemoteRender = false;
+        this.isListResetted = false;
+        this.isPopupOpen = false;
+        this.isCollided = false;
+        this.lineBreak = false;
+        this.keyConfigure = {
+            tab: 'tab',
+            enter: '13',
+            escape: '27',
+            end: '35',
+            home: '36',
+            down: '40',
+            up: '38',
+            pageUp: '33',
+            pageDown: '34',
+            open: 'alt+40',
+            close: 'shift+tab',
+            hide: 'alt+38',
+            space: '32'
+        };
+    }
+    /**
+     * Execute before render the list items
+     *
+     * @private
+     * @returns {void}
+     */
+    preRender() {
+        this.initializeData();
+        super.preRender();
+    }
+    /**
+     * To Initialize the control rendering
+     *
+     * @private
+     * @returns {void}
+     */
+    render() {
+        this.inputElement = !isNullOrUndefined(this.target) ? ((typeof this.target) === 'string') ?
+            document.querySelector(this.target) : this.target : this.element;
+        if (this.isContentEditable(this.inputElement)) {
+            this.inputElement.setAttribute('contenteditable', 'true');
+            addClass([this.inputElement], ['e-mention']);
+            if (isNullOrUndefined(this.target)) {
+                addClass([this.inputElement], ['e-editable-element']);
+            }
+        }
+        this.queryString = this.elementValue();
+        this.wireEvent();
+    }
+    wireEvent() {
+        EventHandler.add(this.inputElement, 'keyup', this.onKeyUp, this);
+        this.bindCommonEvent();
+    }
+    unWireEvent() {
+        EventHandler.remove(this.inputElement, 'keyup', this.onKeyUp);
+        this.unBindCommonEvent();
+    }
+    bindCommonEvent() {
+        if (!Browser.isDevice) {
+            this.keyboardModule = new KeyboardEvents(this.inputElement, {
+                keyAction: this.keyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'
+            });
+        }
+    }
+    /**
+     * Hides the spinner loader.
+     *
+     * @private
+     * @returns {void}
+     */
+    hideSpinner() {
+        this.hideWaitingSpinner();
+    }
+    hideWaitingSpinner() {
+        if (!isNullOrUndefined(this.spinnerElement)) {
+            hideSpinner(this.spinnerElement);
+        }
+        if (!isNullOrUndefined(this.spinnerTemplate) && !isNullOrUndefined(this.spinnerTemplateElement)) {
+            detach(this.spinnerTemplateElement);
+        }
+    }
+    /**
+     * Shows the spinner loader.
+     *
+     * @returns {void}
+     */
+    showWaitingSpinner() {
+        if (!isNullOrUndefined(this.popupObj)) {
+            if (isNullOrUndefined(this.spinnerTemplate) && isNullOrUndefined(this.spinnerElement)) {
+                this.spinnerElement = this.popupObj.element;
+                createSpinner({
+                    target: this.spinnerElement,
+                    width: Browser.isDevice ? '16px' : '14px'
+                }, this.createElement);
+                showSpinner(this.spinnerElement);
+            }
+            if (!isNullOrUndefined(this.spinnerTemplate)) {
+                this.setSpinnerTemplate();
+            }
+        }
+    }
+    keyActionHandler(e) {
+        const isNavigation = (e.action === 'down' || e.action === 'up' || e.action === 'pageUp' || e.action === 'pageDown'
+            || e.action === 'home' || e.action === 'end');
+        const isTabAction = e.action === 'tab' || e.action === 'close';
+        if (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape' && e.action !== 'space') {
+            this.renderList();
+        }
+        if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&
+            isNavigation && this.liCollections.length === 0) || this.isRequested) {
+            return;
+        }
+        if (e.action === 'escape') {
+            e.preventDefault();
+        }
+        this.isSelected = e.action === 'escape' ? false : this.isSelected;
+        switch (e.action) {
+            case 'down':
+            case 'up':
+                this.updateUpDownAction(e);
+                break;
+            case 'tab':
+                if (this.isPopupOpen) {
+                    e.preventDefault();
+                    const li = this.list.querySelector('.' + dropDownBaseClasses.selected);
+                    if (li) {
+                        this.setSelection(li, e);
+                    }
+                    if (this.isPopupOpen) {
+                        this.hidePopup(e);
+                    }
+                }
+                break;
+            case 'enter':
+                if (this.isPopupOpen) {
+                    e.preventDefault();
+                    if (this.popupObj && this.popupObj.element.contains(this.selectedLI)) {
+                        this.setValue(e);
+                    }
+                }
+                break;
+            case 'escape':
+                if (this.isPopupOpen) {
+                    this.hidePopup(e);
+                }
+                break;
+        }
+    }
+    updateUpDownAction(e) {
+        const focusEle = this.list.querySelector('.' + dropDownBaseClasses.focus);
+        if (this.isSelectFocusItem(focusEle)) {
+            this.setSelection(focusEle, e);
+        }
+        else if (!isNullOrUndefined(this.liCollections)) {
+            const li = this.list.querySelector('.' + dropDownBaseClasses.selected);
+            if (!isNullOrUndefined(li)) {
+                const value = this.getFormattedValue(li.getAttribute('data-value'));
+                this.activeIndex = this.getIndexByValue(value);
+            }
+            let index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;
+            let startIndex = 0;
+            startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;
+            index = index < 0 ? this.liCollections.length - 1 : index === this.liCollections.length ? 0 : index;
+            const nextItem = isNullOrUndefined(this.activeIndex) ?
+                this.liCollections[startIndex] : this.liCollections[index];
+            if (!isNullOrUndefined(nextItem)) {
+                this.setSelection(nextItem, e);
+            }
+        }
+        if (this.isPopupOpen) {
+            e.preventDefault();
+        }
+    }
+    isSelectFocusItem(element) {
+        return !isNullOrUndefined(element);
+    }
+    unBindCommonEvent() {
+        if (!Browser.isDevice) {
+            this.keyboardModule.destroy();
+        }
+    }
+    onKeyUp(e) {
+        let rangetextContent;
+        if (this.isContentEditable(this.inputElement)) {
+            this.range = this.getCurrentRange();
+            rangetextContent = this.range.startContainer.textContent.split('');
+        }
+        let currentRange = this.getTextRange();
+        const lastWordRange = this.getLastLetter(currentRange);
+        // eslint-disable-next-line security/detect-non-literal-regexp
+        const Regex = new RegExp(this.mentionChar, 'g');
+        const charRegex = new RegExp('[a-zA-Z]', 'g');
+        if (e.key === 'Shift' || e.keyCode === 37 || e.keyCode === 39) {
+            if ((e.keyCode === 37 || e.keyCode === 39) && !isNullOrUndefined(currentRange) &&
+                currentRange.indexOf(this.mentionChar) === -1 && this.isPopupOpen) {
+                this.hidePopup();
+            }
+            return;
+        }
+        if ((!currentRange || !lastWordRange) || e.code === 'Enter' || e.keyCode === 27 ||
+            (lastWordRange.match(Regex) && lastWordRange.match(Regex).length > 1) ||
+            (this.isContentEditable(this.inputElement) && this.range.startContainer &&
+                this.range.startContainer.previousElementSibling && this.range.startContainer.textContent.split('').length > 0 &&
+                (rangetextContent.length === 1 || rangetextContent[rangetextContent.length - 2].indexOf('') === -1 ||
+                    this.range.startContainer.nodeType === 1))) {
+            if (this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
+                && !this.isMatchedText() && (currentRange.length > 1 && currentRange.replace(/\u00A0/g, ' ').charAt(currentRange.length - 2) !== ' ') &&
+                (this.list && this.list.querySelectorAll('ul').length > 0)) {
+                this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
+                this.searchLists(e);
+            }
+            else if (this.isPopupOpen && (!this.allowSpaces || !lastWordRange)) {
+                this.hidePopup();
+                this.lineBreak = true;
+            }
+            return;
+        }
+        this.queryString = lastWordRange.replace(this.mentionChar, '');
+        if (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) &&
+            this.queryString !== '' && e.keyCode !== 38 && e.keyCode !== 40 && !this.lineBreak) {
+            this.searchLists(e);
+            if (!this.isPopupOpen && this.queryString.length >= this.minLength) {
+                if (!this.isContentEditable(this.inputElement)) {
+                    this.showPopup();
+                }
+                else if (this.isContentEditable(this.inputElement) && this.range && this.range.startContainer !== this.inputElement && e.keyCode !== 9) {
+                    this.showPopup();
+                }
+            }
+        }
+        else if (lastWordRange.indexOf(this.mentionChar) === 0 && !this.isPopupOpen && e.keyCode !== 8 && (!this.popupObj ||
+            (isNullOrUndefined(this.target) && !document.body.contains(this.popupObj.element) ||
+                !isNullOrUndefined(this.target) && document.body.contains(this.popupObj.element)))) {
+            if (this.initRemoteRender && this.list && this.list.classList.contains('e-nodata')) {
+                this.searchLists(e);
+            }
+            this.resetList(this.dataSource, this.fields);
+            if (isNullOrUndefined(this.list)) {
+                this.initValue();
+            }
+            if (!this.isPopupOpen && e.keyCode !== 38 && e.keyCode !== 40) {
+                this.showPopup();
+                if (this.initRemoteRender && this.list.querySelectorAll('li').length === 0) {
+                    this.showWaitingSpinner();
+                }
+                this.lineBreak = false;
+            }
+        }
+        else if (this.allowSpaces && this.queryString !== '' && currentRange && currentRange.trim() !== '' && currentRange.replace('\u00a0', ' ').lastIndexOf(' ') < currentRange.length - 1 &&
+            e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 8 && this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0)) {
+            this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
+            this.searchLists(e);
+        }
+        else if (this.queryString === '' && this.isPopupOpen && e.keyCode !== 38 && e.keyCode !== 40 && this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0)) {
+            this.searchLists(e);
+            if (!this.isListResetted) {
+                this.resetList(this.dataSource, this.fields);
+            }
+        }
+        this.isListResetted = false;
+    }
+    isMatchedText() {
+        let isMatched = false;
+        for (let i = 0; i < (this.liCollections && this.liCollections.length); i++) {
+            if (this.getTextRange() &&
+                this.getTextRange().substring(this.getTextRange().lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ').trim() === this.liCollections[i].getAttribute('data-value').toLowerCase()) {
+                isMatched = true;
+            }
+        }
+        return isMatched;
+    }
+    getCurrentRange() {
+        this.range = this.inputElement.ownerDocument.getSelection().getRangeAt(0);
+        return this.range;
+    }
+    searchLists(e) {
+        this.isDataFetched = false;
+        if (isNullOrUndefined(this.list)) {
+            super.render();
+            this.unWireListEvents();
+            this.wireListEvents();
+        }
+        if (e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38)) {
+            this.queryString = this.queryString === '' ? null : this.queryString;
+            this.beforePopupOpen = true;
+            this.resetList(this.dataSource, this.fields);
+            return;
+        }
+        this.isSelected = false;
+        this.activeIndex = null;
+        const eventArgs = {
+            preventDefaultAction: false,
+            text: this.queryString,
+            updateData: (dataSource, query, fields) => {
+                if (eventArgs.cancel) {
+                    return;
+                }
+                this.isFiltered = true;
+                this.filterAction(dataSource, query, fields);
+            },
+            cancel: false
+        };
+        this.trigger('filtering', eventArgs, (eventArgs) => {
+            if (!eventArgs.cancel && !this.isFiltered && !eventArgs.preventDefaultAction) {
+                this.filterAction(this.dataSource, null, this.fields);
+            }
+        });
+    }
+    filterAction(dataSource, query, fields) {
+        this.beforePopupOpen = true;
+        if (this.queryString.length >= this.minLength) {
+            this.resetList(dataSource, fields, query);
+            this.isListResetted = true;
+        }
+        else {
+            if (this.isPopupOpen) {
+                this.hidePopup();
+            }
+            this.beforePopupOpen = false;
+        }
+        this.setDataIndex();
+        this.renderReactTemplates();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onActionComplete(ulElement, list, e, isUpdated) {
+        super.onActionComplete(ulElement, list, e);
+        if (this.isActive) {
+            if (!isNullOrUndefined(ulElement)) {
+                attributes(ulElement, { 'id': this.inputElement.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
+            }
+            let focusItem = ulElement.querySelector('.' + dropDownBaseClasses.li);
+            if (focusItem) {
+                focusItem.classList.add(dropDownBaseClasses.selected);
+                this.selectedLI = focusItem;
+                const value = this.getFormattedValue(focusItem.getAttribute('data-value'));
+                this.selectEventCallback(focusItem, this.getDataByValue(value), value, true);
+            }
+        }
+    }
+    setDataIndex() {
+        for (let i = 0; this.liCollections && i < this.liCollections.length; i++) {
+            this.liCollections[i].setAttribute('data-index', i.toString());
+        }
+    }
+    listOption(dataSource, fieldsSettings) {
+        const fields = super.listOption(dataSource, fieldsSettings);
+        if (isNullOrUndefined(fields.itemCreated)) {
+            fields.itemCreated = (e) => {
+                if (this.highlight) {
+                    if (this.inputElement.tagName === this.getNgDirective() && this.itemTemplate) {
+                        setTimeout(() => {
+                            highlightSearch(e.item, this.queryString, this.ignoreCase, this.filterType);
+                        }, 0);
+                    }
+                    else {
+                        highlightSearch(e.item, this.queryString, this.ignoreCase, this.filterType);
+                    }
+                }
+            };
+        }
+        else {
+            const itemCreated = fields.itemCreated;
+            fields.itemCreated = (e) => {
+                if (this.highlight) {
+                    highlightSearch(e.item, this.queryString, this.ignoreCase, this.filterType);
+                }
+                itemCreated.apply(this, [e]);
+            };
+        }
+        return fields;
+    }
+    elementValue() {
+        if (!this.isContentEditable(this.inputElement)) {
+            return this.inputElement.value.replace(this.mentionChar, '');
+        }
+        else {
+            return this.inputElement.textContent.replace(this.mentionChar, '');
+        }
+    }
+    getQuery(query) {
+        const filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
+        const filterType = (this.queryString === '' && !isNullOrUndefined(this.elementValue())) ? 'equal' : this.filterType;
+        const queryString = (this.queryString === '' && !isNullOrUndefined(this.elementValue())) ?
+            this.elementValue() : this.queryString;
+        if (this.isFiltered) {
+            return filterQuery;
+        }
+        if (this.queryString !== null && this.queryString !== '') {
+            const dataType = this.typeOfData(this.dataSource).typeof;
+            if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
+                filterQuery.where('', filterType, queryString, this.ignoreCase, this.ignoreAccent);
+            }
+            else {
+                const mapping = !isNullOrUndefined(this.fields.text) ? this.fields.text : '';
+                filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);
+            }
+        }
+        if (!isNullOrUndefined(this.suggestionCount)) {
+            // Since defualt value of suggestioncount is 25, checked the condition
+            if (this.suggestionCount !== 25) {
+                for (let queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                    if (filterQuery.queries[queryElements].fn === 'onTake') {
+                        filterQuery.queries.splice(queryElements, 1);
+                    }
+                }
+            }
+            filterQuery.take(this.suggestionCount);
+        }
+        return filterQuery;
+    }
+    renderHightSearch() {
+        if (this.highlight) {
+            for (let i = 0; i < this.liCollections.length; i++) {
+                const isHighlight = this.ulElement.querySelector('.e-active');
+                if (!isHighlight) {
+                    revertHighlightSearch(this.liCollections[i]);
+                    highlightSearch(this.liCollections[i], this.queryString, this.ignoreCase, this.filterType);
+                }
+            }
+        }
+    }
+    getTextRange() {
+        let text;
+        if (!this.isContentEditable(this.inputElement)) {
+            const component = this.inputElement;
+            if (!isNullOrUndefined(component)) {
+                const startPos = component.selectionStart;
+                if (component.value && startPos >= 0) {
+                    text = component.value.substring(0, startPos);
+                }
+            }
+        }
+        else {
+            if (this.range) {
+                const selectedElem = this.range.startContainer;
+                if (!isNullOrUndefined(selectedElem)) {
+                    const workingNodeContent = selectedElem.textContent;
+                    const selectStartOffset = this.range.startOffset;
+                    if (workingNodeContent && selectStartOffset >= 0) {
+                        text = workingNodeContent.substring(0, selectStartOffset);
+                    }
+                }
+            }
+        }
+        return text;
+    }
+    getLastLetter(text) {
+        if (isNullOrUndefined(text)) {
+            return '';
+        }
+        const textValue = text.replace(/\u00A0/g, ' ');
+        const words = textValue.split(/\s+/);
+        const wordCnt = words.length - 1;
+        return words[wordCnt].trim();
+    }
+    isContentEditable(element) {
+        return element && element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA';
+    }
+    /**
+     * Opens the popup that displays the list of items.
+     *
+     * @returns {void}
+     */
+    showPopup() {
+        this.beforePopupOpen = true;
+        if (isNullOrUndefined(this.list)) {
+            this.initValue();
+        }
+        this.renderPopup();
+        attributes(this.inputElement, { 'aria-activedescendant': this.selectedElementID });
+        if (this.selectedElementID == null) {
+            this.inputElement.removeAttribute('aria-activedescendant');
+        }
+    }
+    /* eslint-disable valid-jsdoc, jsdoc/require-param */
+    /**
+     * Hides the popup if it is in an open state.
+     *
+     * @returns {void}
+     */
+    hidePopup(e) {
+        this.removeSelection();
+        this.closePopup(0, e);
+    }
+    closePopup(delay, e) {
+        if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {
+            return;
+        }
+        EventHandler.remove(document, 'mousedown', this.onDocumentClick);
+        this.inputElement.removeAttribute('aria-owns');
+        this.inputElement.removeAttribute('aria-activedescendant');
+        this.beforePopupOpen = false;
+        const animModel = {
+            name: 'FadeOut',
+            duration: 100,
+            delay: delay ? delay : 0
+        };
+        const popupInstance = this.popupObj;
+        const eventArgs = { popup: popupInstance, cancel: false, animation: animModel, event: e || null };
+        this.trigger('closed', eventArgs, (eventArgs) => {
+            if (!eventArgs.cancel && this.popupObj) {
+                if (this.isPopupOpen) {
+                    this.popupObj.hide(new Animation(eventArgs.animation));
+                }
+                else {
+                    this.destroyPopup();
+                }
+            }
+        });
+    }
+    renderPopup() {
+        const args = { cancel: false };
+        this.trigger('beforeOpen', args, (args) => {
+            if (!args.cancel) {
+                let popupEle;
+                if (isNullOrUndefined(this.target)) {
+                    popupEle = this.createElement('div', {
+                        id: this.inputElement.id + '_popup', className: 'e-mention e-popup ' + (this.cssClass != null ? this.cssClass : '')
+                    });
+                }
+                else {
+                    popupEle = this.element;
+                    if (this.cssClass != null) {
+                        addClass([popupEle], this.cssClass.split(' '));
+                    }
+                }
+                if (!isNullOrUndefined(this.target)) {
+                    popupEle.id = this.inputElement.id + '_popup';
+                    addClass([popupEle], ['e-mention', 'e-popup', 'e-popup-close']);
+                }
+                this.listHeight = formatUnit(this.popupHeight);
+                if (!isNullOrUndefined(this.list.querySelector('li')) && !this.initRemoteRender) {
+                    const li = this.list.querySelector('.' + dropDownBaseClasses.focus);
+                    if (!isNullOrUndefined(li)) {
+                        this.selectedLI = li;
+                        const value = this.getFormattedValue(li.getAttribute('data-value'));
+                        this.selectEventCallback(li, this.getDataByValue(value), value, true);
+                    }
+                }
+                append([this.list], popupEle);
+                if ((!this.popupObj || !document.body.contains(this.popupObj.element)) ||
+                    !document.contains(popupEle) && isNullOrUndefined(this.target)) {
+                    document.body.appendChild(popupEle);
+                }
+                let coordinates;
+                popupEle.style.visibility = 'hidden';
+                this.setHeight(popupEle);
+                const offsetValue = 0;
+                const left = 0;
+                this.initializePopup(popupEle, offsetValue, left);
+                this.checkCollision(popupEle);
+                popupEle.style.visibility = 'visible';
+                if (!isNullOrUndefined(this.list)) {
+                    this.unWireListEvents();
+                    this.wireListEvents();
+                }
+                this.selectedElementID = this.selectedLI ? this.selectedLI.id : null;
+                attributes(this.inputElement, { 'aria-owns': this.inputElement.id + '_options', 'aria-activedescendant': this.selectedElementID });
+                if (this.selectedElementID == null) {
+                    this.inputElement.removeAttribute('aria-activedescendant');
+                }
+                const animModel = { name: 'FadeIn', duration: 100 };
+                this.beforePopupOpen = true;
+                const popupInstance = this.popupObj;
+                const eventArgs = { popup: popupInstance, cancel: false, animation: animModel };
+                this.trigger('opened', eventArgs, (eventArgs) => {
+                    if (!eventArgs.cancel) {
+                        this.renderReactTemplates();
+                        this.popupObj.show(new Animation(eventArgs.animation), (this.zIndex === 1000) ? this.inputElement : null);
+                        if (isNullOrUndefined(this.getTriggerCharPosition())) {
+                            return;
+                        }
+                        coordinates = this.getCoordinates(this.inputElement, this.getTriggerCharPosition());
+                        if (!this.isCollided) {
+                            popupEle.style.cssText = 'top: '.concat(coordinates.top.toString(), 'px;\n left: ').concat(coordinates.left.toString(), 'px;\nposition: absolute;\n display: block;');
+                        }
+                        else {
+                            popupEle.style.left = formatUnit(coordinates.left);
+                            this.isCollided = false;
+                        }
+                        popupEle.style.width = this.popupWidth !== '100%' && !isNullOrUndefined(this.popupWidth) ? formatUnit(this.popupWidth) : 'auto';
+                        this.setHeight(popupEle);
+                        popupEle.style.zIndex = this.zIndex === 1000 ? getZindexPartial(popupEle).toString() : this.zIndex.toString();
+                    }
+                    else {
+                        this.beforePopupOpen = false;
+                        this.destroyPopup();
+                    }
+                });
+            }
+            else {
+                this.beforePopupOpen = false;
+            }
+        });
+    }
+    setHeight(popupEle) {
+        if (this.popupHeight !== 'auto') {
+            this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
+            popupEle.style.maxHeight = formatUnit(this.popupHeight);
+        }
+        else {
+            popupEle.style.height = 'auto';
+        }
+    }
+    checkCollision(popupEle) {
+        if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'mention'))) {
+            const collision = isCollide(popupEle);
+            if (collision.length > 0) {
+                popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';
+                this.isCollided = true;
+            }
+            this.popupObj.resolveCollision();
+        }
+    }
+    getTriggerCharPosition() {
+        let mostRecentTriggerCharPos;
+        const currentRange = this.getTextRange();
+        if (currentRange !== undefined && currentRange !== null) {
+            mostRecentTriggerCharPos = 0;
+            const idx = currentRange.lastIndexOf(this.mentionChar);
+            if (idx >= mostRecentTriggerCharPos) {
+                mostRecentTriggerCharPos = idx;
+            }
+        }
+        return mostRecentTriggerCharPos;
+    }
+    initializePopup(element, offsetValue, left) {
+        this.popupObj = new Popup(element, {
+            width: this.setWidth(), targetType: 'relative',
+            relateTo: this.inputElement, collision: { X: 'flip', Y: 'flip' }, offsetY: offsetValue,
+            enableRtl: this.enableRtl, offsetX: left, position: { X: 'top', Y: 'left' }, actionOnScroll: 'hide',
+            zIndex: this.zIndex,
+            close: () => {
+                this.destroyPopup();
+            },
+            open: () => {
+                EventHandler.add(document, 'mousedown', this.onDocumentClick, this);
+                this.isPopupOpen = true;
+                this.setDataIndex();
+            }
+        });
+    }
+    setWidth() {
+        let width = formatUnit(this.popupWidth);
+        if (width.indexOf('%') > -1) {
+            const inputWidth = this.inputElement.offsetWidth * parseFloat(width) / 100;
+            width = inputWidth.toString() + 'px';
+        }
+        return width;
+    }
+    destroyPopup() {
+        this.isPopupOpen = false;
+        this.popupObj.destroy();
+        if (isNullOrUndefined(this.target)) {
+            detach(this.popupObj.element);
+        }
+        else {
+            this.popupObj.element.innerHTML = '';
+            this.popupObj.element.removeAttribute('style');
+            this.popupObj.element.removeAttribute('aria-disabled');
+        }
+    }
+    onDocumentClick(e) {
+        const target = e.target;
+        if (!(!isNullOrUndefined(this.popupObj) && closest(target, '#' + this.popupObj.element.id))) {
+            this.hidePopup(e);
+        }
+    }
+    getCoordinates(element, position) {
+        const properties = ['direction', 'boxSizing', 'width', 'height', 'overflowX', 'overflowY', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'fontStyle', 'fontVariant', 'fontWeight', 'fontStretch', 'fontSize', 'fontSizeAdjust', 'lineHeight', 'fontFamily', 'textAlign', 'textTransform', 'textIndent', 'textDecoration', 'letterSpacing', 'wordSpacing'];
+        let div;
+        let span;
+        let range;
+        let globalRange;
+        let coordinates;
+        let computed;
+        let rect;
+        if (!this.isContentEditable(this.inputElement)) {
+            div = this.createElement('div', { className: 'e-form-mirror-div' });
+            document.body.appendChild(div);
+            computed = getComputedStyle(element);
+            div.style.position = 'absolute';
+            div.style.visibility = 'hidden';
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            properties.forEach((prop) => {
+                // eslint-disable-next-line security/detect-object-injection
+                div.style[prop] = computed[prop];
+            });
+            div.textContent = element.value.substring(0, position);
+            if (this.inputElement.nodeName === 'INPUT') {
+                div.textContent = div.textContent.replace(/\s/g, '\u00a0');
+            }
+            span = this.createElement('span');
+            span.textContent = element.value.substring(position) || '.';
+            div.appendChild(span);
+            rect = element.getBoundingClientRect();
+        }
+        else {
+            const selectedNodePosition = this.getTriggerCharPosition();
+            globalRange = this.range;
+            range = document.createRange();
+            range.setStart(globalRange.startContainer, selectedNodePosition);
+            range.setEnd(globalRange.startContainer, selectedNodePosition);
+            range.collapse(false);
+            rect = range.getBoundingClientRect();
+        }
+        const doc = document.documentElement;
+        const windowLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
+        const windowTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+        if (!this.isContentEditable(this.inputElement)) {
+            coordinates = {
+                top: rect.top + windowTop + span.offsetTop + parseInt(computed.borderTopWidth, 10) +
+                    parseInt(computed.fontSize, 10) + 3 - element.scrollTop,
+                left: rect.left + windowLeft + span.offsetLeft + parseInt(computed.borderLeftWidth, 10)
+            };
+            document.body.removeChild(div);
+        }
+        else {
+            coordinates = {
+                top: rect.top + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize, 10),
+                left: rect.left + windowLeft
+            };
+        }
+        return coordinates;
+    }
+    initValue() {
+        this.renderList();
+        if (this.dataSource instanceof DataManager) {
+            this.initRemoteRender = true;
+        }
+        else {
+            this.updateValues();
+        }
+    }
+    updateValues() {
+        const li = this.list.querySelector('.' + dropDownBaseClasses.focus);
+        if (!isNullOrUndefined(li)) {
+            this.setSelection(li, null);
+        }
+    }
+    renderList() {
+        super.render();
+        this.unWireListEvents();
+        this.wireListEvents();
+    }
+    /**
+     * Event binding for list
+     *
+     * @returns {void}
+     */
+    wireListEvents() {
+        EventHandler.add(this.list, 'click', this.onMouseClick, this);
+        EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
+        EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
+    }
+    /**
+     * Event un binding for list items.
+     *
+     * @returns {void}
+     */
+    unWireListEvents() {
+        EventHandler.remove(this.list, 'click', this.onMouseClick);
+        EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
+        EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
+    }
+    onMouseClick(e) {
+        const target = e.target;
+        const li = closest(target, '.' + dropDownBaseClasses.li);
+        if (!this.isValidLI(li)) {
+            return;
+        }
+        this.setSelection(li, e);
+        const delay = 100;
+        this.closePopup(delay, e);
+        this.inputElement.focus();
+    }
+    updateSelectedItem(li, e, preventSelect, isSelection) {
+        this.removeSelection();
+        li.classList.add(dropDownBaseClasses.selected);
+        this.removeHover();
+        const value = this.getFormattedValue(li.getAttribute('data-value'));
+        const selectedData = this.getDataByValue(value);
+        if (!preventSelect && !isNullOrUndefined(e)) {
+            const items = this.detachChanges(selectedData);
+            this.isSelected = true;
+            const eventArgs = {
+                e: e,
+                item: li,
+                itemData: items,
+                isInteracted: e ? true : false,
+                cancel: false
+            };
+            this.trigger('select', eventArgs, (eventArgs) => {
+                if (eventArgs.cancel) {
+                    li.classList.remove(dropDownBaseClasses.selected);
+                }
+                else {
+                    this.selectEventCallback(li, selectedData, value);
+                    if (isSelection) {
+                        this.setSelectOptions(li, e);
+                    }
+                }
+            });
+        }
+        else {
+            this.selectEventCallback(li, selectedData, value);
+            if (isSelection) {
+                this.setSelectOptions(li, e);
+            }
+        }
+    }
+    setSelection(li, e) {
+        if (this.isValidLI(li) && (!li.classList.contains(dropDownBaseClasses.selected) || (this.isPopupOpen && this.isSelected
+            && li.classList.contains(dropDownBaseClasses.selected)))) {
+            this.updateSelectedItem(li, e, false, true);
+        }
+        else {
+            this.setSelectOptions(li, e);
+        }
+    }
+    setSelectOptions(li, e) {
+        if (this.list) {
+            this.removeHover();
+        }
+        this.previousSelectedLI = (!isNullOrUndefined(this.selectedLI)) ? this.selectedLI : null;
+        this.selectedLI = li;
+        if (this.isPopupOpen && !isNullOrUndefined(this.selectedLI)) {
+            this.setScrollPosition(e);
+        }
+        if (e && (e.keyCode === 38 || e.keyCode === 40)) {
+            return;
+        }
+        if (isNullOrUndefined(e) || this.setValue(e)) {
+            return;
+        }
+    }
+    setScrollPosition(e) {
+        if (!isNullOrUndefined(e)) {
+            switch (e.action) {
+                case 'pageDown':
+                case 'down':
+                case 'end':
+                    this.scrollBottom();
+                    break;
+                default:
+                    this.scrollTop();
+                    break;
+            }
+        }
+        else {
+            this.scrollBottom(true);
+        }
+    }
+    scrollBottom(isInitial) {
+        if (!isNullOrUndefined(this.selectedLI)) {
+            const currentOffset = this.list.offsetHeight;
+            const nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;
+            let nextOffset = this.list.scrollTop + nextBottom - currentOffset;
+            nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset;
+            const boxRange = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;
+            if (this.activeIndex === 0) {
+                this.list.scrollTop = 0;
+            }
+            else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {
+                this.list.scrollTop = nextOffset;
+            }
+        }
+    }
+    scrollTop() {
+        if (!isNullOrUndefined(this.selectedLI)) {
+            let nextOffset = this.selectedLI.offsetTop - this.list.scrollTop;
+            nextOffset = this.fields.groupBy && nextOffset;
+            const boxRange = (this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop);
+            if (this.activeIndex === 0) {
+                this.list.scrollTop = 0;
+            }
+            else if (nextOffset < 0) {
+                this.list.scrollTop = this.list.scrollTop + nextOffset;
+            }
+            else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {
+                this.list.scrollTop = this.selectedLI.offsetTop;
+            }
+        }
+    }
+    selectEventCallback(li, selectedData, value, selectLi) {
+        this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;
+        this.item = li;
+        this.itemData = selectedData;
+        const focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
+        if (focusedItem) {
+            removeClass([focusedItem], dropDownBaseClasses.focus);
+        }
+        if (selectLi) {
+            addClass([li], dropDownBaseClasses.selected);
+        }
+        li.setAttribute('aria-selected', 'true');
+        this.activeIndex = this.getIndexByValue(value);
+    }
+    detachChanges(value) {
+        let items;
+        if (typeof value === 'string' ||
+            typeof value === 'boolean' ||
+            typeof value === 'number') {
+            items = Object.defineProperties({}, {
+                value: {
+                    value: value,
+                    enumerable: true
+                },
+                text: {
+                    value: value,
+                    enumerable: true
+                }
+            });
+        }
+        else {
+            items = value;
+        }
+        return items;
+    }
+    setValue(e) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!this.isReact) {
+            if (!isNullOrUndefined(this.displayTemplate)) {
+                this.setDisplayTemplate();
+            }
+            this.updateMentionValue(e);
+            return true;
+        }
+        else {
+            if (!isNullOrUndefined(this.displayTemplate)) {
+                this.setDisplayTemplate(e);
+            }
+            else {
+                this.updateMentionValue(e);
+            }
+            return true;
+        }
+    }
+    updateMentionValue(e) {
+        const dataItem = this.getItemData();
+        let textSuffix;
+        let value;
+        let endPos;
+        let range;
+        let globalRange;
+        const selection = this.inputElement.ownerDocument.getSelection();
+        const startPos = this.getTriggerCharPosition();
+        textSuffix = typeof this.suffixText === 'string' ? this.suffixText : '';
+        if (dataItem.text !== null) {
+            value = this.mentionVal(dataItem.text);
+        }
+        if (!this.isContentEditable(this.inputElement)) {
+            const myField = this.inputElement;
+            const currentTriggerSnippet = this.getTextRange().substring(startPos + this.mentionChar.length, this.getTextRange().length);
+            value += textSuffix;
+            endPos = startPos + this.mentionChar.length;
+            endPos += currentTriggerSnippet.length;
+            myField.value = myField.value.substring(0, startPos) + value + myField.value.substring(endPos, myField.value.length);
+            myField.selectionStart = startPos + value.length;
+            myField.selectionEnd = startPos + value.length;
+            if (this.isPopupOpen) {
+                this.hidePopup();
+            }
+            this.onChangeEvent(e);
+        }
+        else {
+            endPos = this.getTriggerCharPosition() + this.mentionChar.length;
+            if (this.range && (this.range.startContainer.textContent.trim() !== this.mentionChar)) {
+                endPos = this.range.endOffset;
+            }
+            globalRange = this.range;
+            range = document.createRange();
+            range.setStart(globalRange.startContainer, startPos);
+            range.setEnd(globalRange.startContainer, endPos);
+            range.deleteContents();
+            const element = this.createElement('div');
+            element.innerHTML = value;
+            const frag = document.createDocumentFragment();
+            let node;
+            let lastNode;
+            // eslint-disable-next-line no-cond-assign
+            while (node = element.firstChild) {
+                lastNode = frag.appendChild(node);
+            }
+            range.insertNode(frag);
+            if (lastNode) {
+                range = range.cloneRange();
+                range.setStartAfter(lastNode);
+                range.collapse(true);
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+            if (this.isPopupOpen) {
+                this.hidePopup();
+            }
+            this.onChangeEvent(e);
+        }
+    }
+    mentionVal(value) {
+        const showChar = this.showMentionChar ? this.mentionChar : '';
+        if (!isNullOrUndefined(this.displayTemplate) && !isNullOrUndefined(this.displayTempElement)) {
+            value = this.displayTempElement.innerHTML;
+        }
+        if (this.isContentEditable(this.inputElement)) {
+            return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
+        }
+        else {
+            return showChar + value;
+        }
+    }
+    setDisplayTemplate(e) {
+        let compiledString;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.isReact) {
+            this.clearTemplate(['displayTemplate']);
+            if (this.displayTempElement) {
+                detach(this.displayTempElement);
+                this.displayTempElement = null;
+            }
+        }
+        if (!this.displayTempElement) {
+            this.displayTempElement = this.createElement('div');
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!this.isReact) {
+            this.displayTempElement.innerHTML = '';
+        }
+        compiledString = compile(this.displayTemplate);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const displayCompTemp = compiledString(this.itemData, this, 'displayTemplate', this.displayTemplateId, this.isStringTemplate, null, this.displayTempElement);
+        if (displayCompTemp && displayCompTemp.length > 0) {
+            for (let i = 0; i < displayCompTemp.length; i++) {
+                this.displayTempElement.appendChild(displayCompTemp[i]);
+            }
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!this.isReact) {
+            this.renderTemplates();
+        }
+        else {
+            this.renderTemplates(() => {
+                this.updateMentionValue(e);
+            });
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    renderTemplates(callBack) {
+        this.renderReactTemplates(callBack);
+    }
+    setSpinnerTemplate() {
+        let compiledString;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.isReact) {
+            this.clearTemplate(['spinnerTemplate']);
+            if (this.spinnerTemplateElement) {
+                detach(this.spinnerTemplateElement);
+                this.spinnerTemplateElement = null;
+            }
+        }
+        if (!this.spinnerTemplateElement) {
+            this.spinnerTemplateElement = this.createElement('div');
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!this.isReact) {
+            this.spinnerTemplateElement.innerHTML = '';
+        }
+        compiledString = compile(this.spinnerTemplate);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const spinnerCompTemp = compiledString(null, this, 'spinnerTemplate', this.spinnerTemplateId, this.isStringTemplate, null, this.spinnerTemplateElement);
+        if (spinnerCompTemp && spinnerCompTemp.length > 0) {
+            for (let i = 0; i < spinnerCompTemp.length; i++) {
+                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);
+        }
+        else {
+            this.renderTemplates(() => {
+                this.popupObj.element.appendChild(this.spinnerTemplateElement);
+            });
+        }
+    }
+    onChangeEvent(eve) {
+        this.isSelected = false;
+        const items = this.detachMentionChanges(this.itemData);
+        let preItems;
+        if (typeof this.previousItemData === 'string' ||
+            typeof this.previousItemData === 'boolean' ||
+            typeof this.previousItemData === 'number') {
+            preItems = Object.defineProperties({}, {
+                value: {
+                    value: this.previousItemData,
+                    enumerable: true
+                },
+                text: {
+                    value: this.previousItemData,
+                    enumerable: true
+                }
+            });
+        }
+        else {
+            preItems = this.previousItemData;
+        }
+        const eventArgs = {
+            e: eve,
+            item: this.item,
+            itemData: items,
+            previousItem: this.previousSelectedLI,
+            previousItemData: preItems,
+            isInteracted: eve ? true : false,
+            value: this.item.innerHTML,
+            element: this.inputElement
+        };
+        this.trigger('change', eventArgs);
+    }
+    detachMentionChanges(value) {
+        let items;
+        if (typeof value === 'string' ||
+            typeof value === 'boolean' ||
+            typeof value === 'number') {
+            items = Object.defineProperties({}, {
+                value: {
+                    value: value,
+                    enumerable: true
+                },
+                text: {
+                    value: value,
+                    enumerable: true
+                }
+            });
+        }
+        else {
+            items = value;
+        }
+        return items;
+    }
+    getItemData() {
+        const fields = this.fields;
+        let dataItem = null;
+        dataItem = this.itemData;
+        let dataValue;
+        let dataText;
+        if (!isNullOrUndefined(dataItem)) {
+            dataValue = getValue(fields.value, dataItem);
+            dataText = getValue(fields.text, dataItem);
+        }
+        const value = (!isNullOrUndefined(dataItem) &&
+            !isUndefined(dataValue) ? dataValue : dataItem);
+        const text = (!isNullOrUndefined(dataItem) &&
+            !isUndefined(dataValue) ? dataText : dataItem);
+        return { value: value, text: text };
+    }
+    removeSelection() {
+        if (this.list) {
+            const selectedItems = this.list.querySelectorAll('.' + dropDownBaseClasses.selected);
+            if (selectedItems.length) {
+                removeClass(selectedItems, dropDownBaseClasses.selected);
+                selectedItems[0].removeAttribute('aria-selected');
+            }
+        }
+    }
+    onMouseOver(e) {
+        const currentLi = closest(e.target, '.' + dropDownBaseClasses.li);
+        this.setHover(currentLi);
+    }
+    setHover(li) {
+        if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {
+            this.removeHover();
+            addClass([li], dropDownBaseClasses.hover);
+        }
+    }
+    removeHover() {
+        if (this.list) {
+            const hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);
+            if (hoveredItem && hoveredItem.length) {
+                removeClass(hoveredItem, dropDownBaseClasses.hover);
+            }
+        }
+    }
+    isValidLI(li) {
+        return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');
+    }
+    onMouseLeave() {
+        this.removeHover();
+    }
+    /**
+     * Search the entered text and show it in the suggestion list if available.
+     *
+     * @returns {void}
+     */
+    search(text, positionX, positionY) {
+        if (this.isContentEditable(this.inputElement)) {
+            this.range = this.getCurrentRange();
+        }
+        const currentRange = this.getTextRange();
+        const lastWordRange = this.getLastLetter(currentRange);
+        if ((this.ignoreCase && (text === lastWordRange || text === lastWordRange.toLowerCase()))
+            || !this.ignoreCase && text === lastWordRange) {
+            this.resetList(this.dataSource, this.fields);
+        }
+        else {
+            if (this.isPopupOpen) {
+                this.hidePopup();
+            }
+            return;
+        }
+        if (isNullOrUndefined(this.list)) {
+            this.renderList();
+            this.renderPopup();
+        }
+        else {
+            this.showPopup();
+        }
+        this.popupObj.element.style.left = formatUnit(positionX);
+        this.popupObj.element.style.top = formatUnit(positionY);
+    }
+    /**
+     * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
+     *
+     * @method destroy
+     * @returns {void}
+     */
+    destroy() {
+        this.hidePopup();
+        this.unWireEvent();
+        if (this.list) {
+            this.unWireListEvents();
+        }
+        if (this.inputElement && !this.inputElement.classList.contains('e-' + this.getModuleName())) {
+            return;
+        }
+        super.destroy();
+    }
+    getLocaleName() {
+        return 'mention';
+    }
+    getNgDirective() {
+        return 'EJS-MENTION';
+    }
+    /**
+     * Return the module name of this component.
+     *
+     * @private
+     * @returns {string} Return the module name of this component.
+     */
+    getModuleName() {
+        return 'mention';
+    }
+};
+__decorate$7([
+    Property(null)
+], Mention.prototype, "cssClass", void 0);
+__decorate$7([
+    Property('@')
+], Mention.prototype, "mentionChar", void 0);
+__decorate$7([
+    Property(false)
+], Mention.prototype, "showMentionChar", void 0);
+__decorate$7([
+    Property(false)
+], Mention.prototype, "allowSpaces", void 0);
+__decorate$7([
+    Property(null)
+], Mention.prototype, "suffixText", void 0);
+__decorate$7([
+    Property(25)
+], Mention.prototype, "suggestionCount", void 0);
+__decorate$7([
+    Property(0)
+], Mention.prototype, "minLength", void 0);
+__decorate$7([
+    Property('None')
+], Mention.prototype, "sortOrder", void 0);
+__decorate$7([
+    Property(true)
+], Mention.prototype, "ignoreCase", void 0);
+__decorate$7([
+    Property(false)
+], Mention.prototype, "highlight", void 0);
+__decorate$7([
+    Property()
+], Mention.prototype, "locale", void 0);
+__decorate$7([
+    Property('auto')
+], Mention.prototype, "popupWidth", void 0);
+__decorate$7([
+    Property('300px')
+], Mention.prototype, "popupHeight", void 0);
+__decorate$7([
+    Property(null)
+], Mention.prototype, "displayTemplate", void 0);
+__decorate$7([
+    Property(null)
+], Mention.prototype, "itemTemplate", void 0);
+__decorate$7([
+    Property('No records found')
+], Mention.prototype, "noRecordsTemplate", void 0);
+__decorate$7([
+    Property(null)
+], Mention.prototype, "spinnerTemplate", void 0);
+__decorate$7([
+    Property()
+], Mention.prototype, "target", void 0);
+__decorate$7([
+    Property([])
+], Mention.prototype, "dataSource", void 0);
+__decorate$7([
+    Property(null)
+], Mention.prototype, "query", void 0);
+__decorate$7([
+    Property('Contains')
+], Mention.prototype, "filterType", void 0);
+__decorate$7([
+    Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)
+], Mention.prototype, "fields", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "actionBegin", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "actionComplete", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "actionFailure", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "change", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "beforeOpen", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "opened", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "closed", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "select", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "filtering", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "created", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "destroyed", void 0);
+Mention = __decorate$7([
+    NotifyPropertyChanges
+], Mention);
+
 /**
  * export all modules from current location
  */
@@ -15541,5 +17339,5 @@ const listBoxClasses = {
  * export all modules from current location
  */
 
-export { incrementalSearch, Search, escapeCharRegExp, resetIncrementalSearchValues, highlightSearch, revertHighlightSearch, FieldSettings, dropDownBaseClasses, DropDownBase, dropDownListClasses, DropDownList, Fields, TreeSettings, DropDownTree, ComboBox, AutoComplete, MultiSelect, CheckBoxSelection, createFloatLabel, updateFloatLabelState, removeFloating, setPlaceHolder, floatLabelFocus, floatLabelBlur, encodePlaceholder, SelectionSettings, ToolbarSettings, ListBox };
+export { incrementalSearch, Search, escapeCharRegExp, resetIncrementalSearchValues, highlightSearch, revertHighlightSearch, FieldSettings, dropDownBaseClasses, DropDownBase, dropDownListClasses, DropDownList, Fields, TreeSettings, DropDownTree, ComboBox, AutoComplete, MultiSelect, CheckBoxSelection, createFloatLabel, updateFloatLabelState, removeFloating, setPlaceHolder, floatLabelFocus, floatLabelBlur, encodePlaceholder, SelectionSettings, ToolbarSettings, ListBox, Mention };
 //# sourceMappingURL=ej2-dropdowns.es2015.js.map