@syncfusion/ej2-dropdowns 20.2.40 → 20.2.43-3197

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

@@ -70,20 +70,10 @@ export interface DropDownBaseModel extends ComponentModel{
      * ```
      *
      * @default {text: null, value: null, iconCss: null, groupBy: null}
-
+     * @deprecated
      */
     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`
@@ -92,7 +82,7 @@ export interface DropDownBaseModel extends ComponentModel{
      * For EX: We have expression evolution as like ES6 expression string literals.
      *
      * @default null
-
+     * @deprecated
      */
     itemTemplate?: string;
 
@@ -100,7 +90,7 @@ export interface DropDownBaseModel extends ComponentModel{
      * Accepts the template design and assigns it to the group headers present in the popup list.
      *
      * @default null
-
+     * @deprecated
      */
     groupTemplate?: string;
 
@@ -109,7 +99,7 @@ export interface DropDownBaseModel extends ComponentModel{
      * when no data is available on the component.
      *
      * @default 'No records found'
-
+     * @deprecated
      */
     noRecordsTemplate?: string;
 
@@ -118,7 +108,7 @@ export interface DropDownBaseModel extends ComponentModel{
      * when the data fetch request from the remote server fails.
      *
      * @default 'Request failed'
-
+     * @deprecated
      */
     actionFailureTemplate?: string;
 
@@ -131,25 +121,17 @@ export interface DropDownBaseModel extends ComponentModel{
      * @default null
      * @asptype object
      * @aspjsonconverterignore
-
+     * @deprecated
      */
     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
      * `DataManager`.
      *
      * @default []
-
+     * @deprecated
      */
     dataSource?: { [key: string]: Object }[] | DataManager | string[] | number[] | boolean[];
 
@@ -158,7 +140,7 @@ export interface DropDownBaseModel extends ComponentModel{
      * which will execute along with the data processing.
      *
      * @default null
-
+     * @deprecated
      */
     query?: Query;
 
@@ -192,7 +174,7 @@ export interface DropDownBaseModel extends ComponentModel{
      * The default value set to `StartsWith`, all the suggestion items which contain typed characters to listed in the suggestion popup.
      *
      * @default 'StartsWith'
-
+     * @deprecated
      */
     filterType?: FilterType;
 
@@ -201,7 +183,7 @@ export interface DropDownBaseModel extends ComponentModel{
      * By default consider the casing.
      *
      * @default true
-
+     * @deprecated
      */
     ignoreCase?: boolean;
 
@@ -209,14 +191,14 @@ export interface DropDownBaseModel extends ComponentModel{
      * specifies the z-index value of the component popup element.
      *
      * @default 1000
-
+     * @deprecated
      */
     zIndex?: number;
 
     /**
      * ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
      *
-
+     * @deprecated
      */
     ignoreAccent?: boolean;
 
@@ -224,7 +206,7 @@ export interface DropDownBaseModel extends ComponentModel{
      * Overrides the global culture and localization value for this component. Default global culture is 'en-US'.
      *
      * @default 'en-US'
-
+     * @deprecated
      */
     locale?: string;
 

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

@@ -203,6 +203,8 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     }[] | string[] | boolean[] | number[];
     protected isGroupChecking: boolean;
     protected itemTemplateId: string;
+    protected displayTemplateId: string;
+    protected spinnerTemplateId: string;
     protected valueTemplateId: string;
     protected groupTemplateId: string;
     protected headerTemplateId: string;
@@ -213,6 +215,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected isAngular: boolean;
     protected isPreventChange: boolean;
     protected isDynamicDataChange: boolean;
+    protected addedNewItem: boolean;
     /**
      * The `fields` property maps the columns of the data table and binds the data to the component.
      * * text - Maps the text column from data table for each list item.
@@ -233,18 +236,9 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * ```
      *
      * @default {text: null, value: null, iconCss: null, groupBy: null}
-
+     * @deprecated
      */
     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`
@@ -253,14 +247,14 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * For EX: We have expression evolution as like ES6 expression string literals.
      *
      * @default null
-
+     * @deprecated
      */
     itemTemplate: string;
     /**
      * Accepts the template design and assigns it to the group headers present in the popup list.
      *
      * @default null
-
+     * @deprecated
      */
     groupTemplate: string;
     /**
@@ -268,7 +262,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * when no data is available on the component.
      *
      * @default 'No records found'
-
+     * @deprecated
      */
     noRecordsTemplate: string;
     /**
@@ -276,7 +270,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * when the data fetch request from the remote server fails.
      *
      * @default 'Request failed'
-
+     * @deprecated
      */
     actionFailureTemplate: string;
     /**
@@ -288,23 +282,16 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @default null
      * @asptype object
      * @aspjsonconverterignore
-
+     * @deprecated
      */
     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
      * `DataManager`.
      *
      * @default []
-
+     * @deprecated
      */
     dataSource: {
         [key: string]: Object;
@@ -314,7 +301,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * which will execute along with the data processing.
      *
      * @default null
-
+     * @deprecated
      */
     query: Query;
     /**
@@ -347,7 +334,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * The default value set to `StartsWith`, all the suggestion items which contain typed characters to listed in the suggestion popup.
      *
      * @default 'StartsWith'
-
+     * @deprecated
      */
     filterType: FilterType;
     /**
@@ -355,27 +342,27 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * By default consider the casing.
      *
      * @default true
-
+     * @deprecated
      */
     ignoreCase: boolean;
     /**
      * specifies the z-index value of the component popup element.
      *
      * @default 1000
-
+     * @deprecated
      */
     zIndex: number;
     /**
      * ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
      *
-
+     * @deprecated
      */
     ignoreAccent: boolean;
     /**
      * Overrides the global culture and localization value for this component. Default global culture is 'en-US'.
      *
      * @default 'en-US'
-
+     * @deprecated
      */
     locale: string;
     /**
@@ -464,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.
      *
@@ -592,7 +573,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      */
     protected resetList(dataSource?: {
         [key: string]: Object;
-    }[] | DataManager | string[] | number[] | boolean[], fields?: FieldSettingsModel, query?: Query): void;
+    }[] | DataManager | string[] | number[] | boolean[], fields?: FieldSettingsModel, query?: Query, e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     protected updateSelectElementData(isFiltering: boolean): void;
     protected updateSelection(): void;
     protected renderList(): void;
@@ -616,7 +597,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @private
      * @returns {void}
      */
-    render(isEmptyData?: boolean): void;
+    render(e?: MouseEvent | KeyboardEventArgs | TouchEvent, isEmptyData?: boolean): void;
     /**
      * Return the module name of this component.
      *
@@ -634,10 +615,10 @@ 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}
-
+     * @deprecated
      */
     addItem(items: {
         [key: string]: Object;
@@ -709,7 +690,7 @@ export interface PopupEventArgs {
     /**
      * Specifies the popup Object.
      *
-
+     * @deprecated
      */
     popup: Popup;
     /**
@@ -723,7 +704,7 @@ export interface PopupEventArgs {
     /**
      * Specifies the event.
      */
-    event?: MouseEvent | KeyboardEventArgs;
+    event?: MouseEvent | KeyboardEventArgs | TouchEvent | Object;
 }
 export interface FocusEventArgs {
     /**

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

@@ -61,6 +61,8 @@ export var dropDownBaseClasses = {
     grouping: 'e-dd-group'
 };
 var ITEMTEMPLATE_PROPERTY = 'ItemTemplate';
+var DISPLAYTEMPLATE_PROPERTY = 'DisplayTemplate';
+var SPINNERTEMPLATE_PROPERTY = 'SpinnerTemplate';
 var VALUETEMPLATE_PROPERTY = 'ValueTemplate';
 var GROUPTEMPLATE_PROPERTY = 'GroupTemplate';
 var HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';
@@ -86,6 +88,7 @@ var DropDownBase = /** @class */ (function (_super) {
         _this.isAngular = false;
         _this.isPreventChange = false;
         _this.isDynamicDataChange = false;
+        _this.addedNewItem = false;
         return _this;
     }
     DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {
@@ -257,7 +260,8 @@ var DropDownBase = /** @class */ (function (_super) {
                 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);
             }
             var content = actionFailure ?
                 this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');
@@ -266,9 +270,12 @@ var DropDownBase = /** @class */ (function (_super) {
                 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;
+                }
             }
         }
     };
@@ -299,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);
+            }
         }
     };
     /**
@@ -314,7 +323,7 @@ var DropDownBase = /** @class */ (function (_super) {
      *
      * @returns {void}
      */
-    DropDownBase.prototype.initialize = function () {
+    DropDownBase.prototype.initialize = function (e) {
         this.bindEvent = true;
         this.actionFailureTemplateId = "" + this.element.id + ACTIONFAILURETEMPLATE_PROPERTY;
         if (this.element.tagName === 'UL') {
@@ -333,7 +342,7 @@ var DropDownBase = /** @class */ (function (_super) {
             }
         }
         else {
-            this.setListData(this.dataSource, this.fields, this.query);
+            this.setListData(this.dataSource, this.fields, this.query, e);
         }
     };
     /**
@@ -344,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.
      *
@@ -359,7 +360,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * @returns {void}
      */
     DropDownBase.prototype.updateDataAttribute = function (value) {
-        var invalidAttr = ['class', 'style', 'id', 'type'];
+        var invalidAttr = ['class', 'style', 'id', 'type', 'aria-expanded', 'aria-autocomplete', 'aria-readonly'];
         var attr = {};
         for (var a = 0; a < this.element.attributes.length; a++) {
             if (invalidAttr.indexOf(this.element.attributes[a].name) === -1 &&
@@ -427,6 +428,8 @@ var DropDownBase = /** @class */ (function (_super) {
         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;
@@ -441,7 +444,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @returns {void}
      */
-    DropDownBase.prototype.setListData = function (dataSource, fields, query) {
+    DropDownBase.prototype.setListData = function (dataSource, fields, query, event) {
         var _this = this;
         fields = fields ? fields : this.fields;
         var ulElement;
@@ -466,10 +469,10 @@ var DropDownBase = /** @class */ (function (_super) {
                                     _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);
                             }
@@ -488,7 +491,7 @@ var DropDownBase = /** @class */ (function (_super) {
                     _this.trigger('actionComplete', localDataArgs, function (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);
                             }
@@ -571,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) {
@@ -698,18 +703,22 @@ var DropDownBase = /** @class */ (function (_super) {
         return extend({}, options, fields, true);
     };
     DropDownBase.prototype.setFloatingHeader = function (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);
     };
     DropDownBase.prototype.scrollStop = function (e) {
         var target = !isNullOrUndefined(e) ? e.target : this.list;
@@ -793,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);
@@ -808,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;
@@ -878,7 +891,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @returns {void}
      */
-    DropDownBase.prototype.resetList = function (dataSource, fields, query) {
+    DropDownBase.prototype.resetList = function (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)) {
@@ -888,8 +901,9 @@ var DropDownBase = /** @class */ (function (_super) {
                     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);
         }
     };
     DropDownBase.prototype.updateSelectElementData = function (isFiltering) {
@@ -952,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) {
@@ -981,7 +992,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * @private
      * @returns {void}
      */
-    DropDownBase.prototype.render = function (isEmptyData) {
+    DropDownBase.prototype.render = function (e, isEmptyData) {
         this.list = this.createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });
         this.list.classList.add(dropDownBaseClasses.root);
         this.setFields();
@@ -1003,9 +1014,8 @@ var DropDownBase = /** @class */ (function (_super) {
             wrapperElement.appendChild(this.list);
         }
         this.setEnableRtl();
-        this.setEnabled();
         if (!isEmptyData) {
-            this.initialize();
+            this.initialize(e);
         }
     };
     /**
@@ -1031,10 +1041,10 @@ 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}
-
+     * @deprecated
      */
     DropDownBase.prototype.addItem = function (items, itemIndex) {
         if (!this.list || (this.list.textContent === this.noRecordsTemplate && this.getModuleName() !== 'listbox')) {
@@ -1095,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 {
@@ -1146,6 +1162,7 @@ var DropDownBase = /** @class */ (function (_super) {
         if (selectedItemValue || itemIndex === 0) {
             this.updateSelection();
         }
+        this.addedNewItem = true;
     };
     DropDownBase.prototype.validationAttribute = function (target, hidden) {
         var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');
@@ -1219,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);
@@ -1242,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);