@syncfusion/ej2-dropdowns 32.2.9 → 33.1.46

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.2.9
+*  version : 33.1.46
 *  Copyright Syncfusion Inc. 2001 - 2025. 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,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "32.2.9",
+  "version": "33.1.46",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,13 +8,13 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-dropdowns.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~32.2.9",
-    "@syncfusion/ej2-data": "~32.2.3",
-    "@syncfusion/ej2-inputs": "~32.2.8",
-    "@syncfusion/ej2-lists": "~32.2.7",
-    "@syncfusion/ej2-navigations": "~32.2.9",
-    "@syncfusion/ej2-notifications": "~32.2.3",
-    "@syncfusion/ej2-popups": "~32.2.8"
+    "@syncfusion/ej2-base": "~33.1.45",
+    "@syncfusion/ej2-data": "~33.1.45",
+    "@syncfusion/ej2-inputs": "~33.1.44",
+    "@syncfusion/ej2-lists": "~33.1.44",
+    "@syncfusion/ej2-navigations": "~33.1.46",
+    "@syncfusion/ej2-notifications": "~33.1.44",
+    "@syncfusion/ej2-popups": "~33.1.44"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -841,6 +841,9 @@ var ComboBox = /** @class */ (function (_super) {
                     break;
                 case 'allowCustom':
                     break;
+                case 'placeholder':
+                    Input.setPlaceholder(newProp.placeholder, this.inputElement, this.getModuleName());
+                    break;
                 default: {
                     // eslint-disable-next-line max-len
                     var comboProps = this.getPropObject(prop, newProp, oldProp);

package/src/common/virtual-scroll.d.ts

@@ -37,6 +37,7 @@ export declare class VirtualScroll {
     private options;
     private touchModule;
     private component;
+    private scrollHandler;
     constructor(parent: IDropdownlist);
     addEventListener(): void;
     removeEventListener(): void;

package/src/common/virtual-scroll.js

@@ -104,7 +104,8 @@ var VirtualScroll = /** @class */ (function () {
         this.touchModule = new Touch(this.parent.popupContentElement, {
             scroll: this.popupScrollHandler.bind(this)
         });
-        EventHandler.add(this.parent.popupContentElement, 'scroll', this.virtualScrollHandler(callback), this);
+        this.scrollHandler = this.virtualScrollHandler(callback);
+        EventHandler.add(this.parent.popupContentElement, 'scroll', this.scrollHandler, this);
     };
     VirtualScroll.prototype.getModuleName = function () {
         return 'VirtualScroll';
@@ -243,6 +244,7 @@ var VirtualScroll = /** @class */ (function () {
                     this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                     isListUpdated = false;
                     this.parent.appendUncheckList = this.parent.dataSource instanceof DataManager ? this.parent.appendUncheckList : false;
+                    oldUlElement = null;
                 }
             }
             else {
@@ -258,11 +260,12 @@ var VirtualScroll = /** @class */ (function () {
                 this.parent.setCurrentView = false;
                 this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                 isListUpdated = false;
+                reOrderList = null;
             }
             this.parent.totalItemsCount();
         }
         if (isListUpdated) {
-            if (this.component === 'multiselect' && this.parent.itemCount * 2 > this.parent.totalItemCount) {
+            if (this.component === 'multiselect' && this.parent.itemCount * 2 > this.parent.totalItemCount && !(this.parent.dataSource instanceof DataManager)) {
                 this.parent.viewPortInfo.endIndex = endIndex = this.parent.totalItemCount;
                 this.parent.isVirtualTrackHeight = true;
             }
@@ -273,6 +276,7 @@ var VirtualScroll = /** @class */ (function () {
                     if (oldUlElement) {
                         this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
                     }
+                    oldUlElement = null;
                 }
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var alreadyAddedData = this.parent.generatedDataObject[index];
@@ -606,6 +610,18 @@ var VirtualScroll = /** @class */ (function () {
         };
     };
     VirtualScroll.prototype.destroy = function () {
+        if (this.parent.popupContentElement) {
+            EventHandler.remove(this.parent.popupContentElement, 'wheel mousedown', this.popupScrollHandler);
+            EventHandler.remove(this.parent.popupContentElement, 'scroll', this.scrollHandler);
+        }
+        // Destroy touch module
+        if (this.touchModule) {
+            this.touchModule.destroy();
+            this.touchModule = null;
+        }
+        // Clear references
+        this.containerElementRect = null;
+        this.scrollHandler = null;
         this.removeEventListener();
     };
     return VirtualScroll;

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

@@ -302,6 +302,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected isPrimitiveData: boolean;
     protected isCustomFiltering: boolean;
     protected debounceTimer: ReturnType<typeof setTimeout> | null;
+    private skeletonInstances;
     protected virtualListInfo: VirtualInfo;
     protected viewPortInfo: VirtualInfo;
     protected selectedValueInfo: VirtualInfo;
@@ -532,6 +533,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected GetVirtualTrackHeight(): string;
     protected getTransformValues(): string;
     protected UpdateSkeleton(isSkeletonCountChange?: boolean, skeletonCount?: number): void;
+    protected destroySkeletons(): void;
     protected getLocaleName(): string;
     protected getTextByValue(value: string | number | boolean): string;
     protected getFormattedValue(value: string): string | number | boolean;

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

@@ -385,6 +385,7 @@ var DropDownBase = /** @class */ (function (_super) {
                 }
             }
         }
+        ele = null;
     };
     DropDownBase.prototype.checkAndResetCache = function () {
         if (this.isVirtualizationEnabled) {
@@ -481,12 +482,21 @@ var DropDownBase = /** @class */ (function (_super) {
         translateY = translateY - (this.skeletonCount * this.listItemHeight);
         translateY = ((this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0) ||
             this.skeletonCount === 0) ? 0 : translateY;
+        var virtualElement = this.list.getElementsByClassName('e-virtual-ddl')[0];
+        var style = virtualElement && virtualElement.style && virtualElement.style.height;
+        if (this.getModuleName() === 'multiselect' && !isNullOrUndefined(style) && style === '' &&
+            this.dataSource instanceof DataManager) {
+            translateY = 0;
+        }
         var styleText = "transform: translate(0px, " + translateY + "px);";
         return styleText;
     };
     DropDownBase.prototype.UpdateSkeleton = function (isSkeletonCountChange, skeletonCount) {
         var isContainSkeleton = this.list.querySelector('.e-virtual-ddl-content');
         var isContainVirtualList = this.list.querySelector('.e-virtual-list');
+        if (!this.skeletonInstances) {
+            this.skeletonInstances = [];
+        }
         if (isContainSkeleton && (!isContainVirtualList || isSkeletonCountChange) && this.isVirtualizationEnabled) {
             var totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;
             for (var i = 0; i < totalSkeletonCount; i++) {
@@ -500,6 +510,7 @@ var DropDownBase = /** @class */ (function (_super) {
                     width: '95%',
                     cssClass: 'e-skeleton-text'
                 });
+                this.skeletonInstances.push(skeleton);
                 skeleton.appendTo(this.createElement('div'));
                 liElement.appendChild(skeleton.element);
                 if (isContainSkeleton.firstChild) {
@@ -532,6 +543,16 @@ var DropDownBase = /** @class */ (function (_super) {
             }
         }
     };
+    DropDownBase.prototype.destroySkeletons = function () {
+        if (this.skeletonInstances && this.skeletonInstances.length > 0) {
+            this.skeletonInstances.forEach(function (skeleton) {
+                if (skeleton && !skeleton.isDestroyed) {
+                    skeleton.destroy();
+                }
+            });
+            this.skeletonInstances = [];
+        }
+    };
     DropDownBase.prototype.getLocaleName = function () {
         return 'drop-down-base';
     };
@@ -665,6 +686,8 @@ var DropDownBase = /** @class */ (function (_super) {
         }
         this.updateFields(fields.text, fields.value, isSelectGroupCheck ? fields.groupBy : this.fields.groupBy, this.fields.htmlAttributes, this.fields.iconCss, this.fields.disabled);
         this.resetList(jsonElement, fields);
+        element = null;
+        group = null;
     };
     DropDownBase.prototype.updateFields = function (text, value, groupBy, htmlAttributes, iconCss, disabled) {
         var field = {
@@ -1203,6 +1226,12 @@ var DropDownBase = /** @class */ (function (_super) {
                 this.ulElement = this.list.querySelector('ul');
                 this.postRender(this.list, list, this.bindEvent);
             }
+            else if (this.getModuleName() === 'dropdownlist' && this.isVirtualizationEnabled) {
+                this.list.innerHTML = '';
+                this.createVirtualContent();
+                this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
+                this.updateListElements(this.listData);
+            }
         }
         if (this.getModuleName() === 'multiselect' && this.isAngular && this.ngEle) {
             var popupHolder_1 = this.list;
@@ -1460,6 +1489,7 @@ var DropDownBase = /** @class */ (function (_super) {
         }
         this.fixedHeaderElement.innerHTML = groupData.innerHTML;
         this.renderGroupTemplate(this.fixedHeaderElement);
+        groupData = null;
     };
     DropDownBase.prototype.updateGroupFixedHeader = function (element, target) {
         if (this.fixedHeaderElement && this.list && this.list.parentElement) {
@@ -1580,6 +1610,8 @@ var DropDownBase = /** @class */ (function (_super) {
                     this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
                     this.updateListElements(listData);
                 }
+                oldUlElement = null;
+                virtualUlElement = null;
             }
         }
         return ulElement;
@@ -2110,6 +2142,7 @@ var DropDownBase = /** @class */ (function (_super) {
             this.updateSelection();
         }
         this.addedNewItem = true;
+        liCollections = null;
     };
     /**
      * Checks if the given HTML element is disabled.
@@ -2227,13 +2260,28 @@ var DropDownBase = /** @class */ (function (_super) {
                 detach(this.list);
             }
         }
+        if (this.generatedDataObject) {
+            this.generatedDataObject = {};
+        }
+        this.destroySkeletons();
         this.liCollections = null;
+        this.incrementalLiCollections = null;
+        this.incrementalUlElement = null;
         this.ulElement = null;
+        this.fixedHeaderElement = null;
         this.list = null;
+        this.item = null;
         this.enableRtlElements = null;
         this.groupHeaderItems = null;
         this.fiteredGroupHeaderItems = null;
         this.rippleFun = null;
+        this.popupContentElement = null;
+        this.virtualListInfo = null;
+        this.viewPortInfo = null;
+        this.selectedValueInfo = null;
+        this.virtualGroupDataSource = null;
+        this.virtualSelectAllData = null;
+        this.incrementalListData = null;
         _super.prototype.destroy.call(this);
     };
     __decorate([

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

@@ -197,6 +197,7 @@ var DropDownList = /** @class */ (function (_super) {
             else if (floatElement) {
                 classList(floatElement, ['e-label-bottom'], ['e-label-top']);
             }
+            floatElement = null;
         }
     };
     DropDownList.prototype.resetHandler = function (e) {
@@ -477,6 +478,7 @@ var DropDownList = /** @class */ (function (_super) {
             else {
                 this.setSelection(element, null);
             }
+            element = null;
         }
         else {
             this.setSelection(this.liCollections[this.activeIndex], null);
@@ -525,6 +527,11 @@ var DropDownList = /** @class */ (function (_super) {
             this.isActive = false;
             this.beforePopupOpen = false;
         }
+        // Cancel any pending debounced filtering when focus leaves the component.
+        if (this.debounceTimer !== null) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
         this.isFocused = false;
     };
     DropDownList.prototype.focusOutAction = function (e) {
@@ -633,7 +640,7 @@ var DropDownList = /** @class */ (function (_super) {
         if (formElement) {
             EventHandler.remove(formElement, 'reset', this.resetValueHandler);
         }
-        if (!Browser.isDevice) {
+        if (!Browser.isDevice && !isNullOrUndefined(this.keyboardModule)) {
             this.keyboardModule.destroy();
         }
         if (this.showClearButton) {
@@ -754,10 +761,12 @@ var DropDownList = /** @class */ (function (_super) {
             var delay = 100;
             this.closePopup(delay, e);
         }
+        li = null;
     };
     DropDownList.prototype.onMouseOver = function (e) {
         var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);
         this.setHover(currentLi);
+        currentLi = null;
     };
     DropDownList.prototype.setHover = function (li) {
         if (this.enabled && this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {
@@ -895,6 +904,7 @@ var DropDownList = /** @class */ (function (_super) {
                     this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
                     this.list.scrollTop = 0;
                 }
+                li = null;
             }
             else {
                 var li = void 0;
@@ -909,6 +919,7 @@ var DropDownList = /** @class */ (function (_super) {
                     this.setSelection(li, e);
                     this.setScrollPosition();
                 }
+                li = null;
             }
         }
     };
@@ -1142,6 +1153,7 @@ var DropDownList = /** @class */ (function (_super) {
                 this.ulElement = this.list.querySelector('ul');
                 this.handleVirtualKeyboardActions(e, this.pageCount);
             }
+            nextItem = null;
         }
         if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
             var value = this.getItemData().value;
@@ -1178,6 +1190,7 @@ var DropDownList = /** @class */ (function (_super) {
             this.updateUpDownAction(e);
         }
         e.preventDefault();
+        focusEle = null;
     };
     DropDownList.prototype.updateHomeEndAction = function (e, isVirtualKeyAction) {
         if (this.getModuleName() === 'dropdownlist') {
@@ -1298,6 +1311,7 @@ var DropDownList = /** @class */ (function (_super) {
             }
             this.hidePopup(e);
             this.focusDropDown(e);
+            li = null;
         }
         else {
             this.showPopup();
@@ -1495,6 +1509,7 @@ var DropDownList = /** @class */ (function (_super) {
                 ulElement = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
                 this.actionCompleteData.ulElement = ulElement;
             }
+            ulElement = null;
         }
     };
     DropDownList.prototype.updateSelectedItem = function (li, e, preventSelect, isSelection) {
@@ -1533,6 +1548,7 @@ var DropDownList = /** @class */ (function (_super) {
                 this.setSelectOptions(li, e);
             }
         }
+        li = null;
     };
     DropDownList.prototype.selectEventCallback = function (li, e, preventSelect, selectedData, value) {
         this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;
@@ -1567,6 +1583,7 @@ var DropDownList = /** @class */ (function (_super) {
             }
             this.activeIndex = this.getIndexByValue(value);
         }
+        focusedItem = null;
     };
     DropDownList.prototype.activeItem = function (li) {
         if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {
@@ -2289,6 +2306,7 @@ var DropDownList = /** @class */ (function (_super) {
             EventHandler.add(this.filterInput, 'keydown', this.onFilterDown, this);
             EventHandler.add(this.filterInput, 'blur', this.onBlurHandler, this);
             EventHandler.add(this.filterInput, 'paste', this.pasteHandler, this);
+            parentElement = null;
             return this.filterInputObj;
         }
         else {
@@ -2452,6 +2470,7 @@ var DropDownList = /** @class */ (function (_super) {
                 this.activeIndex = this.getIndexByValue(value);
                 var element = this.findListElement(this.list, 'li', 'data-value', value);
                 this.selectedLI = element;
+                element = null;
             }
             else if (this.enableVirtualization && this.getModuleName() === 'autocomplete') {
                 this.activeIndex = this.skeletonCount;
@@ -2632,6 +2651,7 @@ var DropDownList = /** @class */ (function (_super) {
         if (!(this.enableVirtualization && isNullOrUndefined(element))) {
             this.removeFocus();
         }
+        element = null;
     };
     DropDownList.prototype.updateSelection = function () {
         var selectedItem = this.list.querySelector('.' + dropDownBaseClasses.selected);
@@ -2650,6 +2670,7 @@ var DropDownList = /** @class */ (function (_super) {
             }
             this.list.querySelector('.' + dropDownBaseClasses.li).classList.add(dropDownListClasses.focus);
         }
+        selectedItem = null;
     };
     DropDownList.prototype.updateSelectionList = function () {
         var selectedItem = this.list && this.list.querySelector('.' + 'e-active');
@@ -2793,6 +2814,7 @@ var DropDownList = /** @class */ (function (_super) {
                             parseInt(getComputedStyle(_this.inputElement).paddingLeft, 10) +
                             parseInt(getComputedStyle(_this.inputElement.parentElement).borderLeftWidth, 10));
                     }
+                    firstItem = null;
                 }
                 _this.createPopup(popupEle_1, offsetValue, left);
                 _this.popupContentElement = _this.popupObj.element.querySelector('.e-content');
@@ -3046,6 +3068,8 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                 }
                 _this.activeStateChange();
+                actionList = null;
+                ulElement = null;
             },
             targetExitViewport: function () {
                 if (!Browser.isDevice) {
@@ -3085,6 +3109,7 @@ var DropDownList = /** @class */ (function (_super) {
         var clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);
         detach(this.filterInput);
         clearElement.parentElement.insertBefore(this.filterInput, clearElement);
+        clearElement = null;
     };
     DropDownList.prototype.setPopupPosition = function (border) {
         var offsetValue;
@@ -3113,6 +3138,9 @@ var DropDownList = /** @class */ (function (_super) {
         }
         var inputHeight = this.inputWrapper.container.offsetHeight;
         offsetValue = offsetValue + liHeight + popupOffset - ((liHeight - inputHeight) / 2);
+        selectedLI = null;
+        firstItem = null;
+        lastItem = null;
         return -offsetValue;
     };
     DropDownList.prototype.setWidth = function () {
@@ -3127,6 +3155,7 @@ var DropDownList = /** @class */ (function (_super) {
             width = (parseInt(width, 10) + (parseInt(getComputedStyle(firstItem).textIndent, 10) -
                 parseInt(getComputedStyle(this.inputElement).paddingLeft, 10) +
                 parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10)) * 2) + 'px';
+            firstItem = null;
         }
         return width;
     };
@@ -3383,7 +3412,7 @@ var DropDownList = /** @class */ (function (_super) {
                 EventHandler.remove(this.filterInput, 'blur', this.onBlurHandler);
                 EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);
             }
-            if (this.allowFiltering && this.getModuleName() === 'dropdownlist') {
+            if (this.allowFiltering && !isNullOrUndefined(this.filterInput) && this.getModuleName() === 'dropdownlist') {
                 this.filterInput.removeAttribute('aria-activedescendant');
                 this.filterInput.removeAttribute('aria-disabled');
                 this.filterInput.removeAttribute('role');
@@ -3391,7 +3420,7 @@ var DropDownList = /** @class */ (function (_super) {
                 this.filterInput.removeAttribute('autocapitalize');
                 this.filterInput.removeAttribute('spellcheck');
             }
-            if (this.filterInput.parentNode) {
+            if (!isNullOrUndefined(this.filterInput) && this.filterInput.parentNode) {
                 this.filterInput.parentNode.removeChild(this.filterInput);
                 var attrs = Array.prototype.slice.call(this.filterInput.attributes);
                 for (var n = 0; n < attrs.length; n++) {
@@ -3542,6 +3571,7 @@ var DropDownList = /** @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
         }
+        ulElement = null;
     };
     DropDownList.prototype.destroyPopup = function () {
         this.isPopupOpen = false;
@@ -3580,6 +3610,12 @@ var DropDownList = /** @class */ (function (_super) {
         }
         else {
             this.inputElement = this.createElement('input', { attrs: { role: 'combobox', type: 'text' } });
+            if (this.element.tagName === this.getNgDirective()) {
+                // Pre-populate id so Input.createInput/createFloatingInput can wire label.for correctly
+                var ngId = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');
+                this.element.id = ngId;
+                this.inputElement.id = ngId + '_input';
+            }
             if (this.element.tagName !== this.getNgDirective()) {
                 this.element.style.display = 'none';
             }
@@ -3643,6 +3679,9 @@ var DropDownList = /** @class */ (function (_super) {
         var id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');
         this.element.id = id;
         this.hiddenElement.id = id + '_hidden';
+        if (this.element.tagName === this.getNgDirective() && !this.inputElement.id) {
+            this.inputElement.id = id + '_input';
+        }
         this.targetElement().setAttribute('tabindex', this.tabIndex);
         if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') && !this.readonly) {
             if (!this.inputElement.hasAttribute('aria-label')) {
@@ -3748,6 +3787,8 @@ var DropDownList = /** @class */ (function (_super) {
         var listItemHeight = Math.ceil(item.getBoundingClientRect().height) +
             parseInt(window.getComputedStyle(item).marginBottom, 10);
         listParent.remove();
+        listParent = null;
+        item = null;
         return listItemHeight;
     };
     DropDownList.prototype.setFooterTemplate = function (popupEle) {
@@ -3801,6 +3842,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         var contentEle = popupEle.querySelector('div.e-content');
         popupEle.insertBefore(this.header, contentEle);
+        contentEle = null;
     };
     /**
      * Sets the enabled state to DropDownBase.
@@ -3865,6 +3907,7 @@ var DropDownList = /** @class */ (function (_super) {
             ((props.dataSource instanceof DataManager) || (!isNullOrUndefined(props) && Array.isArray(props.dataSource) &&
                 !isNullOrUndefined(oldProps) && Array.isArray(oldProps.dataSource) && props.dataSource.length !== oldProps.dataSource.length))) {
             this.typedString = '';
+            this.selectData = null;
             this.resetList(this.dataSource);
         }
         if (!this.isCustomFilter && !this.isFilterFocus && document.activeElement !== this.filterInput) {
@@ -4017,9 +4060,9 @@ var DropDownList = /** @class */ (function (_super) {
                         return { value: void 0 };
                     }
                     if (this_1.enableVirtualization) {
+                        var isOfflineMode = this_1.dataSource instanceof DataManager &&
+                            this_1.dataSource.dataSource.offline === true;
                         if (newProp.value && this_1.dataSource instanceof DataManager) {
-                            var isOfflineMode = this_1.dataSource instanceof DataManager &&
-                                this_1.dataSource.dataSource.offline === true;
                             var checkField = isNullOrUndefined(this_1.fields.value) ? this_1.fields.text : this_1.fields.value;
                             var value = this_1.allowObjectBinding && !isNullOrUndefined(newProp.value) ?
                                 getValue(checkField, newProp.value) : newProp.value;
@@ -4103,6 +4146,7 @@ var DropDownList = /** @class */ (function (_super) {
                             }
                         }
                         this_1.updateInputFields();
+                        element = null;
                     }
                     break;
                 case 'footerTemplate':
@@ -4194,6 +4238,7 @@ var DropDownList = /** @class */ (function (_super) {
                 }
             }
         };
+        li = null;
     };
     DropDownList.prototype.updatePopupState = function () {
         if (this.beforePopupOpen) {
@@ -4366,6 +4411,7 @@ var DropDownList = /** @class */ (function (_super) {
                         this.setValueTemplate();
                     }
                 }
+                element = null;
             }
             else {
                 this.resetSelection();
@@ -4491,6 +4537,7 @@ var DropDownList = /** @class */ (function (_super) {
                             this.clear();
                         }
                     }
+                    li = null;
                 }
             }
         }
@@ -4526,7 +4573,8 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.inputElement) {
             var attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',
                 'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',
-                'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label'];
+                'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label',
+                'role', 'value', 'style', 'type'];
             for (var i = 0; i < attrArray.length; i++) {
                 this.inputElement.removeAttribute(attrArray[i]);
             }
@@ -4607,6 +4655,43 @@ var DropDownList = /** @class */ (function (_super) {
             detach(this.popupObj.element);
             this.popupObj.element = null;
         }
+        if (this.list) {
+            while (this.list.firstChild) {
+                this.list.removeChild(this.list.firstChild);
+            }
+            if (this.list.parentNode) {
+                this.list.parentNode.removeChild(this.list);
+            }
+            detach(this.list);
+        }
+        if (this.ulElement) {
+            while (this.ulElement.firstChild) {
+                this.ulElement.removeChild(this.ulElement.firstChild);
+            }
+            if (this.ulElement.parentNode) {
+                this.ulElement.parentNode.removeChild(this.ulElement);
+            }
+            detach(this.ulElement);
+        }
+        if (this.actionData && this.actionData.ulElement) {
+            while (this.actionData.ulElement.firstChild) {
+                this.actionData.ulElement.removeChild(this.actionData.ulElement.firstChild);
+            }
+            detach(this.actionData.ulElement);
+            this.actionData.ulElement = null;
+            this.actionData.list = null;
+            this.actionData = null;
+        }
+        if (this.actionCompleteData && this.actionCompleteData.ulElement) {
+            while (this.actionCompleteData.ulElement.firstChild) {
+                this.actionCompleteData.ulElement.removeChild(this.actionCompleteData.ulElement.firstChild);
+            }
+            detach(this.actionCompleteData.ulElement);
+            this.actionCompleteData.ulElement = null;
+            this.actionCompleteData.list = null;
+            this.actionCompleteData = null;
+        }
+        this.listData = null;
         this.ulElement = null;
         this.list = null;
         this.clearIconElement = null;
@@ -4620,20 +4705,19 @@ var DropDownList = /** @class */ (function (_super) {
         this.header = null;
         this.previousSelectedLI = null;
         this.valueTempElement = null;
-        if (this.actionData.ulElement) {
-            detach(this.actionData.ulElement);
-        }
-        this.actionData.ulElement = null;
-        if (this.actionCompleteData.ulElement) {
-            detach(this.actionCompleteData.ulElement);
-        }
-        this.actionCompleteData.ulElement = null;
+        this.resizer = null;
         if (this.inputElement && !isNullOrUndefined(this.inputElement.onchange)) {
             this.inputElement.onchange = null;
         }
         if (this.inputElement && !isNullOrUndefined(this.inputElement.onselect)) {
             this.inputElement.onselect = null;
         }
+        if (this.enableVirtualization) {
+            this.notify('destroy', { module: 'VirtualScroll' });
+            this.virtualGroupDataSource = null;
+            this.viewPortInfo = null;
+            this.selectedValueInfo = null;
+        }
         Input.destroy({
             element: this.inputElement,
             floatLabelType: this.floatLabelType,

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

@@ -417,7 +417,7 @@ export interface DropDownTreeModel extends ComponentModel{
     enableHtmlSanitizer?: boolean;
 
     /**
-     * Enables rendering of raw text content in the Dropdown Tree component without HTML encoding.
+     * Enables rendering of raw text content in the Dropdown component without HTML encoding.
      * When set to true, the text will be displayed exactly as provided (including HTML tags or special characters),
      * instead of being encoded or truncated (e.g., `hiiih<hihi` will be shown as-is).
      *

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

@@ -586,7 +586,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
      */
     enableHtmlSanitizer: boolean;
     /**
-     * Enables rendering of raw text content in the Dropdown Tree component without HTML encoding.
+     * Enables rendering of raw text content in the Dropdown component without HTML encoding.
      * When set to true, the text will be displayed exactly as provided (including HTML tags or special characters),
      * instead of being encoded or truncated (e.g., `hiiih<hihi` will be shown as-is).
      *