@syncfusion/ej2-dropdowns 25.2.7 → 26.1.35-750253

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

@@ -1,4 +1,4 @@
-import { Input, InputObject, FloatLabelType, TextBox, InputEventArgs } from '@syncfusion/ej2-inputs';import { createCheckBox } from '@syncfusion/ej2-buttons';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Event, EmitType, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Component, EventHandler, attributes, formatUnit, ChildProperty, remove, L10n, extend } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, prepend, Complex, closest, setValue, getValue, compile, append } from '@syncfusion/ej2-base';import { select, selectAll, isNullOrUndefined as isNOU, matches, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';import { Popup } from '@syncfusion/ej2-popups';import { TreeView, NodeSelectEventArgs, DataBoundEventArgs, FieldsSettingsModel, NodeClickEventArgs, NodeExpandEventArgs } from '@syncfusion/ej2-navigations';import { NodeCheckEventArgs, FailureEventArgs} from '@syncfusion/ej2-navigations';
+import { Input, InputObject, FloatLabelType, TextBox, InputEventArgs } from '@syncfusion/ej2-inputs';import { createCheckBox } from '@syncfusion/ej2-buttons';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Event, EmitType, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Component, EventHandler, attributes, formatUnit, ChildProperty, remove, L10n, extend } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, prepend, Complex, closest, setValue, getValue, compile, append } from '@syncfusion/ej2-base';import { select, selectAll, isNullOrUndefined as isNOU, matches, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';import { Popup } from '@syncfusion/ej2-popups';import { TreeView, NodeSelectEventArgs, DataBoundEventArgs, FieldsSettingsModel, NodeClickEventArgs } from '@syncfusion/ej2-navigations';import { NodeCheckEventArgs, FailureEventArgs} from '@syncfusion/ej2-navigations';
 import {Mode,ExpandOn,TreeFilterType,SortOrder,DdtBeforeOpenEventArgs,DdtChangeEventArgs,DdtPopupEventArgs,DdtDataBoundEventArgs,DdtFilteringEventArgs,DdtFocusEventArgs,DdtKeyPressEventArgs,DdtSelectEventArgs} from "./drop-down-tree";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -393,7 +393,7 @@ export interface DropDownTreeModel extends ComponentModel{
     /**
      * Specifies whether to destroy the popup or to maintain it in DOM when it is closed.
      * When this property is set to false, then the popup will not be removed from DOM once it is closed.
-     * 
+     *
      * @default true
 
      */
@@ -488,91 +488,91 @@ export interface DropDownTreeModel extends ComponentModel{
     /**
      * Triggers when the data fetch request from the remote server fails.
      *
-     * @event
+     * @event actionFailure
      */
     actionFailure?: EmitType<Object>;
 
     /**
      * Fires when popup opens before animation.
      *
-     * @event
+     * @event beforeOpen
      */
     beforeOpen?: EmitType<DdtBeforeOpenEventArgs>;
 
     /**
      * Triggers when an item in a popup is selected or when the model value is changed by user.
      *
-     * @event
+     * @event change
      */
     change?: EmitType<DdtChangeEventArgs>;
 
     /**
      * Fires when popup close after animation completion.
      *
-     * @event
+     * @event close
      */
     close?: EmitType<DdtPopupEventArgs>;
 
     /**
      * Triggers when the Dropdown Tree input element gets focus-out.
      *
-     * @event
+     * @event blur
      */
     blur?: EmitType<Object>;
 
     /**
      * Triggers when the Dropdown Tree is created successfully.
      *
-     * @event
+     * @event created
      */
     created?: EmitType<Object>;
 
     /**
      * Triggers when data source is populated in the Dropdown Tree.
      *
-     * @event
+     * @event dataBound
      */
     dataBound?: EmitType<DdtDataBoundEventArgs>;
 
     /**
      * Triggers when the Dropdown Tree is destroyed successfully.
      *
-     * @event
+     * @event destroyed
      */
     destroyed?: EmitType<Object>;
 
     /**
      * Triggers on typing a character in the filter bar when the **allowFiltering** is enabled.
      *
-     * @event
+     * @event filtering
      */
     filtering?: EmitType<DdtFilteringEventArgs>;
 
     /**
      * Triggers when the Dropdown Tree input element is focused.
      *
-     * @event
+     * @event focus
      */
     focus?: EmitType<DdtFocusEventArgs>;
 
     /**
      * Triggers when key press is successful. It helps to customize the operations at key press.
      *
-     * @event
+     * @event keyPress
      */
     keyPress?: EmitType<DdtKeyPressEventArgs>;
 
     /**
      * Fires when popup opens after animation completion.
      *
-     * @event
+     * @event open
      */
     open?: EmitType<DdtPopupEventArgs>;
 
     /**
      * Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.
      *
-     * @event
+     * @event select
      */
     select?: EmitType<DdtSelectEventArgs>;
 

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

@@ -147,6 +147,10 @@ export interface DdtPopupEventArgs {
      * Specifies the pop-up object.
      */
     popup: Popup;
+    /**
+    * Determines whether the current popup close action needs to be prevented or not.
+    */
+    cancel?: boolean;
 }
 export interface DdtDataBoundEventArgs {
     /**
@@ -641,79 +645,79 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     /**
      * Triggers when the data fetch request from the remote server fails.
      *
-     * @event
+     * @event actionFailure
      */
     actionFailure: EmitType<Object>;
     /**
      * Fires when popup opens before animation.
      *
-     * @event
+     * @event beforeOpen
      */
     beforeOpen: EmitType<DdtBeforeOpenEventArgs>;
     /**
      * Triggers when an item in a popup is selected or when the model value is changed by user.
      *
-     * @event
+     * @event change
      */
     change: EmitType<DdtChangeEventArgs>;
     /**
      * Fires when popup close after animation completion.
      *
-     * @event
+     * @event close
      */
     close: EmitType<DdtPopupEventArgs>;
     /**
      * Triggers when the Dropdown Tree input element gets focus-out.
      *
-     * @event
+     * @event blur
      */
     blur: EmitType<Object>;
     /**
      * Triggers when the Dropdown Tree is created successfully.
      *
-     * @event
+     * @event created
      */
     created: EmitType<Object>;
     /**
      * Triggers when data source is populated in the Dropdown Tree.
      *
-     * @event
+     * @event dataBound
      */
     dataBound: EmitType<DdtDataBoundEventArgs>;
     /**
      * Triggers when the Dropdown Tree is destroyed successfully.
      *
-     * @event
+     * @event destroyed
      */
     destroyed: EmitType<Object>;
     /**
      * Triggers on typing a character in the filter bar when the **allowFiltering** is enabled.
      *
-     * @event
+     * @event filtering
      */
     filtering: EmitType<DdtFilteringEventArgs>;
     /**
      * Triggers when the Dropdown Tree input element is focused.
      *
-     * @event
+     * @event focus
      */
     focus: EmitType<DdtFocusEventArgs>;
     /**
      * Triggers when key press is successful. It helps to customize the operations at key press.
      *
-     * @event
+     * @event keyPress
      */
     keyPress: EmitType<DdtKeyPressEventArgs>;
     /**
      * Fires when popup opens after animation completion.
      *
-     * @event
+     * @event open
      */
     open: EmitType<DdtPopupEventArgs>;
     /**
      * Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.
      *
-     * @event
+     * @event select
      */
     select: EmitType<DdtSelectEventArgs>;
     constructor(options?: DropDownTreeModel, element?: string | HTMLElement);

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

@@ -17,6 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Input, TextBox } from '@syncfusion/ej2-inputs';
 import { createCheckBox } from '@syncfusion/ej2-buttons';
 import { NotifyPropertyChanges, Property, Event, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
@@ -413,7 +414,6 @@ var DropDownTree = /** @class */ (function (_super) {
                 if (args.text === '') {
                     _this.isFilteredData = false;
                     _this.isFilterRestore = true;
-                    _this.isFromFilterChange = false;
                     fields = _this.cloneFields(_this.fields);
                 }
                 else if (args.preventDefaultAction) {
@@ -498,8 +498,7 @@ var DropDownTree = /** @class */ (function (_super) {
     DropDownTree.prototype.nestedFilter = function (value, filteredFields) {
         var matchedDataSource = [];
         for (var i = 0; i < this.treeData.length; i++) {
-            // eslint-disable-next-line
-            var filteredChild = this.nestedChildFilter(value, this.treeData[i]);
+            var filteredChild = this.nestedChildFilter(value, this.treeData[parseInt(i.toString(), 10)]);
             if (!isNOU(filteredChild)) {
                 matchedDataSource.push(filteredChild);
             }
@@ -515,8 +514,7 @@ var DropDownTree = /** @class */ (function (_super) {
         else {
             var matchedChildren = [];
             for (var i = 0; i < children.length; i++) {
-                // eslint-disable-next-line
-                var filteredChild = this.nestedChildFilter(value, children[i]);
+                var filteredChild = this.nestedChildFilter(value, children[parseInt(i.toString(), 10)]);
                 if (!isNOU(filteredChild)) {
                     matchedChildren.push(filteredChild);
                 }
@@ -543,13 +541,11 @@ var DropDownTree = /** @class */ (function (_super) {
         for (var i = 0; i < matchedData.length; i++) {
             if (matchedDataSource.indexOf(matchedData[i]) === -1) {
                 matchedDataSource.push(matchedData[i]);
-                // eslint-disable-next-line
-                var parentId = matchedData[i][this.fields.parentValue];
+                var parentId = matchedData[parseInt(i.toString(), 10)][this.fields.parentValue];
                 while (!isNOU(parentId)) {
                     var parent_1 = null;
                     for (var j = 0; j < this.treeData.length; j++) {
-                        // eslint-disable-next-line
-                        var value_1 = this.treeData[j][this.fields.value];
+                        var value_1 = this.treeData[parseInt(j.toString(), 10)][this.fields.value];
                         if (!isNOU(value_1) && (value_1 === parentId)) {
                             parent_1 = this.treeData[j];
                             break;
@@ -643,6 +639,11 @@ var DropDownTree = /** @class */ (function (_super) {
         if (formElement) {
             EventHandler.remove(formElement, 'reset', this.resetValueHandler);
         }
+        this.keyboardModule.destroy();
+        if (this.showSelectAll && this.checkAllParent) {
+            EventHandler.remove(this.checkAllParent, 'mouseup', this.clickHandler);
+        }
+        EventHandler.remove(document, 'mousedown', this.onDocumentClick);
     };
     /* Trigger when the dropdown is clicked */
     DropDownTree.prototype.dropDownClick = function (e) {
@@ -917,6 +918,7 @@ var DropDownTree = /** @class */ (function (_super) {
             cancel: false,
             event: e
         };
+        var focusedElement;
         this.trigger('keyPress', eventArgs, function (observedArgs) {
             if (!observedArgs.cancel) {
                 switch (e.action) {
@@ -924,9 +926,10 @@ var DropDownTree = /** @class */ (function (_super) {
                         _this.clickHandler(e);
                         break;
                     case 'moveDown':
-                        var focusedElement = _this.treeObj.element.querySelector('li');
+                        focusedElement = _this.treeObj.element.querySelector('li');
                         focusedElement.focus();
                         addClass([focusedElement], ['e-node-focus']);
+                        break;
                 }
             }
         });
@@ -1085,8 +1088,7 @@ var DropDownTree = /** @class */ (function (_super) {
         return remainElement;
     };
     DropDownTree.prototype.getOverflowVal = function (index) {
-        // eslint-disable-next-line
-        var selectedData = this.getSelectedData(this.value[index]);
+        var selectedData = this.getSelectedData(this.value[parseInt(index.toString(), 10)]);
         return getValue(this.treeSettings.loadOnDemand ? this.fields.text : 'text', selectedData);
     };
     DropDownTree.prototype.updateDelimMode = function () {
@@ -1458,8 +1460,7 @@ var DropDownTree = /** @class */ (function (_super) {
         var data;
         if (this.treeDataType === 1) {
             for (var i = 0; i < this.treeItems.length; i++) {
-                // eslint-disable-next-line
-                var text = getValue(this.fields.text, this.treeItems[i]);
+                var text = getValue(this.fields.text, this.treeItems[parseInt(i.toString(), 10)]);
                 if (!isNOU(this.treeItems[i]) && !isNOU(text) && text === givenText) {
                     data = this.treeItems[i];
                     break;
@@ -1474,14 +1475,12 @@ var DropDownTree = /** @class */ (function (_super) {
     DropDownTree.prototype.getNestedItems = function (data, field, givenText) {
         var newData;
         for (var i = 0, objlen = data.length; i < objlen; i++) {
-            // eslint-disable-next-line
-            var dataId = getValue(this.fields.text, data[i]);
+            var dataId = getValue(this.fields.text, data[parseInt(i.toString(), 10)]);
             if (data[i] && dataId && dataId.toString() === givenText) {
                 return data[i];
             }
             else if (typeof field.child === 'string' && !isNOU(getValue(field.child, data[i]))) {
-                // eslint-disable-next-line
-                var childData = getValue(field.child, data[i]);
+                var childData = getValue(field.child, data[parseInt(i.toString(), 10)]);
                 newData = this.getNestedItems(childData, this.getChildType(field), givenText);
                 if (newData !== undefined) {
                     break;
@@ -1489,8 +1488,7 @@ var DropDownTree = /** @class */ (function (_super) {
             }
             else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', data[i]))) {
                 var child = 'child';
-                // eslint-disable-next-line
-                newData = this.getNestedItems(getValue(child, data[i]), this.getChildType(field), givenText);
+                newData = this.getNestedItems(getValue(child, data[parseInt(i.toString(), 10)]), this.getChildType(field), givenText);
                 if (newData !== undefined) {
                     break;
                 }
@@ -1580,12 +1578,12 @@ var DropDownTree = /** @class */ (function (_super) {
                     _this.setFooterTemplate();
                 }
                 _this.isFirstRender = false;
-                /* eslint-disable */
                 if (_this.hasTemplate && _this.portals) {
                     if (_this.treeObj.portals) {
-                        _this.portals = _this.portals.concat(_this.treeObj.portals.filter(function (item) { return !_this.portals.includes(item); }));
+                        _this.portals = _this.portals.concat(_this.treeObj.portals.filter(function (item) {
+                            return !_this.portals.includes(item);
+                        }));
                     }
-                    /* eslint-enable */
                     if (_this.isReact) {
                         _this.renderReactTemplates(_this.reactCallBack);
                     }
@@ -1608,7 +1606,7 @@ var DropDownTree = /** @class */ (function (_super) {
                     else {
                         var oldFocussedNode = _this.treeObj.element.querySelector('.e-node-focus');
                         focusedElement = _this.treeObj.element.querySelector('li:not(.e-disable):not(.e-prevent)');
-                        if (oldFocussedNode && oldFocussedNode != focusedElement) {
+                        if (oldFocussedNode && oldFocussedNode !== focusedElement) {
                             oldFocussedNode.setAttribute('tabindex', '-1');
                             removeClass([oldFocussedNode], 'e-node-focus');
                         }
@@ -1735,7 +1733,8 @@ var DropDownTree = /** @class */ (function (_super) {
         var isFooter = closest(target, '.' + FOOTER);
         var isScroller = target.classList.contains(DROPDOWN) ? true :
             (matches(target, '.e-ddt .e-popup') || matches(target, '.e-ddt .e-treeview'));
-        if ((this.isPopupOpen && ((!isNOU(this.inputWrapper) && this.inputWrapper.contains(target)) || isTree || isScroller || isHeader || isFooter)) ||
+        if ((this.isPopupOpen && ((!isNOU(this.inputWrapper) &&
+            this.inputWrapper.contains(target)) || isTree || isScroller || isHeader || isFooter)) ||
             ((this.allowMultiSelection || this.showCheckBox) && (this.isPopupOpen && target.classList.contains(CHIP_CLOSE) ||
                 (this.isPopupOpen && (target.classList.contains(CHECKALLPARENT) || target.classList.contains(ALLTEXT)
                     || target.classList.contains(CHECKBOXFRAME)))))) {
@@ -1762,7 +1761,9 @@ var DropDownTree = /** @class */ (function (_super) {
             removeClass([this.popupDiv], NODATA);
             this.hideCheckAll(false);
         }
-        this.treeDataType = this.getTreeDataType(this.treeItems, this.fields);
+        if (!this.isFilteredData) {
+            this.treeDataType = this.getTreeDataType(this.treeItems, this.fields);
+        }
         if (this.isFirstRender && this.isRemoteData) {
             this.setTreeValue();
             this.setTreeText();
@@ -1858,7 +1859,8 @@ var DropDownTree = /** @class */ (function (_super) {
                 dataSource: fields.dataSource, value: fields.value, text: fields.text, parentValue: fields.parentValue,
                 child: (fields.child ? this.cloneChildField(fields.child) : null), hasChildren: fields.hasChildren,
                 expanded: fields.expanded, iconCss: fields.iconCss, imageUrl: fields.imageUrl, htmlAttributes: fields.htmlAttributes,
-                query: fields.query, selected: fields.selected, selectable: fields.selectable, tableName: fields.tableName, tooltip: fields.tooltip
+                query: fields.query, selected: fields.selected, selectable: fields.selectable,
+                tableName: fields.tableName, tooltip: fields.tooltip
             };
             return clonedField;
         }
@@ -1912,7 +1914,8 @@ var DropDownTree = /** @class */ (function (_super) {
             if ((typeof field.child === 'string') && !isNOU(getValue(field.child, this.fields.dataSource[i]))) {
                 return 2;
             }
-            if (!isNOU(getValue(field.parentValue, this.fields.dataSource[i])) || !isNOU(getValue(field.hasChildren, this.fields.dataSource[i]))) {
+            if (!isNOU(getValue(field.parentValue, this.fields.dataSource[i])) ||
+                !isNOU(getValue(field.hasChildren, this.fields.dataSource[i]))) {
                 return 1;
             }
         }
@@ -2061,14 +2064,13 @@ var DropDownTree = /** @class */ (function (_super) {
             this.oldValue = this.value ? this.value.slice() : this.value;
         }
     };
-    DropDownTree.prototype.onNodeExpanded = function (args) {
+    DropDownTree.prototype.onNodeExpanded = function () {
         if (this.hasTemplate && this.portals && this.treeObj.portals) {
             for (var i = 0; i < this.treeObj.portals.length; i++) {
                 if (this.portals.indexOf(this.treeObj.portals[i]) === -1) {
                     this.portals.push(this.treeObj.portals[i]);
                 }
             }
-            /* eslint-enable */
             this.renderReactTemplates();
         }
     };
@@ -2164,7 +2166,7 @@ var DropDownTree = /** @class */ (function (_super) {
         if (!this.isFilteredData) {
             this.setProperties({ value: this.isFromFilterChange && newValues && newValues.length === 0 ? this.value : newValues }, true);
             this.isFromFilterChange = false;
-            if (newValues && newValues.length !== 0 && !this.showCheckBox) {
+            if (newValues && newValues.length !== 0 && !this.showCheckBox && !this.ddtCompareValues(this.treeObj.selectedNodes, this.value.slice())) {
                 this.treeObj.selectedNodes = this.value.slice();
                 this.treeObj.dataBind();
             }
@@ -2446,8 +2448,6 @@ var DropDownTree = /** @class */ (function (_super) {
     };
     DropDownTree.prototype.templateComplier = function (template) {
         if (template) {
-            // eslint-disable-next-line
-            var e = void 0;
             try {
                 if (typeof template !== 'function' && document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
@@ -2533,7 +2533,7 @@ var DropDownTree = /** @class */ (function (_super) {
         this.ensurePlaceHolder();
     };
     DropDownTree.prototype.resetValue = function (isDynamicChange) {
-        if (this.value === [] && this.text == null) {
+        if (Array.isArray(this.value) && this.value.length === 0 && this.text == null) {
             return;
         }
         Input.setValue(null, this.inputEle, this.floatLabelType);
@@ -2647,9 +2647,7 @@ var DropDownTree = /** @class */ (function (_super) {
     DropDownTree.prototype.updateTemplate = function () {
         if (this.popupObj) {
             this.clearTemplate();
-            /* eslint-disable */
             this.portals = [];
-            /* eslint-enable */
             this.popupObj.destroy();
             if (this.isPopupOpen) {
                 this.hidePopup();
@@ -3026,22 +3024,35 @@ var DropDownTree = /** @class */ (function (_super) {
         detach(this.inputWrapper);
         detach(this.popupDiv);
         detach(this.hiddenElement);
+        Input.setRipple(false, [this.inputObj]);
         this.element.classList.remove('e-input');
         if (this.showCheckBox || this.allowMultiSelection) {
             this.element.classList.remove(CHIP_INPUT);
         }
+        detach(this.inputObj.container);
+        if (this.inputObj.buttons.length) {
+            detach(this.inputObj.buttons[0]);
+        }
         this.inputObj = null;
         while (this.hiddenElement.options.length > 0) {
             this.hiddenElement.remove(0);
         }
         this.hiddenElement.innerHTML = '';
         this.hiddenElement = null;
+        this.inputWrapper.innerHTML = '';
         this.inputWrapper = null;
         this.popupDiv = null;
         this.tree = null;
         this.popupObj = null;
         this.treeObj = null;
         this.overAllClear = null;
+        if (this.chipCollection) {
+            var chipsIcons = selectAll('.e-chips-close', this.chipCollection);
+            for (var _i = 0, chipsIcons_1 = chipsIcons; _i < chipsIcons_1.length; _i++) {
+                var element = chipsIcons_1[_i];
+                EventHandler.remove(element, 'mousedown', this.removeChip);
+            }
+        }
         this.chipWrapper = null;
         this.chipCollection = null;
         this.checkAllParent = null;
@@ -3100,7 +3111,11 @@ var DropDownTree = /** @class */ (function (_super) {
      * @returns {void}
      */
     DropDownTree.prototype.hidePopup = function () {
-        var eventArgs = { popup: this.popupObj };
+        var eventArgs = { popup: this.popupObj, cancel: false };
+        this.trigger('close', eventArgs);
+        if (eventArgs.cancel) {
+            return;
+        }
         this.inputWrapper.classList.remove(ICONANIMATION);
         if (this.popupEle) {
             addClass([this.popupEle], DDTHIDEICON);
@@ -3114,7 +3129,6 @@ var DropDownTree = /** @class */ (function (_super) {
                     addClass([this.inputWrapper], [INPUTFOCUS]);
                 }
             }
-            this.trigger('close', eventArgs);
             if (this.destroyPopupOnHide) {
                 this.isFirstRender = true;
                 this.destroyPopup();

package/src/list-box/list-box.js

@@ -29,7 +29,6 @@ import { cssClass, Sortable, moveTo } from '@syncfusion/ej2-lists';
 import { Button } from '@syncfusion/ej2-buttons';
 import { createSpinner, showSpinner, hideSpinner, getZindexPartial } from '@syncfusion/ej2-popups';
 import { DataManager, Query } from '@syncfusion/ej2-data';
-var ITEMTEMPLATE_PROPERTY = 'ItemTemplate';
 /**
  * Defines the Selection settings of List Box.
  */
@@ -145,6 +144,7 @@ var ListBox = /** @class */ (function (_super) {
         var hiddenSelect = this.createElement('select', { className: 'e-hidden-select', attrs: { 'multiple': '' } });
         hiddenSelect.style.visibility = 'hidden';
         this.list.classList.add('e-listbox-wrapper');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.list.querySelector('.e-list-parent').setAttribute('role', 'presentation');
         var groupHdrs = this.list.querySelectorAll('.e-list-group-item');
         for (var i = 0; i < groupHdrs.length; i++) {
@@ -163,7 +163,7 @@ var ListBox = /** @class */ (function (_super) {
             }
         }
         else {
-            if (this.initLoad) {
+            if (this.initLoad && this.element.parentElement) {
                 this.element.parentElement.insertBefore(this.list, this.element);
             }
             this.list.insertBefore(this.element, this.list.firstChild);
@@ -231,6 +231,7 @@ var ListBox = /** @class */ (function (_super) {
     ListBox.prototype.initToolbar = function () {
         var pos = this.toolbarSettings.position;
         var prevScope = this.element.getAttribute('data-value');
+        this.toolbarSettings.items = isNullOrUndefined(this.toolbarSettings.items) ? [] : this.toolbarSettings.items;
         if (this.toolbarSettings.items.length) {
             var toolElem = this.createElement('div', { className: 'e-listbox-tool', attrs: { 'role': 'toolbar' } });
             var wrapper = this.createElement('div', {
@@ -325,7 +326,9 @@ var ListBox = /** @class */ (function (_super) {
             this.spinner = this.createElement('div', { className: 'e-listbox-wrapper' });
         }
         this.spinner.style.height = formatUnit(this.height);
-        this.element.parentElement.insertBefore(this.spinner, this.element.nextSibling);
+        if (this.element.parentElement) {
+            this.element.parentElement.insertBefore(this.spinner, this.element.nextSibling);
+        }
         createSpinner({ target: this.spinner }, this.createElement);
         showSpinner(this.spinner);
     };
@@ -631,7 +634,7 @@ var ListBox = /** @class */ (function (_super) {
             }
             var fListData_1 = [].slice.call(this.listData);
             var fSortData_1 = [].slice.call(this.sortedData);
-            selectedOptions.forEach(function (value, index) {
+            selectedOptions.forEach(function (value) {
                 droppedData = _this.getDataByValue(value);
                 var srcIdx = _this.listData.indexOf(droppedData);
                 var jsonSrcIdx = _this.jsonData.indexOf(droppedData);
@@ -1182,6 +1185,10 @@ var ListBox = /** @class */ (function (_super) {
         }
     };
     ListBox.prototype.clickHandler = function (e) {
+        var li = closest(e.target, '.' + 'e-list-item');
+        if (isNullOrUndefined(li)) {
+            return;
+        }
         this.selectHandler(e);
     };
     ListBox.prototype.checkSelectAll = function () {
@@ -1674,6 +1681,7 @@ var ListBox = /** @class */ (function (_super) {
         }
         var _loop_3 = function (i) {
             if (fListBox.ulElement.childNodes[i].classList.contains('e-disabled')) {
+                // eslint-disable-next-line @typescript-eslint/tslint/config
                 flistboxarray = flistboxarray.filter(function (item) { return item !== i; });
                 tempLiColl.push(fListBox.ulElement.childNodes[i]);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2094,7 +2102,9 @@ var ListBox = /** @class */ (function (_super) {
             });
         }
     };
-    ListBox.prototype.setSelection = function (values, isSelect, isText, canFocus) {
+    ListBox.prototype.setSelection = function (
+    // eslint-disable-next-line max-len
+    values, isSelect, isText, canFocus) {
         var _this = this;
         if (values === void 0) { values = this.value; }
         if (isSelect === void 0) { isSelect = true; }
@@ -2119,21 +2129,21 @@ var ListBox = /** @class */ (function (_super) {
                     li = _this.list.querySelector('[data-value="' + text + '"]');
                 }
                 if (li) {
-                    if (_this.selectionSettings.showCheckbox) {
+                    if (_this.selectionSettings.showCheckbox && !li.classList.contains('e-disabled')) {
                         liselect = li.getElementsByClassName('e-frame')[0].classList.contains('e-check');
                     }
                     else {
                         liselect = li.classList.contains('e-selected');
                     }
                     if (!isSelect && liselect || isSelect && !liselect && li) {
-                        if (_this.selectionSettings.showCheckbox) {
+                        if (_this.selectionSettings.showCheckbox && !li.classList.contains('e-disabled')) {
                             _this.notify('updatelist', { li: li, module: 'listbox' });
                             if (canFocus) {
                                 li.focus();
                             }
                         }
                         else {
-                            if (isSelect) {
+                            if (isSelect && !li.classList.contains('e-disabled')) {
                                 li.classList.add(cssClass.selected);
                                 li.setAttribute('aria-selected', 'true');
                                 if (canFocus) {
@@ -2167,7 +2177,17 @@ var ListBox = /** @class */ (function (_super) {
         this.checkSelectAll();
     };
     ListBox.prototype.checkDisabledState = function (inst) {
-        return inst.ulElement.querySelectorAll('.' + cssClass.li).length === 0;
+        if (isNullOrUndefined(inst.ulElement)) {
+            if (!isNullOrUndefined(this.dataSource) && isNullOrUndefined(this.dataSource.length)) {
+                return false;
+            }
+            else {
+                return true;
+            }
+        }
+        else {
+            return inst.ulElement.querySelectorAll('.' + cssClass.li).length === 0;
+        }
     };
     ListBox.prototype.updateToolBarState = function () {
         var _this = this;
@@ -2405,6 +2425,7 @@ var ListBox = /** @class */ (function (_super) {
                         }
                     }
                     if (newProp.toolbarSettings.items) {
+                        oldProp.toolbarSettings.items = isNullOrUndefined(oldProp.toolbarSettings.items) ? [] : oldProp.toolbarSettings.items;
                         if (oldProp.toolbarSettings && oldProp.toolbarSettings.items.length) {
                             ele = this.list.parentElement;
                             ele.parentElement.insertBefore(this.list, ele);