@syncfusion/ej2-dropdowns 25.2.7 → 26.1.35

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 25.2.7
+*  version : 26.1.35
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@25.2.6",
+  "_id": "@syncfusion/ej2-dropdowns@18.66.23",
   "_inBundle": false,
-  "_integrity": "sha512-8cZUnVp0STXgzIUSLIrL61zkvce+q/3uadX51g8fxfovZwbG76WrsbHUv5BGtFHsPIBwbbFOqT9J9rWcKxqtHw==",
+  "_integrity": "sha512-yDOcip+lZNukwhS2MZga3L7PqR0RlCStBwQDsjvg4ZhCtJ8qXB7mNWPjSOfZGgJRw3HWCGhCzSyZb3zSjMpXUA==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -23,6 +23,7 @@
     "/@syncfusion/ej2-documenteditor",
     "/@syncfusion/ej2-gantt",
     "/@syncfusion/ej2-grids",
+    "/@syncfusion/ej2-image-editor",
     "/@syncfusion/ej2-inplace-editor",
     "/@syncfusion/ej2-kanban",
     "/@syncfusion/ej2-pdfviewer",
@@ -34,22 +35,22 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-25.2.6.tgz",
-  "_shasum": "c8fc43fba4fd10b7c872f905d00e37a42e0f2e24",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-18.66.23.tgz",
+  "_shasum": "e298ecdd7cb43706e54fe2850a72cb6c5ffc0093",
   "_spec": "@syncfusion/ej2-dropdowns@*",
