@syncfusion/ej2-dropdowns 20.3.59 → 20.4.38

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.3.59
+*  version : 20.4.38
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@20.3.58",
+  "_id": "@syncfusion/ej2-dropdowns@18.58.2",
   "_inBundle": false,
-  "_integrity": "sha512-pwXw+I7D7g8FQSCdAPVJf3V9W+h0qIXytD3FKQHi7qQYrxdRhDIHH/CGEHQ7sxYgpNKJElYQjlpMrKoPZLIo9g==",
+  "_integrity": "sha512-vD4WNwAbimAx0XnFNgwoknAKaacI0KCvCj3iJZxia/Z5DIsH9/2PiwIfquOgHBPaq+Nu0NEa0XDk1rNyce9EZg==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -33,8 +33,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.3.58.tgz",
-  "_shasum": "a74ca36401f4774bd62c42f7c345de22e3e05e41",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-18.58.2.tgz",
+  "_shasum": "857b24b55c28406de45890a415c2b0e5c094e681",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -42,12 +42,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.3.56",
-    "@syncfusion/ej2-data": "~20.3.56",
-    "@syncfusion/ej2-inputs": "~20.3.57",
-    "@syncfusion/ej2-lists": "~20.3.56",
-    "@syncfusion/ej2-navigations": "~20.3.58",
-    "@syncfusion/ej2-popups": "~20.3.59"
+    "@syncfusion/ej2-base": "~20.4.38",
+    "@syncfusion/ej2-data": "~20.4.38",
+    "@syncfusion/ej2-inputs": "~20.4.38",
+    "@syncfusion/ej2-lists": "~20.4.38",
+    "@syncfusion/ej2-navigations": "~20.4.38",
+    "@syncfusion/ej2-popups": "~20.4.38"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -72,6 +72,6 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "20.3.59",
+  "version": "20.4.38",
   "sideEffects": false
 }

package/src/auto-complete/auto-complete-model.d.ts

@@ -14,6 +14,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
      * * groupBy - Group the list items with it's related items by mapping groupBy field
      *
      * {% codeBlock src='autocomplete/fields/index.md' %}{% endcodeBlock %}
+     *
      * > For more details about the field mapping refer to [`Data binding`](../../auto-complete/data-binding) documentation.
      *
      * @default { value: null, iconCss: null, groupBy: null}

package/src/auto-complete/auto-complete.d.ts

