@syncfusion/ej2-dropdowns 25.2.7-130084 → 26.1.35-7502

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 {
     /**
@@ -560,7 +564,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
      * When this property is set to false, then the popup will not be removed from DOM once it is closed.
      *
      * @default true
-     * @deprecated
+
      */
     destroyPopupOnHide: boolean;
     /**
@@ -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-model.d.ts

@@ -97,7 +97,7 @@ export interface ListBoxModel extends DropDownBaseModel{
      * Specifies a value that indicates whether the component is enabled or not.
      *
      * @default true
-     * @deprecated
+
      */
     enabled?: boolean;
 
@@ -107,7 +107,7 @@ export interface ListBoxModel extends DropDownBaseModel{
      * 1. value
      *
      * @default false
-     * @deprecated
+
      */
     enablePersistence?: boolean;
 

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

@@ -161,7 +161,7 @@ export declare class ListBox extends DropDownBase {
      * Specifies a value that indicates whether the component is enabled or not.
      *
      * @default true
-     * @deprecated
+
      */
     enabled: boolean;
     /**
@@ -170,7 +170,7 @@ export declare class ListBox extends DropDownBase {
      * 1. value
      *
      * @default false
-     * @deprecated
+
      */
     enablePersistence: boolean;
     /**

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);

package/src/mention/mention.js

@@ -296,6 +296,9 @@ var Mention = /** @class */ (function (_super) {
         }
     };
     Mention.prototype.updateUpDownAction = function (e) {
+        if (this.fields.disabled && this.list && this.list.querySelectorAll('.e-list-item:not(.e-disabled)').length === 0) {
+            return;
+        }
         var focusEle = this.list.querySelector('.' + dropDownBaseClasses.focus);
         if (this.isSelectFocusItem(focusEle)) {
             this.setSelection(focusEle, e);
@@ -316,6 +319,17 @@ var Mention = /** @class */ (function (_super) {
                 this.setSelection(nextItem, e);
             }
         }
+        var itemIndex;
+        for (var index = 0; index < this.liCollections.length; index++) {
+            if (this.liCollections[index].classList.contains(dropDownBaseClasses.focus)
+                || this.liCollections[index].classList.contains(dropDownBaseClasses.selected)) {
+                itemIndex = index;
+                break;
+            }
+        }
+        if (itemIndex != null && this.isDisabledElement(this.liCollections[itemIndex])) {
+            this.updateUpDownAction(e);
+        }
         if (this.isPopupOpen) {
             e.preventDefault();
         }
@@ -491,7 +505,7 @@ var Mention = /** @class */ (function (_super) {
             if (!isNullOrUndefined(ulElement)) {
                 attributes(ulElement, { 'id': this.inputElement.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
             }
-            var focusItem = ulElement.querySelector('.' + dropDownBaseClasses.li);
+            var focusItem = this.fields.disabled ? ulElement.querySelector('.' + dropDownBaseClasses.li + ':not(.e-disabled)') : ulElement.querySelector('.' + dropDownBaseClasses.li);
             if (focusItem) {
                 focusItem.classList.add(dropDownBaseClasses.selected);
                 this.selectedLI = focusItem;
@@ -720,10 +734,10 @@ var Mention = /** @class */ (function (_super) {
                     }
                 }
                 append([_this.list], popupEle_1);
-                if (_this.inputElement.parentElement && _this.inputElement.parentElement.parentElement &&
-                    _this.inputElement.parentElement.parentElement.classList.contains('e-richtexteditor')) {
-                    if (popupEle_1.firstElementChild && popupEle_1.firstElementChild.childElementCount > 0) {
-                        popupEle_1.firstElementChild.setAttribute('aria-owns', _this.inputElement.parentElement.parentElement.id);
+                if (_this.inputElement.parentElement) {
+                    var rteRootElement = _this.inputElement.parentElement.closest('.e-richtexteditor');
+                    if (rteRootElement && popupEle_1.firstElementChild && popupEle_1.firstElementChild.childElementCount > 0) {
+                        popupEle_1.firstElementChild.setAttribute('aria-owns', rteRootElement.id);
                         addClass([popupEle_1], 'e-rte-elements');
                     }
                 }
@@ -1026,7 +1040,7 @@ var Mention = /** @class */ (function (_super) {
     Mention.prototype.onMouseClick = function (e) {
         var target = e.target;
         var li = closest(target, '.' + dropDownBaseClasses.li);
-        if (!this.isValidLI(li)) {
+        if (!this.isValidLI(li) || this.isDisabledElement(li)) {
             return;
         }
         this.isSelected = true;
@@ -1257,6 +1271,7 @@ var Mention = /** @class */ (function (_super) {
             }
             this.isTyped = false;
             range.deleteContents();
+            range.startContainer.parentElement.normalize();
             var element = this.createElement('div');
             element.innerHTML = value;
             var frag = document.createDocumentFragment();
@@ -1293,10 +1308,10 @@ var Mention = /** @class */ (function (_super) {
         }
         if (this.isContentEditable(this.inputElement)) {
             if (Browser.isAndroid) {
-                return '<span contenteditable="true" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
+                return '<span contenteditable="true" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : '');
             }
             else {
-                return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
+                return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : '');
             }
         }
         else {

package/src/multi-select/interface.js

@@ -1 +0,0 @@
-