-  "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~25.2.7",
-    "@syncfusion/ej2-data": "~25.2.3",
-    "@syncfusion/ej2-inputs": "~25.2.6",
-    "@syncfusion/ej2-lists": "~25.2.3",
-    "@syncfusion/ej2-navigations": "~25.2.6",
-    "@syncfusion/ej2-notifications": "~25.2.3",
-    "@syncfusion/ej2-popups": "~25.2.7"
+    "@syncfusion/ej2-base": "~26.1.35",
+    "@syncfusion/ej2-data": "~26.1.35",
+    "@syncfusion/ej2-inputs": "~26.1.35",
+    "@syncfusion/ej2-lists": "~26.1.35",
+    "@syncfusion/ej2-navigations": "~26.1.35",
+    "@syncfusion/ej2-notifications": "~26.1.35",
+    "@syncfusion/ej2-popups": "~26.1.35"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -74,7 +75,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "25.2.7",
+  "version": "26.1.35",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -486,7 +486,7 @@ var AutoComplete = /** @class */ (function (_super) {
         _super.prototype.render.call(this);
     };
     __decorate([
-        Complex({ value: null, iconCss: null, groupBy: null }, FieldSettings)
+        Complex({ value: null, iconCss: null, groupBy: null, disabled: null }, FieldSettings)
     ], AutoComplete.prototype, "fields", void 0);
     __decorate([
         Property(true)

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

@@ -144,6 +144,18 @@ var ComboBox = /** @class */ (function (_super) {
         }
     };
     ComboBox.prototype.updateValues = function () {
+        if (this.fields.disabled) {
+            if (this.value != null) {
+                this.value = !this.isDisableItemValue(this.value) ? this.value : null;
+            }
+            if (this.text != null) {
+                this.text = !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;
+            }
+            if (this.index != null) {
+                this.index = !this.isDisabledItemByIndex(this.index) ? this.index : null;
+                this.activeIndex = this.index;
+            }
+        }
         if (!isNullOrUndefined(this.value)) {
             var currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
             var li = this.getElementByValue(currentValue);
@@ -577,6 +589,9 @@ var ComboBox = /** @class */ (function (_super) {
             else {
                 li = this.list.querySelector('.' + dropDownListClasses.focus);
             }
+            if (this.isDisabledElement(li)) {
+                return;
+            }
             if (li) {
                 this.setSelection(li, e);
                 this.isTyped = false;

package/src/common/interface.js

@@ -1 +0,0 @@
-

package/src/common/virtual-scroll.js

@@ -314,6 +314,7 @@ var VirtualScroll = /** @class */ (function () {
             this.parent.updatevirtualizationList();
         }
         this.parent.getSkeletonCount();
+        this.parent.skeletonCount = this.parent.totalItemCount != 0 && this.parent.totalItemCount < (this.parent.itemCount * 2) ? 0 : this.parent.skeletonCount;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var virtualTrackElement = this.parent.list.getElementsByClassName('e-virtual-ddl')[0];
         if (virtualTrackElement) {

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

@@ -43,6 +43,13 @@ export interface FieldSettingsModel {
      */
     htmlAttributes?: string;
 
+    /**
+     * Defines whether the particular field value is disabled or not.
+     *
+     * @default null
+     */
+    disabled?: string;
+
 }
 
 /**
@@ -69,7 +76,7 @@ export interface DropDownBaseModel extends ComponentModel{
      *   customers.appendTo("#list");
      * ```
      *
-     * @default {text: null, value: null, iconCss: null, groupBy: null}
+     * @default {text: null, value: null, iconCss: null, groupBy: null, disabled: null}
 
      */
     fields?: FieldSettingsModel;

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

@@ -40,6 +40,12 @@ export declare class FieldSettings extends ChildProperty<FieldSettings> {
      * @default null
      */
     htmlAttributes: string;
+    /**
+     * Defines whether the particular field value is disabled or not.
+     *
+     * @default null
+     */
+    disabled: string;
 }
 export declare const dropDownBaseClasses: DropDownBaseClassList;
 export interface DropDownBaseClassList {
@@ -220,7 +226,6 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected noRecordsTemplateId: string;
     protected actionFailureTemplateId: string;
     protected preventChange: boolean;
-    protected isAngular: boolean;
     protected isPreventChange: boolean;
     protected isDynamicDataChange: boolean;
     protected addedNewItem: boolean;
@@ -310,7 +315,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      *   customers.appendTo("#list");
      * ```
      *
-     * @default {text: null, value: null, iconCss: null, groupBy: null}
+     * @default {text: null, value: null, iconCss: null, groupBy: null, disabled: null}
 
      */
     fields: FieldSettingsModel;
@@ -736,6 +741,27 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     }[] | {
         [key: string]: Object;
     } | string | boolean | number | string[] | boolean[] | number[], itemIndex?: number): void;
+    /**
+     * Checks if the given HTML element is disabled.
+     *
+     * @param {HTMLElement} li - The HTML element to check.
+     * @returns {boolean} - Returns true if the element is disabled, otherwise false.
+     */
+    protected isDisabledElement(li: HTMLElement): boolean;
+    /**
+     * Checks whether the list item at the specified index is disabled.
+     *
+     * @param {number} index - The index of the list item to check.
+     * @returns {boolean} True if the list item is disabled, false otherwise.
+     */
+    protected isDisabledItemByIndex(index: number): boolean;
+    /**
+     * Disables the given list item.
+     *
+     * @param { HTMLLIElement } li - The list item to disable.
+     * @returns {void}
+     */
+    protected disableListItem(li: HTMLLIElement): void;
     protected validationAttribute(target: HTMLElement, hidden: Element): void;
     protected setZIndex(): void;
     protected updateActionCompleteData(li: HTMLElement, item: {

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

@@ -44,6 +44,9 @@ var FieldSettings = /** @class */ (function (_super) {
     __decorate([
         Property()
     ], FieldSettings.prototype, "htmlAttributes", void 0);
+    __decorate([
+        Property()
+    ], FieldSettings.prototype, "disabled", void 0);
     return FieldSettings;
 }(ChildProperty));
 export { FieldSettings };
@@ -87,7 +90,6 @@ var DropDownBase = /** @class */ (function (_super) {
     function DropDownBase(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.preventChange = false;
-        _this.isAngular = false;
         _this.isPreventChange = false;
         _this.isDynamicDataChange = false;
         _this.addedNewItem = false;
@@ -298,7 +300,7 @@ var DropDownBase = /** @class */ (function (_super) {
     };
     DropDownBase.prototype.l10nUpdate = function (actionFailure) {
         var ele = this.getModuleName() === 'listbox' ? this.ulElement : this.list;
-        if (this.noRecordsTemplate !== 'No records found' || this.actionFailureTemplate !== 'Request failed') {
+        if ((!isNullOrUndefined(this.noRecordsTemplate) && this.noRecordsTemplate !== 'No records found') || this.actionFailureTemplate !== 'Request failed') {
             var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;
             var compiledString = void 0;
             var templateId = actionFailure ? this.actionFailureTemplateId : this.noRecordsTemplateId;
@@ -460,7 +462,7 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.getTransformValues = function () {
         var translateY = this.viewPortInfo.startIndex * this.listItemHeight;
         translateY = translateY - (this.skeletonCount * this.listItemHeight);
-        translateY = this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0 ? 0 : translateY;
+        translateY = ((this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0) || this.skeletonCount === 0) ? 0 : translateY;
         var styleText = "transform: translate(0px, " + translateY + "px);";
         return styleText;
     };
@@ -605,17 +607,18 @@ var DropDownBase = /** @class */ (function (_super) {
             }
             element.querySelectorAll('select>option');
         }
-        this.updateFields(fields.text, fields.value, this.fields.groupBy, this.fields.htmlAttributes, this.fields.iconCss);
+        this.updateFields(fields.text, fields.value, this.fields.groupBy, this.fields.htmlAttributes, this.fields.iconCss, this.fields.disabled);
         this.resetList(jsonElement, fields);
     };
-    DropDownBase.prototype.updateFields = function (text, value, groupBy, htmlAttributes, iconCss) {
+    DropDownBase.prototype.updateFields = function (text, value, groupBy, htmlAttributes, iconCss, disabled) {
         var field = {
             'fields': {
                 text: text,
                 value: value,
                 groupBy: !isNullOrUndefined(groupBy) ? groupBy : this.fields && this.fields.groupBy,
                 htmlAttributes: !isNullOrUndefined(htmlAttributes) ? htmlAttributes : this.fields && this.fields.htmlAttributes,
-                iconCss: !isNullOrUndefined(iconCss) ? iconCss : this.fields && this.fields.iconCss
+                iconCss: !isNullOrUndefined(iconCss) ? iconCss : this.fields && this.fields.iconCss,
+                disabled: !isNullOrUndefined(disabled) ? disabled : this.fields && this.fields.disabled
             }
         };
         this.setProperties(field, true);
@@ -986,8 +989,16 @@ var DropDownBase = /** @class */ (function (_super) {
     };
     /* eslint-disable @typescript-eslint/no-unused-vars */
     DropDownBase.prototype.postRender = function (listElement, list, bindEvent) {
+        if (this.fields.disabled) {
+            var liCollections = listElement.querySelectorAll('.' + dropDownBaseClasses.li);
+            for (var index = 0; index < liCollections.length; index++) {
+                if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.disabled]) {
+                    this.disableListItem(liCollections[index]);
+                }
+            }
+        }
         /* eslint-enable @typescript-eslint/no-unused-vars */
-        var focusItem = listElement.querySelector('.' + dropDownBaseClasses.li);
+        var focusItem = this.fields.disabled ? listElement.querySelector('.' + dropDownBaseClasses.li + ':not(.e-disabled') : listElement.querySelector('.' + dropDownBaseClasses.li);
         var selectedItem = listElement.querySelector('.' + dropDownBaseClasses.selected);
         if (focusItem && !selectedItem) {
             focusItem.classList.add(dropDownBaseClasses.focus);
@@ -1341,7 +1352,13 @@ var DropDownBase = /** @class */ (function (_super) {
      */
     DropDownBase.prototype.getIndexByValue = function (value) {
         var index;
-        var listItems = this.getItems();
+        var listItems = [];
+        if (this.fields.disabled && this.getModuleName() === 'multiselect' && this.liCollections) {
+            listItems = this.liCollections;
+        }
+        else {
+            listItems = this.getItems();
+        }
         for (var i = 0; i < listItems.length; i++) {
             if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {
                 index = i;
@@ -1630,6 +1647,9 @@ var DropDownBase = /** @class */ (function (_super) {
             this.notify('addItem', { module: 'CheckBoxSelection', item: li });
             liCollections.push(li);
             if (this.getModuleName() === 'listbox') {
+                if (item.disabled) {
+                    li.classList.add('e-disabled');
+                }
                 this.listData.splice(isListboxEmpty ? this.listData.length : index, 0, item);
                 if (this.listData.length !== this.sortedData.length) {
                     this.sortedData = this.listData;
@@ -1715,6 +1735,41 @@ var DropDownBase = /** @class */ (function (_super) {
         }
         this.addedNewItem = true;
     };
+    /**
+     * Checks if the given HTML element is disabled.
+     *
+     * @param {HTMLElement} li - The HTML element to check.
+     * @returns {boolean} - Returns true if the element is disabled, otherwise false.
+     */
+    DropDownBase.prototype.isDisabledElement = function (li) {
+        if (li && li.classList.contains('e-disabled')) {
+            return true;
+        }
+        return false;
+    };
+    /**
+     * Checks whether the list item at the specified index is disabled.
+     *
+     * @param {number} index - The index of the list item to check.
+     * @returns {boolean} True if the list item is disabled, false otherwise.
+     */
+    DropDownBase.prototype.isDisabledItemByIndex = function (index) {
+        if (this.fields.disabled && this.liCollections) {
+            return this.isDisabledElement(this.liCollections[index]);
+        }
+        return false;
+    };
+    /**
+     * Disables the given list item.
+     *
+     * @param { HTMLLIElement } li - The list item to disable.
+     * @returns {void}
+     */
+    DropDownBase.prototype.disableListItem = function (li) {
+        li.classList.add('e-disabled');
+        li.setAttribute('aria-disabled', 'true');
+        li.setAttribute('aria-selected', 'false');
+    };
     DropDownBase.prototype.validationAttribute = function (target, hidden) {
         var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');
         hidden.setAttribute('name', name);
@@ -1798,7 +1853,7 @@ var DropDownBase = /** @class */ (function (_super) {
         _super.prototype.destroy.call(this);
     };
     __decorate([
-        Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)
+        Complex({ text: null, value: null, iconCss: null, groupBy: null, disabled: null }, FieldSettings)
     ], DropDownBase.prototype, "fields", void 0);
     __decorate([
         Property(null)

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

@@ -104,7 +104,6 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private isSecondClick;
     protected isListSearched: boolean;
     protected preventChange: boolean;
-    protected isAngular: boolean;
     protected selectedElementID: string;
     private preselectedIndex;
     private isTouched;
@@ -391,6 +390,13 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected getElementByText(text: string): Element;
     protected getElementByValue(value: string | number | boolean | object): Element;
     private initValue;
+    /**
+     * Checks if the given value is disabled.
+     *
+     * @param { string | number | boolean | object } value - The value to check for disablement. Can be a string, number, boolean, or object.
+     * @returns { boolean } A boolean indicating whether the value is disabled.
+     */
+    protected isDisableItemValue(value: string | number | boolean | object): boolean;
     protected updateValues(): void;
     protected onBlurHandler(e: MouseEvent): void;
     protected focusOutAction(e?: MouseEvent | KeyboardEventArgs): void;
@@ -620,7 +626,14 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * @returns {void}
      */
     focusOut(e?: MouseEvent | KeyboardEventArgs): void;
-    removeAllChildren: (element: any) => void;
+    /**
+     * Method to disable specific item in the popup.
+     *
+     * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.
+     * @returns {void}
+
+     */
+    disableItem(item: string | number | object | HTMLLIElement): void;
     /**
      * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
      *

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

@@ -88,17 +88,10 @@ var DropDownList = /** @class */ (function (_super) {
         var _this = _super.call(this, options, element) || this;
         _this.isListSearched = false;
         _this.preventChange = false;
-        _this.isAngular = false;
         _this.isTouched = false;
         _this.IsScrollerAtEnd = function () {
             return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;
         };
-        _this.removeAllChildren = function (element) {
-            while (element.children[0]) {
-                this.removeAllChildren(element.children[0]);
-                element.removeChild(element.children[0]);
-            }
-        };
         return _this;
     }
     /**
@@ -219,7 +212,7 @@ var DropDownList = /** @class */ (function (_super) {
         this.removeFocus();
         this.list.scrollTop = 0;
         if (this.getModuleName() !== 'autocomplete' && !isNullOrUndefined(this.ulElement)) {
-            var li = this.ulElement.querySelector('.' + dropDownListClasses.li);
+            var li = this.fields.disabled ? this.ulElement.querySelector('.' + dropDownListClasses.li + ':not(.e-disabled)') : this.ulElement.querySelector('.' + dropDownListClasses.li);
             if (this.enableVirtualization) {
                 li = this.liCollections[this.skeletonCount];
             }
@@ -424,7 +417,32 @@ var DropDownList = /** @class */ (function (_super) {
             this.updateValues();
         }
     };
+    /**
+     * Checks if the given value is disabled.
+     *
+     * @param { string | number | boolean | object } value - The value to check for disablement. Can be a string, number, boolean, or object.
+     * @returns { boolean } A boolean indicating whether the value is disabled.
+     */
+    DropDownList.prototype.isDisableItemValue = function (value) {
+        if (typeof (value) === 'object') {
+            var objectValue = JSON.parse(JSON.stringify(value))[this.fields.value];
+            return this.isDisabledItemByIndex(this.getIndexByValue(objectValue));
+        }
+        return this.isDisabledItemByIndex(this.getIndexByValue(value));
+    };
     DropDownList.prototype.updateValues = function () {
+        if (this.fields.disabled) {
+            if (this.value != null) {
+                this.value = !this.isDisableItemValue(this.value) ? this.value : null;
+            }
+            if (this.text != null) {
+                this.text = !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;
+            }
+            if (this.index != null) {
+                this.index = !this.isDisabledItemByIndex(this.index) ? this.index : null;
+                this.activeIndex = this.index;
+            }
+        }
         this.selectedValueInfo = this.viewPortInfo;
         if (!isNullOrUndefined(this.value)) {
             var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue(((this.fields.value) ? this.fields.value : ''), this.value) : this.value;
@@ -617,7 +635,7 @@ var DropDownList = /** @class */ (function (_super) {
         var target = e.target;
         this.keyboardEvent = null;
         var li = closest(target, '.' + dropDownBaseClasses.li);
-        if (!this.isValidLI(li)) {
+        if (!this.isValidLI(li) || this.isDisabledElement(li)) {
             return;
         }
         this.setSelection(li, e);
@@ -761,7 +779,14 @@ var DropDownList = /** @class */ (function (_super) {
                 }
             }
             else {
-                var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id);
+                var li = void 0;
+                if (this.fields.disabled) {
+                    var enableLiCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li + ':not(.e-disabled)');
+                    li = incrementalSearch(e.charCode, enableLiCollections, this.activeIndex, true, this.element.id);
+                }
+                else {
+                    li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id);
+                }
                 if (!isNullOrUndefined(li)) {
                     this.setSelection(li, e);
                     this.setScrollPosition();
@@ -891,6 +916,9 @@ var DropDownList = /** @class */ (function (_super) {
         }
     };
     DropDownList.prototype.updateUpDownAction = function (e, isVirtualKeyAction) {
+        if (this.fields.disabled && this.list && this.list.querySelectorAll('.e-list-item:not(.e-disabled)').length === 0) {
+            return;
+        }
         if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
             var value_1 = this.getItemData().value;
             if (isNullOrUndefined(value_1)) {
@@ -1001,6 +1029,25 @@ var DropDownList = /** @class */ (function (_super) {
                 attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });
             }
         }
+        var itemIndex;
+        for (var index = 0; index < this.liCollections.length; index++) {
+            if (this.liCollections[index].classList.contains(dropDownListClasses.focus)
+                || this.liCollections[index].classList.contains(dropDownListClasses.selected)) {
+                itemIndex = index;
+                break;
+            }
+        }
+        if (itemIndex != null && this.isDisabledElement(this.liCollections[itemIndex])) {
+            if (this.getModuleName() !== 'autocomplete') {
+                if (this.liCollections.length - 1 === itemIndex && e.action === 'down') {
+                    e.action = 'up';
+                }
+                if (itemIndex === 0 && e.action === 'up') {
+                    e.action = 'down';
+                }
+            }
+            this.updateUpDownAction(e);
+        }
         e.preventDefault();
     };
     DropDownList.prototype.updateHomeEndAction = function (e, isVirtualKeyAction) {
@@ -1101,6 +1148,9 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.selectCurrentItem = function (e) {
         if (this.isPopupOpen) {
             var li = this.list.querySelector('.' + dropDownListClasses.focus);
+            if (this.isDisabledElement(li)) {
+                return;
+            }
             if (li) {
                 this.setSelection(li, e);
                 this.isTyped = false;
@@ -3362,6 +3412,10 @@ var DropDownList = /** @class */ (function (_super) {
                     this_1.setEnable();
                     break;
                 case 'text':
+                    if (this_1.fields.disabled) {
+                        newProp.text = newProp.text && !this_1.isDisabledItemByIndex(this_1.getIndexByValue(this_1.getValueByText(newProp.text)))
+                            ? newProp.text : null;
+                    }
                     if (newProp.text === null) {
                         this_1.clearAll();
                         break;
@@ -3413,6 +3467,9 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                     break;
                 case 'value':
+                    if (this_1.fields.disabled) {
+                        newProp.value = newProp.value != null && !this_1.isDisableItemValue(newProp.value) ? newProp.value : null;
+                    }
                     if (newProp.value === null) {
                         this_1.clearAll();
                         break;
@@ -3472,6 +3529,9 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                     break;
                 case 'index':
+                    if (this_1.fields.disabled) {
+                        newProp.index = newProp.index != null && !this_1.isDisabledItemByIndex(newProp.index) ? newProp.index : null;
+                    }
                     if (newProp.index === null) {
                         this_1.clearAll();
                         break;
@@ -3789,6 +3849,65 @@ var DropDownList = /** @class */ (function (_super) {
             Input.calculateWidth(this.inputElement, this.inputWrapper.container);
         }
     };
+    /**
+     * Method to disable specific item in the popup.
+     *
+     * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.
+     * @returns {void}
+
+     */
+    DropDownList.prototype.disableItem = function (item) {
+        if (this.fields.disabled) {
+            if (!this.list) {
+                this.renderList();
+            }
+            var itemIndex = -1;
+            if (this.liCollections && this.liCollections.length > 0 && this.listData && this.fields.disabled) {
+                if (typeof (item) === 'string') {
+                    itemIndex = this.getIndexByValue(item);
+                }
+                else if (typeof item === 'object') {
+                    if (item instanceof HTMLLIElement) {
+                        for (var index = 0; index < this.liCollections.length; index++) {
+                            if (this.liCollections[index] === item) {
+                                itemIndex = this.getIndexByValue(item.getAttribute('data-value'));
+                                break;
+                            }
+                        }
+                    }
+                    else {
+                        var value = JSON.parse(JSON.stringify(item))[this.fields.value];
+                        for (var index = 0; index < this.listData.length; index++) {
+                            if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.value] === value) {
+                                itemIndex = this.getIndexByValue(value);
+                                break;
+                            }
+                        }
+                    }
+                }
+                else {
+                    itemIndex = item;
+                }
+                var isValidIndex = itemIndex < this.liCollections.length && itemIndex > -1;
+                if (isValidIndex && !(JSON.parse(JSON.stringify(this.listData[itemIndex]))[this.fields.disabled])) {
+                    var li = this.liCollections[itemIndex];
+                    if (li) {
+                        this.disableListItem(li);
+                        var parsedData = JSON.parse(JSON.stringify(this.listData[itemIndex]));
+                        parsedData[this.fields.disabled] = true;
+                        this.listData[itemIndex] = parsedData;
+                        this.dataSource = this.listData;
+                        if (li.classList.contains(dropDownListClasses.focus)) {
+                            this.removeFocus();
+                        }
+                        if (li.classList.contains(dropDownListClasses.selected)) {
+                            this.clear();
+                        }
+                    }
+                }
+            }
+        }
+    };
     /**
      * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
      *
@@ -3838,9 +3957,6 @@ var DropDownList = /** @class */ (function (_super) {
         delete this.hiddenElement;
         this.filterInput = null;
         this.keyboardModule = null;
-        if (!isNullOrUndefined(this.ulElement)) {
-            this.removeAllChildren(this.ulElement);
-        }
         this.ulElement = null;
         this.list = null;
         this.clearIconElement = null;