@@ -29,6 +29,7 @@ export declare class AutoComplete extends ComboBox {
      * * groupBy - Group the list items with it's related items by mapping groupBy field
      *
      * {% codeBlock src='autocomplete/fields/index.md' %}{% endcodeBlock %}
+     *
      * > For more details about the field mapping refer to [`Data binding`](../../auto-complete/data-binding) documentation.
      *
      * @default { value: null, iconCss: null, groupBy: null}
@@ -216,9 +217,9 @@ export declare class AutoComplete extends ComboBox {
     /**
      * To filter the data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @param {Query} query - Specify the query to filter the data.
+     * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
 
      */

package/src/auto-complete/auto-complete.js

@@ -140,9 +140,9 @@ var AutoComplete = /** @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}
 
      */
@@ -182,7 +182,9 @@ var AutoComplete = /** @class */ (function (_super) {
     AutoComplete.prototype.postBackAction = function () {
         if (this.autofill && !isNullOrUndefined(this.liCollections[0]) && this.searchList) {
             var items = [this.liCollections[0]];
-            var searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase);
+            var dataSource = this.listData;
+            var type = this.typeOfData(dataSource).typeof;
+            var searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase, dataSource, this.fields, type);
             this.searchList = false;
             if (!isNullOrUndefined(searchItem.item)) {
                 _super.prototype.setAutoFill.call(this, this.liCollections[0], true);

package/src/combo-box/combo-box.d.ts

@@ -318,7 +318,7 @@ export declare 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}
 
@@ -331,9 +331,9 @@ export declare 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}
 
      */

package/src/combo-box/combo-box.js

@@ -226,7 +226,7 @@ var ComboBox = /** @class */ (function (_super) {
     };
     ComboBox.prototype.getFocusElement = function () {
         var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();
-        var selected = this.list.querySelector('.' + dropDownListClasses.selected);
+        var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : this.list;
         var isSelected = dataItem.text === this.inputElement.value && !isNullOrUndefined(selected);
         if (isSelected) {
             return selected;
@@ -234,7 +234,9 @@ var ComboBox = /** @class */ (function (_super) {
         if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
             !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
             var inputValue = this.inputElement.value;
-            var activeItem = Search(inputValue, this.liCollections, this.filterType, true);
+            var dataSource = this.sortedData;
+            var type = this.typeOfData(dataSource).typeof;
+            var activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);
             var activeElement = activeItem.item;
             if (!isNullOrUndefined(activeElement)) {
                 var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
@@ -384,9 +386,11 @@ var ComboBox = /** @class */ (function (_super) {
         }
         else if (this.inputElement.value === '') {
             this.activeIndex = null;
-            this.list.scrollTop = 0;
-            var focusItem = this.list.querySelector('.' + dropDownListClasses.li);
-            this.setHoverList(focusItem);
+            if (!isNullOrUndefined(this.list)) {
+                this.list.scrollTop = 0;
+                var focusItem = this.list.querySelector('.' + dropDownListClasses.li);
+                this.setHoverList(focusItem);
+            }
         }
         else {
             this.activeIndex = null;
@@ -635,7 +639,7 @@ var ComboBox = /** @class */ (function (_super) {
      * Adds a new item to the combobox popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
 
@@ -646,9 +650,9 @@ var ComboBox = /** @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}
 
      */
@@ -685,7 +689,7 @@ var ComboBox = /** @class */ (function (_super) {
                 this.removeFillSelection();
             }
             var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();
-            var selected = this.list.querySelector('.' + dropDownListClasses.selected);
+            var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : null;
             if (this.inputElement && dataItem.text === this.inputElement.value && !isNullOrUndefined(selected)) {
                 if (this.isSelected) {
                     this.onChangeEvent(e);
@@ -695,10 +699,12 @@ var ComboBox = /** @class */ (function (_super) {
                 return;
             }
             if (this.getModuleName() === 'combobox' && this.inputElement.value.trim() !== '') {
-                var searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true);
+                var dataSource = this.sortedData;
+                var type = this.typeOfData(dataSource).typeof;
+                var searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true, dataSource, this.fields, type);
                 this.selectedLI = searchItem.item;
                 if (isNullOrUndefined(searchItem.index)) {
-                    searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true).index;
+                    searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true, dataSource, this.fields, type).index;
                 }
                 this.activeIndex = searchItem.index;
                 if (!isNullOrUndefined(this.selectedLI)) {

package/src/common/incremental-search.d.ts

@@ -1,6 +1,3 @@
-/**
- * IncrementalSearch module file
- */
 export declare type SearchType = 'StartsWith' | 'Equal' | 'EndsWith' | 'Contains';
 /**
  * Search and focus the list item based on key code matches with list text content
@@ -23,7 +20,9 @@ export declare function incrementalSearch(keyCode: number, items: HTMLElement[],
  * @param {boolean} ignoreCase - Specifies the case sensitive option for search operation.
  * @returns {Element | number} Returns the search matched items.
  */
-export declare function Search(inputVal: string, items: HTMLElement[], searchType: SearchType, ignoreCase?: boolean): {
+export declare function Search(inputVal: string, items: HTMLElement[], searchType: SearchType, ignoreCase?: boolean, dataSource?: string[] | number[] | boolean[] | {
+    [key: string]: Object;
+}[], fields?: any, type?: string): {
     [key: string]: Element | number;
 };
 export declare function escapeCharRegExp(value: string): string;

package/src/common/incremental-search.js

@@ -1,6 +1,3 @@
-/**
- * IncrementalSearch module file
- */
 var queryString = '';
 var prevString = '';
 var matches = [];
@@ -73,7 +70,7 @@ export function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, ele
  * @param {boolean} ignoreCase - Specifies the case sensitive option for search operation.
  * @returns {Element | number} Returns the search matched items.
  */
-export function Search(inputVal, items, searchType, ignoreCase) {
+export function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, type) {
     var listItems = items;
     ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;
     var itemData = { item: null, index: null };
@@ -81,14 +78,32 @@ export function Search(inputVal, items, searchType, ignoreCase) {
         var strLength = inputVal.length;
         var queryStr = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;
         queryStr = escapeCharRegExp(queryStr);
-        for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {
+        var _loop_1 = function (i, itemsData) {
             var item = itemsData[i];
-            var text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
+            var text = void 0;
+            var filterValue;
+            if (items && dataSource) {
+                var checkField_1 = item;
+                var fieldValue_1 = fields.text.split('.');
+                dataSource.filter(function (data) {
+                    Array.prototype.slice.call(fieldValue_1).forEach(function (value) {
+                        if (type === 'object' && checkField_1.textContent.toString().indexOf(data[value]) !== -1 && checkField_1.getAttribute('data-value') === data[fields.value] || type === 'string' && checkField_1.textContent.toString().indexOf(data) !== -1) {
+                            filterValue = type === 'object' ? data[value] : data;
+                        }
+                    });
+                });
+            }
+            text = dataSource && filterValue ? (ignoreCase ? filterValue.toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
             if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, "g").test(text))) {
                 itemData.item = item;
                 itemData.index = i;
-                return { item: item, index: i };
+                return { value: { item: item, index: i } };
             }
+        };
+        for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {
+            var state_1 = _loop_1(i, itemsData);
+            if (typeof state_1 === "object")
+                return state_1.value;
         }
         return itemData;
     }

package/src/drop-down-base/drop-down-base-model.d.ts

@@ -74,16 +74,6 @@ export interface DropDownBaseModel extends ComponentModel{
      */
     fields?: FieldSettingsModel;
 
-    /**
-     * Enable or disable persisting component's state between page reloads.
-     * If enabled, following list of states will be persisted.
-     * 1. value
-     *
-     * @default false
-
-     */
-    enablePersistence?: boolean;
-
     /**
      * Accepts the template design and assigns it to each list item present in the popup.
      * We have built-in `template engine`
@@ -135,14 +125,6 @@ export interface DropDownBaseModel extends ComponentModel{
      */
     sortOrder?: SortOrder;
 
-    /**
-     * Specifies a value that indicates whether the component is enabled or not.
-     *
-     * @default true
-
-     */
-    enabled?: boolean;
-
     /**
      * Accepts the list items either through local or remote service and binds it to the component.
      * It can be an array of JSON Objects or an instance of

package/src/drop-down-base/drop-down-base.d.ts

@@ -239,15 +239,6 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
 
      */
     fields: FieldSettingsModel;
-    /**
-     * Enable or disable persisting component's state between page reloads.
-     * If enabled, following list of states will be persisted.
-     * 1. value
-     *
-     * @default false
-
-     */
-    enablePersistence: boolean;
     /**
      * Accepts the template design and assigns it to each list item present in the popup.
      * We have built-in `template engine`
@@ -294,13 +285,6 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
 
      */
     sortOrder: SortOrder;
-    /**
-     * Specifies a value that indicates whether the component is enabled or not.
-     *
-     * @default true
-
-     */
-    enabled: boolean;
     /**
      * Accepts the list items either through local or remote service and binds it to the component.
      * It can be an array of JSON Objects or an instance of
@@ -467,12 +451,6 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @returns {string} Returns the persisted data of the component.
      */
     protected getPersistData(): string;
-    /**
-     * Sets the enabled state to DropDownBase.
-     *
-     * @returns {void}
-     */
-    protected setEnabled(): void;
     /**
      * Sets the enabled state to DropDownBase.
      *
@@ -637,7 +615,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * 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}
 

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

@@ -273,7 +273,9 @@ var DropDownBase = /** @class */ (function (_super) {
                 liElem.setAttribute('role', 'option');
             }
             else {
-                ele.innerHTML = content;
+                if (!isNullOrUndefined(ele)) {
+                    ele.innerHTML = content;
+                }
             }
         }
     };
@@ -304,14 +306,16 @@ var DropDownBase = /** @class */ (function (_super) {
      * @returns {void}
      */
     DropDownBase.prototype.setEnableRtl = function () {
-        if (this.list) {
-            this.enableRtlElements.push(this.list);
-        }
-        if (this.enableRtl) {
-            addClass(this.enableRtlElements, dropDownBaseClasses.rtl);
-        }
-        else {
-            removeClass(this.enableRtlElements, dropDownBaseClasses.rtl);
+        if (!isNullOrUndefined(this.enableRtlElements)) {
+            if (this.list) {
+                this.enableRtlElements.push(this.list);
+            }
+            if (this.enableRtl) {
+                addClass(this.enableRtlElements, dropDownBaseClasses.rtl);
+            }
+            else {
+                removeClass(this.enableRtlElements, dropDownBaseClasses.rtl);
+            }
         }
     };
     /**
@@ -349,14 +353,6 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.getPersistData = function () {
         return this.addOnPersist([]);
     };
-    /**
-     * Sets the enabled state to DropDownBase.
-     *
-     * @returns {void}
-     */
-    DropDownBase.prototype.setEnabled = function () {
-        this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');
-    };
     /**
      * Sets the enabled state to DropDownBase.
      *
@@ -578,7 +574,9 @@ var DropDownBase = /** @class */ (function (_super) {
         this.liCollections = [];
         this.trigger('actionFailure', e);
         this.l10nUpdate(true);
-        addClass([this.list], dropDownBaseClasses.noData);
+        if (!isNullOrUndefined(this.list)) {
+            addClass([this.list], dropDownBaseClasses.noData);
+        }
     };
     /* eslint-disable @typescript-eslint/no-unused-vars */
     DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {
@@ -708,10 +706,12 @@ var DropDownBase = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.list) && !this.list.classList.contains(dropDownBaseClasses.noData)) {
             if (isNullOrUndefined(this.fixedHeaderElement)) {
                 this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });
-                if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {
+                if (!isNullOrUndefined(this.list) && !this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {
                     this.fixedHeaderElement.style.display = 'none';
                 }
-                prepend([this.fixedHeaderElement], this.list);
+                if (!isNullOrUndefined(this.fixedHeaderElement) && !isNullOrUndefined(this.list)) {
+                    prepend([this.fixedHeaderElement], this.list);
+                }
                 this.setFixedHeader();
             }
             if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {
@@ -802,7 +802,9 @@ var DropDownBase = /** @class */ (function (_super) {
         return item;
     };
     DropDownBase.prototype.setFixedHeader = function () {
-        this.list.parentElement.style.display = 'block';
+        if (!isNullOrUndefined(this.list)) {
+            this.list.parentElement.style.display = 'block';
+        }
         var borderWidth = 0;
         if (this.list && this.list.parentElement) {
             borderWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-width'), 10);
@@ -817,8 +819,10 @@ var DropDownBase = /** @class */ (function (_super) {
                 borderWidth = (borderTopWidth + borderBottomWidth + borderLeftWidth + borderRightWidth);
             }
         }
-        var liWidth = this.getValidLi().offsetWidth - borderWidth;
-        this.fixedHeaderElement.style.width = liWidth.toString() + 'px';
+        if (!isNullOrUndefined(this.liCollections)) {
+            var liWidth = this.getValidLi().offsetWidth - borderWidth;
+            this.fixedHeaderElement.style.width = liWidth.toString() + 'px';
+        }
         setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });
         var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group + ':not(.e-hide-listitem)');
         this.fixedHeaderElement.innerHTML = firstLi.innerHTML;
@@ -962,9 +966,6 @@ var DropDownBase = /** @class */ (function (_super) {
                 case 'enableRtl':
                     this.setEnableRtl();
                     break;
-                case 'enabled':
-                    this.setEnabled();
-                    break;
                 case 'groupTemplate':
                     this.renderGroupTemplate(this.list);
                     if (this.ulElement && this.fixedHeaderElement) {
@@ -1013,7 +1014,6 @@ var DropDownBase = /** @class */ (function (_super) {
             wrapperElement.appendChild(this.list);
         }
         this.setEnableRtl();
-        this.setEnabled();
         if (!isEmptyData) {
             this.initialize(e);
         }
@@ -1041,7 +1041,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * Adds a new item to the popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
 
@@ -1105,11 +1105,17 @@ var DropDownBase = /** @class */ (function (_super) {
             this.trigger('beforeItemRender', { element: li, item: item });
         }
         if (itemsCount === 0 && isNullOrUndefined(this.list.querySelector('ul'))) {
-            this.list.innerHTML = '';
-            this.list.classList.remove(dropDownBaseClasses.noData);
-            this.list.appendChild(this.ulElement);
+            if (!isNullOrUndefined(this.list)) {
+                this.list.innerHTML = '';
+                this.list.classList.remove(dropDownBaseClasses.noData);
+                if (!isNullOrUndefined(this.ulElement)) {
+                    this.list.appendChild(this.ulElement);
+                }
+            }
             this.liCollections = liCollections;
-            append(liCollections, this.ulElement);
+            if (!isNullOrUndefined(liCollections) && !isNullOrUndefined(this.ulElement)) {
+                append(liCollections, this.ulElement);
+            }
             this.updateAddItemList(this.list, itemsCount);
         }
         else {
@@ -1230,14 +1236,16 @@ var DropDownBase = /** @class */ (function (_super) {
             }
             detach(this.list);
         }
+        this.liCollections = null;
+        this.ulElement = null;
+        this.list = null;
+        this.enableRtlElements = null;
+        this.rippleFun = null;
         _super.prototype.destroy.call(this);
     };
     __decorate([
         Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)
     ], DropDownBase.prototype, "fields", void 0);
-    __decorate([
-        Property(false)
-    ], DropDownBase.prototype, "enablePersistence", void 0);
     __decorate([
         Property(null)
     ], DropDownBase.prototype, "itemTemplate", void 0);
@@ -1253,9 +1261,6 @@ var DropDownBase = /** @class */ (function (_super) {
     __decorate([
         Property('None')
     ], DropDownBase.prototype, "sortOrder", void 0);
-    __decorate([
-        Property(true)
-    ], DropDownBase.prototype, "enabled", void 0);
     __decorate([
         Property([])
     ], DropDownBase.prototype, "dataSource", void 0);

package/src/drop-down-list/drop-down-list-model.d.ts

@@ -23,6 +23,24 @@ export interface DropDownListModel extends DropDownBaseModel{
      */
     width?: string | number;
 
+    /**
+     * Specifies a value that indicates whether the component is enabled or not.
+     *
+     * @default true
+
+     */
+    enabled?: boolean;
+
+    /**
+       * Enable or disable persisting component's state between page reloads.
+       * If enabled, following list of states will be persisted.
+       * 1. value
+       *
+       * @default false
+
+       */
+    enablePersistence?: boolean;
+
     /**
      * Specifies the height of the popup list.
      * > For more details about the popup configuration refer to

package/src/drop-down-list/drop-down-list.d.ts

@@ -119,6 +119,22 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * @aspType string
      */
     width: string | number;
+    /**
+     * Specifies a value that indicates whether the component is enabled or not.
+     *
+     * @default true
+
+     */
+    enabled: boolean;
+    /**
+     * Enable or disable persisting component's state between page reloads.
+     * If enabled, following list of states will be persisted.
+     * 1. value
+     *
+     * @default false
+
+     */
+    enablePersistence: boolean;
     /**
      * Specifies the height of the popup list.
      * > For more details about the popup configuration refer to
@@ -453,9 +469,9 @@ export declare class DropDownList extends DropDownBase implements IInput {
     /**
      * 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}
 
      */
@@ -511,6 +527,12 @@ export declare class DropDownList extends DropDownBase implements IInput {
     render(): void;
     private setFooterTemplate;
     private setHeaderTemplate;
+    /**
+     * Sets the enabled state to DropDownBase.
+     *
+     * @returns {void}
+     */
+    protected setEnabled(): void;
     protected setOldText(text: string): void;
     protected setOldValue(value: string | number | boolean): void;
     protected refreshPopup(): void;