@syncfusion/ej2-dropdowns 25.2.7 → 26.1.38

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 () {
@@ -1450,6 +1452,9 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         this.currentText = this.text;
         this.currentValue = this.value;
+        if (!isNOU(this.value) && this.value.length > 0 && !isNOU(this.currentText)) {
+            this.inputWrapper.setAttribute('aria-label', this.currentText.split(',').join(' '));
+        }
         if (this.isInitialized) {
             this.triggerChangeEvent();
         }
@@ -1458,8 +1463,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 +1478,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 +1491,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 +1581,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 +1609,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 +1736,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 +1764,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 +1862,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 +1917,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;
             }
         }
@@ -1989,6 +1995,9 @@ var DropDownTree = /** @class */ (function (_super) {
                 this.setProperties({ text: selectedText }, true);
                 this.currentText = this.text;
                 this.currentValue = this.value;
+                if (!isNOU(this.value) && this.value.length > 0) {
+                    this.inputWrapper.setAttribute('aria-label', args.nodeData.text.toString());
+                }
                 attributes(this.inputWrapper, { 'aria-describedby': this.element.id });
                 attributes(this.inputWrapper, { 'aria-activedescendant': id.toString() });
                 this.updateHiddenValue();
@@ -2061,14 +2070,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 +2172,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();
             }
@@ -2359,6 +2367,12 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         this.currentText = this.text;
         this.currentValue = this.value;
+        if (!isNOU(this.value) && this.value.length > 0 && !isNOU(this.currentText)) {
+            this.inputWrapper.setAttribute('aria-label', this.currentText.split(',').join(' '));
+        }
+        else {
+            this.inputWrapper.setAttribute('aria-label', this.getModuleName());
+        }
     };
     DropDownTree.prototype.setChipValues = function (text, value) {
         if (!this.inputWrapper.contains(this.chipWrapper)) {
@@ -2446,8 +2460,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 +2545,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);
@@ -2541,6 +2553,9 @@ var DropDownTree = /** @class */ (function (_super) {
             this.oldValue = this.value;
             this.setProperties({ value: [] }, true);
         }
+        if (isNOU(this.value) || this.value.length === 0) {
+            this.inputWrapper.setAttribute('aria-label', this.getModuleName());
+        }
         this.dataValue = null;
         this.setProperties({ text: null }, true);
         this.selectedData = [];
@@ -2647,9 +2662,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 +3039,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 +3126,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 +3144,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.d.ts

@@ -583,6 +583,7 @@ export declare class ListBox extends DropDownBase {
     protected targetElement(): string;
     private dataUpdater;
     private focusOutHandler;
+    private resizeHandler;
     private getValidIndex;
     private updateSelectedOptions;
     private clearSelection;