@syncfusion/ej2-dropdowns 20.2.39 → 20.2.43-3197

package/src/drop-down-list/drop-down-list.js

@@ -150,8 +150,8 @@ var DropDownList = /** @class */ (function (_super) {
             this.popupObj.setProperties({ 'zIndex': this.zIndex });
         }
     };
-    DropDownList.prototype.renderList = function (isEmptyData) {
-        _super.prototype.render.call(this, isEmptyData);
+    DropDownList.prototype.renderList = function (e, isEmptyData) {
+        _super.prototype.render.call(this, e, isEmptyData);
         this.unWireListEvents();
         this.wireListEvents();
     };
@@ -183,6 +183,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
     };
     DropDownList.prototype.clearAll = function (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)))) {
@@ -208,14 +209,18 @@ var DropDownList = /** @class */ (function (_super) {
             }
             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;
@@ -238,42 +243,42 @@ var DropDownList = /** @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var htmlAttr = _a[_i];
                 if (htmlAttr === 'class') {
-                    var updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\s+/g, ' ')).trim();
+                    var updatedClassValue = (this.htmlAttributes["" + htmlAttr].replace(/\s+/g, ' ')).trim();
                     if (updatedClassValue !== '') {
                         addClass([this.inputWrapper.container], updatedClassValue.split(' '));
                     }
                 }
-                else if (htmlAttr === 'disabled' && this.htmlAttributes[htmlAttr] === 'disabled') {
+                else if (htmlAttr === 'disabled' && this.htmlAttributes["" + htmlAttr] === 'disabled') {
                     this.enabled = false;
                     this.setEnable();
                 }
-                else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes[htmlAttr])) {
+                else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes["" + htmlAttr])) {
                     this.readonly = true;
                     this.dataBind();
                 }
                 else if (htmlAttr === 'style') {
-                    this.inputWrapper.container.setAttribute('style', this.htmlAttributes[htmlAttr]);
+                    this.inputWrapper.container.setAttribute('style', this.htmlAttributes["" + htmlAttr]);
                 }
                 else {
-                    var defaultAttr = ['title', 'id', 'placeholder', 'aria-placeholder',
-                        'role', 'autocorrect', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
+                    var defaultAttr = ['title', 'id', 'placeholder',
+                        'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
                     var 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]);
                     }
                 }
             }
@@ -285,11 +290,8 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.getAriaAttributes = function () {
         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
         };
@@ -332,7 +334,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
     };
     DropDownList.prototype.targetElement = function () {
-        return this.inputWrapper.container;
+        return !isNullOrUndefined(this.inputWrapper) ? this.inputWrapper.container : null;
     };
     DropDownList.prototype.getNgDirective = function () {
         return 'EJS-DROPDOWNLIST';
@@ -491,7 +493,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
     };
     DropDownList.prototype.unBindCommonEvent = function () {
-        if (this.targetElement()) {
+        if (!isNullOrUndefined(this.inputWrapper) && this.targetElement()) {
             EventHandler.remove(this.targetElement(), 'blur', this.onBlurHandler);
         }
         var formElement = this.inputElement && closest(this.inputElement, 'form');
@@ -521,9 +523,11 @@ var DropDownList = /** @class */ (function (_super) {
      * @returns {void}
      */
     DropDownList.prototype.wireListEvents = function () {
-        EventHandler.add(this.list, 'click', this.onMouseClick, this);
-        EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
-        EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
+        if (!isNullOrUndefined(this.list)) {
+            EventHandler.add(this.list, 'click', this.onMouseClick, this);
+            EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
+            EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
+        }
     };
     DropDownList.prototype.onSearch = function (e) {
         if (e.charCode !== 32 && e.charCode !== 13) {
@@ -636,7 +640,7 @@ var DropDownList = /** @class */ (function (_super) {
             var 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) {
@@ -675,7 +679,7 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                     break;
                 case 'open':
-                    this.showPopup();
+                    this.showPopup(e);
                     break;
                 case 'hide':
                     this.preventAltUp = this.isPopupOpen;
@@ -801,9 +805,11 @@ var DropDownList = /** @class */ (function (_super) {
         this.setSelection(previousItem, event);
     };
     DropDownList.prototype.unWireEvent = function () {
-        EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);
-        EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);
-        EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);
+        if (!isNullOrUndefined(this.inputWrapper)) {
+            EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);
+            EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);
+            EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);
+        }
         this.unBindCommonEvent();
     };
     /**
@@ -812,9 +818,11 @@ var DropDownList = /** @class */ (function (_super) {
      * @returns {void}
      */
     DropDownList.prototype.unWireListEvents = function () {
-        EventHandler.remove(this.list, 'click', this.onMouseClick);
-        EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
-        EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
+        if (this.list) {
+            EventHandler.remove(this.list, 'click', this.onMouseClick);
+            EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
+            EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
+        }
     };
     DropDownList.prototype.checkSelector = function (id) {
         return '[id="' + id.replace(/(:|\.|\[|\]|,|=|@|\\|\/|#)/g, '\\$1') + '"]';
@@ -822,7 +830,7 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.onDocumentClick = function (e) {
         var target = e.target;
         if (!(!isNullOrUndefined(this.popupObj) && closest(target, this.checkSelector(this.popupObj.element.id))) &&
-            !this.inputWrapper.container.contains(e.target)) {
+            !isNullOrUndefined(this.inputWrapper) && !this.inputWrapper.container.contains(e.target)) {
             if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {
                 this.isDocumentClick = true;
                 var isActive = this.isRequested;
@@ -867,7 +875,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         if (!this.readonly) {
             if (this.isPopupOpen) {
-                this.hidePopup();
+                this.hidePopup(e);
                 if (this.isFilterLayout()) {
                     this.focusDropDown(e);
                 }
@@ -877,7 +885,7 @@ var DropDownList = /** @class */ (function (_super) {
                 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
             var proxy_1 = this;
@@ -941,6 +949,9 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.selectEventCallback = function (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;
         var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
@@ -1011,10 +1022,6 @@ var DropDownList = /** @class */ (function (_super) {
         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;
@@ -1024,9 +1031,17 @@ var DropDownList = /** @class */ (function (_super) {
             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 });
         }
     };
     DropDownList.prototype.dropdownCompiler = function (dropdownTemplate) {
@@ -1191,9 +1206,11 @@ var DropDownList = /** @class */ (function (_super) {
                 selectedElement.setAttribute('value', this.value.toString());
             }
             else {
-                this.hiddenElement.innerHTML = '<option selected>' + this.text + '</option>';
-                var selectedElement = this.hiddenElement.querySelector('option');
-                selectedElement.setAttribute('value', this.value.toString());
+                if (!isNullOrUndefined(this.hiddenElement)) {
+                    this.hiddenElement.innerHTML = '<option selected>' + this.text + '</option>';
+                    var selectedElement = this.hiddenElement.querySelector('option');
+                    selectedElement.setAttribute('value', this.value.toString());
+                }
             }
         }
         else {
@@ -1220,6 +1237,9 @@ var DropDownList = /** @class */ (function (_super) {
                         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
@@ -1342,11 +1362,11 @@ var DropDownList = /** @class */ (function (_super) {
     /**
      * To filter the data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @param {Query} query - Specify the query to filter the data.
+     * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
-
+     * @deprecated
      */
     DropDownList.prototype.filter = function (dataSource, query, fields) {
         this.isCustomFilter = true;
@@ -1410,11 +1430,8 @@ var DropDownList = /** @class */ (function (_super) {
             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'
             });
@@ -1500,7 +1517,8 @@ var DropDownList = /** @class */ (function (_super) {
                 this.initRemoteRender = false;
                 if (this.value && this.dataSource instanceof DataManager) {
                     var checkField_1 = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
-                    var checkVal = list.some(function (x) { return x[checkField_1] === _this.value; });
+                    var fieldValue_1 = this.fields.value.split('.');
+                    var checkVal = list.some(function (x) { return isNullOrUndefined(x[checkField_1]) && fieldValue_1.length > 1 ? _this.checkFieldValue(x, fieldValue_1) === _this.value : x[checkField_1] === _this.value; });
                     if (!checkVal) {
                         this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', this.value)))
                             .then(function (e) {
@@ -1522,6 +1540,9 @@ var DropDownList = /** @class */ (function (_super) {
                 }
                 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)
@@ -1543,10 +1564,17 @@ var DropDownList = /** @class */ (function (_super) {
                 }
             }
             if (this.beforePopupOpen) {
-                this.renderPopup();
+                this.renderPopup(e);
             }
         }
     };
+    DropDownList.prototype.checkFieldValue = function (list, fieldValue) {
+        var checkField = list;
+        fieldValue.forEach(function (value) {
+            checkField = checkField[value];
+        });
+        return checkField;
+    };
     DropDownList.prototype.updateActionCompleteDataValues = function (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) {
@@ -1615,7 +1643,7 @@ var DropDownList = /** @class */ (function (_super) {
             removeClass(highlightedItem, dropDownListClasses.focus);
         }
     };
-    DropDownList.prototype.renderPopup = function () {
+    DropDownList.prototype.renderPopup = function (e) {
         var _this = this;
         if (this.popupObj && document.body.contains(this.popupObj.element)) {
             this.refreshPopup();
@@ -1672,9 +1700,11 @@ var DropDownList = /** @class */ (function (_super) {
                     (_this.isDropDownClick && _this.getModuleName() === 'combobox')))) {
                     offsetValue = _this.getOffsetValue(popupEle);
                     var firstItem = _this.isEmptyList() ? _this.list : _this.liCollections[0];
-                    left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -
-                        parseInt(getComputedStyle(_this.inputElement).paddingLeft, 10) +
-                        parseInt(getComputedStyle(_this.inputElement.parentElement).borderLeftWidth, 10));
+                    if (!isNullOrUndefined(_this.inputElement)) {
+                        left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -
+                            parseInt(getComputedStyle(_this.inputElement).paddingLeft, 10) +
+                            parseInt(getComputedStyle(_this.inputElement.parentElement).borderLeftWidth, 10));
+                    }
                 }
                 _this.getFocusElement();
                 _this.createPopup(popupEle, offsetValue, left);
@@ -1705,25 +1735,28 @@ var DropDownList = /** @class */ (function (_super) {
                     var element = scrollParentElements_1[_i];
                     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');
                 var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;
                 addClass([inputParent], [dropDownListClasses.inputFocus]);
                 var animModel = { name: 'FadeIn', duration: 100 };
                 _this.beforePopupOpen = true;
                 var popupInstance = _this.popupObj;
-                var eventArgs = { popup: popupInstance, cancel: false, animation: animModel };
+                var eventArgs = { popup: popupInstance, event: e, cancel: false, animation: animModel };
                 _this.trigger('open', eventArgs, function (eventArgs) {
                     if (!eventArgs.cancel) {
-                        addClass([_this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
+                        if (!isNullOrUndefined(_this.inputWrapper)) {
+                            addClass([_this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
+                        }
                         _this.renderReactTemplates();
-                        _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.element : null);
+                        if (!isNullOrUndefined(_this.popupObj)) {
+                            _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.element : null);
+                        }
                     }
                     else {
                         _this.beforePopupOpen = false;
@@ -1781,6 +1814,12 @@ var DropDownList = /** @class */ (function (_super) {
                 var actionList = _this.actionCompleteData && _this.actionCompleteData.ulElement &&
                     _this.actionCompleteData.ulElement.querySelector('li');
                 var 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') {
@@ -1936,9 +1975,6 @@ var DropDownList = /** @class */ (function (_super) {
         this.filterInput.value = this.typedString = '';
         this.searchLists(null);
     };
-    DropDownList.prototype.listScroll = function () {
-        this.filterInput.blur();
-    };
     DropDownList.prototype.setEleWidth = function (width) {
         if (!isNullOrUndefined(width)) {
             if (typeof width === 'number') {
@@ -1967,7 +2003,6 @@ var DropDownList = /** @class */ (function (_super) {
         }
         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) {
@@ -1980,14 +2015,19 @@ var DropDownList = /** @class */ (function (_super) {
                 EventHandler.remove(this.backIconElement, 'click', this.clickOnBackIcon);
                 EventHandler.remove(this.clearIconElement, 'click', this.clearText);
             }
-            EventHandler.remove(this.filterInput, 'input', this.onInput);
-            EventHandler.remove(this.filterInput, 'keyup', this.onFilterUp);
-            EventHandler.remove(this.filterInput, 'keydown', this.onFilterDown);
-            EventHandler.remove(this.filterInput, 'blur', this.onBlurHandler);
-            EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);
+            if (!isNullOrUndefined(this.filterInput)) {
+                EventHandler.remove(this.filterInput, 'input', this.onInput);
+                EventHandler.remove(this.filterInput, 'keyup', this.onFilterUp);
+                EventHandler.remove(this.filterInput, 'keydown', this.onFilterDown);
+                EventHandler.remove(this.filterInput, 'blur', this.onBlurHandler);
+                EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);
+            }
             this.filterInput = null;
         }
         attributes(this.targetElement(), { 'aria-expanded': 'false' });
+        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;
@@ -2040,14 +2080,15 @@ var DropDownList = /** @class */ (function (_super) {
         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';
             }
@@ -2058,6 +2099,9 @@ var DropDownList = /** @class */ (function (_super) {
         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,
@@ -2086,6 +2130,10 @@ var DropDownList = /** @class */ (function (_super) {
         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');
@@ -2096,6 +2144,9 @@ var DropDownList = /** @class */ (function (_super) {
         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();
         }
@@ -2105,6 +2156,7 @@ var DropDownList = /** @class */ (function (_super) {
             this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectElement.selectedIndex].textContent;
             this.initValue();
         }
+        this.setEnabled();
         this.preventTabIndex(this.element);
         if (!this.enabled) {
             this.targetElement().tabIndex = -1;
@@ -2126,12 +2178,22 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
         }
+        var 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();
     };
     DropDownList.prototype.setFooterTemplate = function (popupEle) {
         var compiledString;
         if (this.footer) {
-            this.footer.innerHTML = '';
+            if (this.isReact) {
+                this.clearTemplate(['footerTemplate']);
+            }
+            else {
+                this.footer.innerHTML = '';
+            }
         }
         else {
             this.footer = this.createElement('div');
@@ -2179,6 +2241,14 @@ var DropDownList = /** @class */ (function (_super) {
         var contentEle = popupEle.querySelector('div.e-content');
         popupEle.insertBefore(this.header, contentEle);
     };
+    /**
+     * Sets the enabled state to DropDownBase.
+     *
+     * @returns {void}
+     */
+    DropDownList.prototype.setEnabled = function () {
+        this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');
+    };
     DropDownList.prototype.setOldText = function (text) {
         this.text = text;
     };
@@ -2266,6 +2336,7 @@ var DropDownList = /** @class */ (function (_super) {
                     break;
                 case 'width':
                     this_1.setEleWidth(newProp.width);
+                    Input.calculateWidth(this_1.inputElement, this_1.inputWrapper.container);
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(newProp.placeholder, this_1.inputElement);
@@ -2283,6 +2354,7 @@ var DropDownList = /** @class */ (function (_super) {
                     break;
                 case 'cssClass':
                     this_1.setCssClass(newProp.cssClass, oldProp.cssClass);
+                    Input.calculateWidth(this_1.inputElement, this_1.inputWrapper.container);
                     break;
                 case 'enableRtl':
                     this_1.setEnableRtl();
@@ -2323,6 +2395,9 @@ var DropDownList = /** @class */ (function (_super) {
                                     }
                                 });
                             }
+                            else if (this_1.getModuleName() === 'autocomplete') {
+                                this_1.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this_1.setOldText(oldProp.text);
                             }
@@ -2364,6 +2439,9 @@ var DropDownList = /** @class */ (function (_super) {
                                     }
                                 });
                             }
+                            else if (this_1.getModuleName() === 'autocomplete') {
+                                this_1.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this_1.setOldValue(oldProp.value);
                             }
@@ -2423,6 +2501,9 @@ var DropDownList = /** @class */ (function (_super) {
                 case 'floatLabelType':
                     Input.removeFloating(this_1.inputWrapper);
                     Input.addFloating(this_1.inputElement, newProp.floatLabelType, this_1.placeholder, this_1.createElement);
+                    if (!isNullOrUndefined(this_1.inputWrapper.buttons[0]) && this_1.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0] && this_1.floatLabelType !== 'Never') {
+                        this_1.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
+                    }
                     break;
                 case 'showClearButton':
                     Input.setClearButton(newProp.showClearButton, this_1.inputElement, this_1.inputWrapper, null, this_1.createElement);
@@ -2482,6 +2563,8 @@ var DropDownList = /** @class */ (function (_super) {
             removeClass([this.inputWrapper.container], ['e-readonly']);
         }
     };
+    DropDownList.prototype.setInputValue = function (newProp, oldProp) {
+    };
     DropDownList.prototype.setCssClass = function (newClass, oldClass) {
         if (!isNullOrUndefined(oldClass)) {
             oldClass = (oldClass.replace(/\s+/g, ' ')).trim();
@@ -2508,7 +2591,7 @@ var DropDownList = /** @class */ (function (_super) {
      *
      * @returns {void}
      */
-    DropDownList.prototype.showPopup = function () {
+    DropDownList.prototype.showPopup = function (e) {
         if (!this.enabled) {
             return;
         }
@@ -2528,11 +2611,11 @@ var DropDownList = /** @class */ (function (_super) {
         }
         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);
     };
-    DropDownList.prototype.invokeRenderPopup = function () {
+    DropDownList.prototype.invokeRenderPopup = function (e) {
         if (Browser.isDevice && this.isFilterLayout()) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             var proxy_2 = this;
@@ -2541,10 +2624,9 @@ var DropDownList = /** @class */ (function (_super) {
             };
             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 });
     };
     DropDownList.prototype.renderHightSearch = function () {
         // update high light search
@@ -2558,7 +2640,9 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.hidePopup = function (e) {
         /* eslint-enable valid-jsdoc, jsdoc/require-param */
         if (this.isEscapeKey && this.getModuleName() === 'dropdownlist') {
-            Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+            if (!isNullOrUndefined(this.inputElement)) {
+                Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+            }
             this.isEscapeKey = false;
             if (!isNullOrUndefined(this.index)) {
                 var element = this.findListElement(this.ulElement, 'li', 'data-value', this.value);
@@ -2608,6 +2692,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         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.
@@ -2625,6 +2710,7 @@ var DropDownList = /** @class */ (function (_super) {
             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.
@@ -2648,10 +2734,9 @@ var DropDownList = /** @class */ (function (_super) {
             return;
         }
         if (this.inputElement) {
-            var 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'];
+            var attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',
+                'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',
+                'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label'];
             for (var i = 0; i < attrArray.length; i++) {
                 this.inputElement.removeAttribute(attrArray[i]);
             }
@@ -2667,6 +2752,21 @@ var DropDownList = /** @class */ (function (_super) {
             this.inputWrapper.container.parentElement.insertBefore(this.element, this.inputWrapper.container);
             detach(this.inputWrapper.container);
         }
+        this.hiddenElement = null;
+        this.inputWrapper = null;
+        this.keyboardModule = null;
+        this.ulElement = null;
+        this.list = null;
+        this.popupObj = null;
+        this.rippleFun = null;
+        this.selectedLI = null;
+        this.liCollections = null;
+        this.item = null;
+        this.inputWrapper = null;
+        this.footer = null;
+        this.header = null;
+        this.previousSelectedLI = null;
+        this.valueTempElement = null;
         _super.prototype.destroy.call(this);
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
@@ -2708,6 +2808,12 @@ var DropDownList = /** @class */ (function (_super) {
     __decorate([
         Property('100%')
     ], DropDownList.prototype, "width", void 0);
+    __decorate([
+        Property(true)
+    ], DropDownList.prototype, "enabled", void 0);
+    __decorate([
+        Property(false)
+    ], DropDownList.prototype, "enablePersistence", void 0);
     __decorate([
         Property('300px')
     ], DropDownList.prototype, "popupHeight", void 0);