@syncfusion/ej2-dropdowns 24.2.9 → 25.1.35

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

@@ -17,7 +17,6 @@ export interface FieldsModel {
      *
      * @default []
      */
-    /* eslint-disable */
     dataSource?: DataManager | { [key: string]: Object }[];
 
     /**
@@ -59,8 +58,8 @@ export interface FieldsModel {
     query?: Query;
 
     /**
-     * Specifies whether the node can be selected by users or not 
-     * When set to false, the user interaction is prevented for the corresponding node. 
+     * Specifies whether the node can be selected by users or not
+     * When set to false, the user interaction is prevented for the corresponding node.
      */
     selectable?: string;
 
@@ -179,7 +178,7 @@ export interface DropDownTreeModel extends ComponentModel{
     cssClass?: string;
 
     /**
-     * This property is used to customize the display text of the selected items in the Dropdown Tree. The given custom template is 
+     * This property is used to customize the display text of the selected items in the Dropdown Tree. The given custom template is
      * added to the input instead of the selected item text in the Dropdown Tree when the multi-selection or checkbox support is enabled.
      *
      * @default "${value.length} item(s) selected"
@@ -328,7 +327,7 @@ export interface DropDownTreeModel extends ComponentModel{
      * * Delimiter : Selected items will be visualized in the text content.
      * * Default : On focus in component will act in the box mode. On blur component will act in the delimiter mode.
      * * Custom : Selected items will be visualized with the given custom template value. The given custom template
-     *  is added to the input instead of the selected item text in the Dropdown Tree when the multi-selection or checkbox support is enabled. 
+     *  is added to the input instead of the selected item text in the Dropdown Tree when the multi-selection or checkbox support is enabled.
      */
     mode?: Mode;
 
@@ -392,10 +391,19 @@ export interface DropDownTreeModel extends ComponentModel{
     showCheckBox?: boolean;
 
     /**
-     * Specifies whether to allow rendering of untrusted HTML values in the Dropdown Tree component.
-     * While enable this property, it sanitize suspected untrusted strings and script, and update in the Dropdown Tree component.
+     * 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 false
+     * @default true
+
+     */
+    destroyPopupOnHide?: boolean;
+
+    /**
+     * Specifies whether to display or remove the untrusted HTML values in the Dropdown Tree component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
+     *
+     * @default true
      */
     enableHtmlSanitizer?: boolean;
 
@@ -482,7 +490,6 @@ export interface DropDownTreeModel extends ComponentModel{
      *
      * @event
      */
-    /* eslint-disable */
     actionFailure?: EmitType<Object>;
 
     /**
@@ -511,7 +518,6 @@ export interface DropDownTreeModel extends ComponentModel{
      *
      * @event
      */
-    /* eslint-disable */
     blur?: EmitType<Object>;
 
     /**
@@ -519,7 +525,6 @@ export interface DropDownTreeModel extends ComponentModel{
      *
      * @event
      */
-    /* eslint-disable */
     created?: EmitType<Object>;
 
     /**
@@ -534,7 +539,6 @@ export interface DropDownTreeModel extends ComponentModel{
      *
      * @event
      */
-    /* eslint-disable */
     destroyed?: EmitType<Object>;
 
     /**

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

@@ -556,10 +556,18 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
      */
     showCheckBox: boolean;
     /**
-     * Specifies whether to allow rendering of untrusted HTML values in the Dropdown Tree component.
-     * While enable this property, it sanitize suspected untrusted strings and script, and update in the Dropdown Tree component.
+     * 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 false
+     * @default true
+
+     */
+    destroyPopupOnHide: boolean;
+    /**
+     * Specifies whether to display or remove the untrusted HTML values in the Dropdown Tree component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
+     *
+     * @default true
      */
     enableHtmlSanitizer: boolean;
     /**
@@ -790,6 +798,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private getChildType;
     private renderTree;
     private renderPopup;
+    private reactCallBack;
     private updatePopupHeight;
     private createPopup;
     private setElementWidth;
@@ -877,6 +886,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
      */
     destroy(): void;
     private destroyFilter;
+    private destroyPopup;
     /**
      * Ensures visibility of the Dropdown Tree item by using item value or item element.
      * If many Dropdown Tree items are present, and we are in need to find a particular item, then the `ensureVisible` property

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

@@ -164,7 +164,6 @@ var DropDownTree = /** @class */ (function (_super) {
         _this.filterTimer = null;
         _this.isFilteredData = false;
         _this.isFilterRestore = false;
-        // eslint-disable-next-line
         _this.selectedData = [];
         _this.filterDelayTime = 300;
         _this.isClicked = false;
@@ -262,7 +261,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 this.inputEle.setAttribute('aria-expanded', 'false');
                 this.inputEle.setAttribute('role', 'combobox');
                 this.inputEle.setAttribute('aria-haspopup', 'tree');
-                this.inputEle.setAttribute('aria-controls', this.element.id + "_options");
+                this.inputEle.setAttribute('aria-controls', this.element.id + '_options');
             }
             if (isNOU(this.inputEle.getAttribute('type'))) {
                 this.inputEle.setAttribute('type', 'text');
@@ -305,7 +304,9 @@ var DropDownTree = /** @class */ (function (_super) {
         this.popupDiv.classList.add(DROPDOWN);
         this.tree = this.createElement('div', { id: this.element.id + '_tree' });
         this.popupDiv.appendChild(this.tree);
-        document.body.appendChild(this.popupDiv);
+        if (!this.destroyPopupOnHide) {
+            document.body.appendChild(this.popupDiv);
+        }
         this.wireTreeEvents();
         addClass([this.popupDiv], DDTHIDEICON);
         this.renderTree();
@@ -412,6 +413,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 if (value === '') {
                     _this.isFilteredData = false;
                     _this.isFilterRestore = true;
+                    _this.isFromFilterChange = false;
                     fields = _this.cloneFields(_this.fields);
                 }
                 else if (args.preventDefaultAction) {
@@ -450,7 +452,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 _this.treeObj.dataBind();
                 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) {
+                        if (_this.portals.indexOf(_this.treeObj.portals[i]) === -1) {
                             _this.portals.push(_this.treeObj.portals[i]);
                         }
                     }
@@ -494,7 +496,6 @@ var DropDownTree = /** @class */ (function (_super) {
         return filteredItems;
     };
     DropDownTree.prototype.nestedFilter = function (value, filteredFields) {
-        // eslint-disable-next-line
         var matchedDataSource = [];
         for (var i = 0; i < this.treeData.length; i++) {
             // eslint-disable-next-line
@@ -506,15 +507,12 @@ var DropDownTree = /** @class */ (function (_super) {
         filteredFields.dataSource = matchedDataSource;
         return filteredFields;
     };
-    // eslint-disable-next-line
     DropDownTree.prototype.nestedChildFilter = function (value, node) {
-        // eslint-disable-next-line
         var children = node[this.fields.child];
         if (isNOU(children)) {
             return (this.isMatchedNode(value, node)) ? node : null;
         }
         else {
-            // eslint-disable-next-line
             var matchedChildren = [];
             for (var i = 0; i < children.length; i++) {
                 // eslint-disable-next-line
@@ -535,9 +533,7 @@ var DropDownTree = /** @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.selfReferencefilter = function (value, filteredFields) {
-        // eslint-disable-next-line
         var matchedData = [];
-        // eslint-disable-next-line
         var matchedDataSource = [];
         for (var i = 0; i < this.treeData.length; i++) {
             if (this.isMatchedNode(value, this.treeData[i])) {
@@ -550,7 +546,6 @@ var DropDownTree = /** @class */ (function (_super) {
                 // eslint-disable-next-line
                 var parentId = matchedData[i][this.fields.parentValue];
                 while (!isNOU(parentId)) {
-                    // eslint-disable-next-line
                     var parent_1 = null;
                     for (var j = 0; j < this.treeData.length; j++) {
                         // eslint-disable-next-line
@@ -573,7 +568,6 @@ var DropDownTree = /** @class */ (function (_super) {
         filteredFields.dataSource = matchedDataSource;
         return filteredFields;
     };
-    // eslint-disable-next-line
     DropDownTree.prototype.isMatchedNode = function (value, node, isChild, isChildFiltering) {
         var checkValue;
         var isObjectValue = isChild && isChildFiltering && this.isChildObject();
@@ -969,7 +963,6 @@ var DropDownTree = /** @class */ (function (_super) {
             var remaining = void 0;
             var downIconWidth = 0;
             this.overFlowWrapper.innerHTML = '';
-            // eslint-disable-next-line
             var l10nLocale = { overflowCountTemplate: '+${count} more..', totalCountTemplate: '${count} selected' };
             this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
             var remainContent = this.l10n.getConstant('overflowCountTemplate');
@@ -1252,7 +1245,6 @@ var DropDownTree = /** @class */ (function (_super) {
         if (this.selectAllText !== 'Select All' || this.unSelectAllText !== 'Unselect All') {
             var template = unSelect ? this.unSelectAllText : this.selectAllText;
             this.selectAllSpan.textContent = '';
-            // eslint-disable-next-line
             var compiledString = compile(template);
             var templateName = unSelect ? 'unSelectAllText' : 'selectAllText';
             for (var _i = 0, _a = compiledString({}, this, templateName, null, !this.isStringTemplate); _i < _a.length; _i++) {
@@ -1278,11 +1270,11 @@ var DropDownTree = /** @class */ (function (_super) {
                 if (htmlAttr === 'class') {
                     this.inputWrapper.classList.add(this.htmlAttributes["" + htmlAttr]);
                 }
-                else if (htmlAttr === 'disabled' && this.htmlAttributes["" + htmlAttr] === 'disabled') {
+                else if (htmlAttr === 'disabled') {
                     this.setProperties({ enabled: false }, true);
                     this.setEnable();
                 }
-                else if (htmlAttr === 'readonly' && !isNOU(this.htmlAttributes["" + htmlAttr])) {
+                else if (htmlAttr === 'readonly') {
                     this.setProperties({ readonly: true }, true);
                     this.dataBind();
                 }
@@ -1342,7 +1334,6 @@ var DropDownTree = /** @class */ (function (_super) {
     };
     DropDownTree.prototype.setTreeValue = function () {
         if (this.value !== null && this.value.length !== 0) {
-            // eslint-disable-next-line
             var data = void 0;
             if (this.showCheckBox || this.allowMultiSelection) {
                 for (var i = 0; i < this.value.length; i++) {
@@ -1372,7 +1363,6 @@ var DropDownTree = /** @class */ (function (_super) {
             return;
         }
         if (this.text !== null) {
-            // eslint-disable-next-line
             var data = void 0;
             var valArr = [];
             if (this.showCheckBox || this.allowMultiSelection) {
@@ -1463,9 +1453,7 @@ var DropDownTree = /** @class */ (function (_super) {
             this.triggerChangeEvent();
         }
     };
-    // eslint-disable-next-line
     DropDownTree.prototype.getItems = function (givenText) {
-        // eslint-disable-next-line
         var data;
         if (this.treeDataType === 1) {
             for (var i = 0; i < this.treeItems.length; i++) {
@@ -1482,9 +1470,7 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         return data;
     };
-    // eslint-disable-next-line
     DropDownTree.prototype.getNestedItems = function (data, field, givenText) {
-        // eslint-disable-next-line
         var newData;
         for (var i = 0, objlen = data.length; i < objlen; i++) {
             // eslint-disable-next-line
@@ -1495,7 +1481,6 @@ var DropDownTree = /** @class */ (function (_super) {
             else if (typeof field.child === 'string' && !isNOU(getValue(field.child, data[i]))) {
                 // eslint-disable-next-line
                 var childData = getValue(field.child, data[i]);
-                // eslint-disable-next-line
                 newData = this.getNestedItems(childData, this.getChildType(field), givenText);
                 if (newData !== undefined) {
                     break;
@@ -1538,7 +1523,7 @@ var DropDownTree = /** @class */ (function (_super) {
             nodeTemplate: this.itemTemplate
         });
         this.treeObj.root = this.root ? this.root : this;
-        this.treeObj.appendTo('#' + this.tree.id);
+        this.treeObj.appendTo(this.tree);
     };
     /* To render the popup element */
     DropDownTree.prototype.renderPopup = function () {
@@ -1596,9 +1581,13 @@ var DropDownTree = /** @class */ (function (_super) {
                 _this.isFirstRender = false;
                 /* eslint-disable */
                 if (_this.hasTemplate && _this.portals) {
-                    _this.portals = _this.portals.concat(_this.treeObj.portals);
+                    if (_this.treeObj.portals) {
+                        _this.portals = _this.portals.concat(_this.treeObj.portals.filter(function (item) { return !_this.portals.includes(item); }));
+                    }
                     /* eslint-enable */
-                    _this.renderReactTemplates();
+                    if (_this.isReact) {
+                        _this.renderReactTemplates(_this.reactCallBack);
+                    }
                 }
             }
             if (!isCancelled) {
@@ -1609,7 +1598,15 @@ var DropDownTree = /** @class */ (function (_super) {
                 _this.popupObj.refreshPosition();
                 if (!(_this.showCheckBox && _this.showSelectAll) && (!_this.popupDiv.classList.contains(NODATA)
                     && _this.treeItems.length > 0)) {
-                    var focusedElement = _this.treeObj.element.querySelector('li');
+                    var focusedElement = void 0;
+                    if (_this.value != null && _this.text != null) {
+                        _this.treeObj.element.querySelector('li').setAttribute('tabindex', '-1');
+                        focusedElement = _this.treeObj.element.querySelector('[data-uid="' + _this.value[0] + '"]');
+                        focusedElement.setAttribute('tabindex', '0');
+                    }
+                    else {
+                        focusedElement = _this.treeObj.element.querySelector('li');
+                    }
                     focusedElement.focus();
                     addClass([focusedElement], ['e-node-focus']);
                 }
@@ -1627,6 +1624,10 @@ var DropDownTree = /** @class */ (function (_super) {
             }
         });
     };
+    DropDownTree.prototype.reactCallBack = function () {
+        this.updatePopupHeight();
+        this.popupObj.refreshPosition();
+    };
     DropDownTree.prototype.updatePopupHeight = function () {
         if (this.isFirstRender) {
             return;
@@ -1885,7 +1886,6 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         return null;
     };
-    // eslint-disable-next-line
     DropDownTree.prototype.getTreeDataType = function (ds, field) {
         if (this.fields.dataSource instanceof DataManager) {
             for (var i = 0; i < ds.length; i++) {
@@ -1895,8 +1895,9 @@ var DropDownTree = /** @class */ (function (_super) {
             }
             return 2;
         }
-        if (isNOU(this.fields.dataSource))
+        if (isNOU(this.fields.dataSource)) {
             this.fields.dataSource = [];
+        }
         for (var i = 0, len = this.fields.dataSource.length; i < len; i++) {
             if ((typeof field.child === 'string') && !isNOU(getValue(field.child, this.fields.dataSource[i]))) {
                 return 2;
@@ -1917,9 +1918,7 @@ var DropDownTree = /** @class */ (function (_super) {
         this.treeObj.dataBind();
     };
     DropDownTree.prototype.getEventArgs = function (args) {
-        // eslint-disable-next-line
         var checkData = args.data;
-        // eslint-disable-next-line
         var selectData = args.nodeData;
         var state;
         if (this.showCheckBox) {
@@ -2004,7 +2003,6 @@ var DropDownTree = /** @class */ (function (_super) {
         var target = args.event.target;
         if ((target.classList.contains('e-fullrow') || target.classList.contains('e-list-text')) && this.showCheckBox) {
             this.isClicked = true;
-            // eslint-disable-next-line
             var getNodeDetails = this.treeObj.getNode(args.node);
             if (getNodeDetails.isChecked === 'true') {
                 this.treeObj.uncheckAll([args.node]);
@@ -2056,7 +2054,7 @@ var DropDownTree = /** @class */ (function (_super) {
     DropDownTree.prototype.onNodeExpanded = function (args) {
         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) {
+                if (this.portals.indexOf(this.treeObj.portals[i]) === -1) {
                     this.portals.push(this.treeObj.portals[i]);
                 }
             }
@@ -2154,7 +2152,7 @@ var DropDownTree = /** @class */ (function (_super) {
     };
     DropDownTree.prototype.setMultiSelectValue = function (newValues) {
         if (!this.isFilteredData) {
-            this.setProperties({ value: this.isFromFilterChange && newValues && newValues.length == 0 ? this.value : newValues }, true);
+            this.setProperties({ value: this.isFromFilterChange && newValues && newValues.length === 0 ? this.value : newValues }, true);
             this.isFromFilterChange = false;
             if (newValues && newValues.length !== 0 && !this.showCheckBox) {
                 this.treeObj.selectedNodes = this.value.slice();
@@ -2204,9 +2202,7 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         this.updateSelectedValues();
     };
-    // eslint-disable-next-line
     DropDownTree.prototype.getSelectedData = function (value) {
-        // eslint-disable-next-line
         var data = null;
         if (this.isFilteredData) {
             for (var i = 0; i < this.selectedData.length; i++) {
@@ -2293,7 +2289,6 @@ var DropDownTree = /** @class */ (function (_super) {
         var temp;
         var text;
         var textValue = '';
-        // eslint-disable-next-line
         var selectedData;
         this.hiddenElement.innerHTML = '';
         var hiddenInputValue = '';
@@ -2389,7 +2384,7 @@ var DropDownTree = /** @class */ (function (_super) {
             addClass([this.inputWrapper], SHOW_CHIP);
         }
         var chip = this.createElement('span', {
-            className: CHIP,
+            className: CHIP
         });
         if (!this.inputEle.classList.contains(CHIP_INPUT)) {
             addClass([this.inputEle], CHIP_INPUT);
@@ -2431,7 +2426,6 @@ var DropDownTree = /** @class */ (function (_super) {
             this.header = this.createElement('div');
             addClass([this.header], HEADER);
         }
-        // eslint-disable-next-line
         var compiledString = this.templateComplier(this.headerTemplate);
         var tempArr = compiledString({}, this, 'headerTemplate', this.headerTemplateId, this.isStringTemplate, undefined, this.header);
         if (tempArr) {
@@ -2440,7 +2434,6 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         this.popupEle.insertBefore(this.header, this.checkAllParent ? this.checkAllParent : this.popupDiv);
     };
-    // eslint-disable-next-line
     DropDownTree.prototype.templateComplier = function (template) {
         if (template) {
             // eslint-disable-next-line
@@ -2467,7 +2460,6 @@ var DropDownTree = /** @class */ (function (_super) {
             this.footer = this.createElement('div');
             addClass([this.footer], FOOTER);
         }
-        // eslint-disable-next-line
         var compiledString = this.templateComplier(this.footerTemplate);
         var tempArr = compiledString({}, this, 'footerTemplate', this.footerTemplateId, this.isStringTemplate, undefined, this.footer);
         if (tempArr) {
@@ -2526,7 +2518,7 @@ var DropDownTree = /** @class */ (function (_super) {
         this.ensurePlaceHolder();
     };
     DropDownTree.prototype.resetValue = function (isDynamicChange) {
-        if (this.value == [] && this.text == null) {
+        if (this.value === [] && this.text == null) {
             return;
         }
         Input.setValue(null, this.inputEle, this.floatLabelType);
@@ -2665,7 +2657,6 @@ var DropDownTree = /** @class */ (function (_super) {
             var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;
             var templateId = actionFailure ? this.actionFailureTemplateId : this.noRecordsTemplateId;
             var templatestring = actionFailure ? 'actionFailureTemplate' : 'noRecordsTemplate';
-            // eslint-disable-next-line
             var compiledString = this.templateComplier(template);
             var tempArr = compiledString({}, this, templatestring, templateId, this.isStringTemplate, undefined, this.noRecord);
             if (tempArr) {
@@ -2674,7 +2665,6 @@ var DropDownTree = /** @class */ (function (_super) {
             }
         }
         else {
-            // eslint-disable-next-line
             var l10nLocale = { noRecordsTemplate: 'No Records Found', actionFailureTemplate: 'The Request Failed' };
             this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
             this.noRecord.innerHTML = actionFailure ?
@@ -2906,10 +2896,10 @@ var DropDownTree = /** @class */ (function (_super) {
                     this.updateTreeSettings(newProp);
                     break;
                 case 'customTemplate':
-                    if (this.mode !== "Custom") {
+                    if (this.mode !== 'Custom') {
                         return;
                     }
-                    this.chipCollection.innerHTML = "";
+                    this.chipCollection.innerHTML = '';
                     this.setTagValues();
                     break;
                 case 'sortOrder':
@@ -3059,6 +3049,16 @@ var DropDownTree = /** @class */ (function (_super) {
             this.filterObj = null;
         }
     };
+    DropDownTree.prototype.destroyPopup = function () {
+        this.isPopupOpen = false;
+        if (this.isReact) {
+            this.clearTemplate();
+        }
+        if (this.popupObj) {
+            this.popupObj.destroy();
+            detach(this.popupObj.element);
+        }
+    };
     /**
      * Ensures visibility of the Dropdown Tree item by using item value or item element.
      * If many Dropdown Tree items are present, and we are in need to find a particular item, then the `ensureVisible` property
@@ -3076,7 +3076,6 @@ var DropDownTree = /** @class */ (function (_super) {
      * @param  {string | Element} item - Specifies the value of Dropdown Tree item/ Dropdown Tree item element
      * @returns {'{[key: string]: Object }[]'} - returns the updated data source of the Dropdown Tree.
      */
-    // eslint-disable-next-line
     DropDownTree.prototype.getData = function (item) {
         return this.treeObj.getTreeData(item);
     };
@@ -3101,6 +3100,10 @@ var DropDownTree = /** @class */ (function (_super) {
                 }
             }
             this.trigger('close', eventArgs);
+            if (this.destroyPopupOnHide) {
+                this.isFirstRender = true;
+                this.destroyPopup();
+            }
         }
     };
     /**
@@ -3150,7 +3153,7 @@ var DropDownTree = /** @class */ (function (_super) {
         Property('')
     ], DropDownTree.prototype, "cssClass", void 0);
     __decorate([
-        Property("${value.length} item(s) selected")
+        Property('${value.length} item(s) selected')
     ], DropDownTree.prototype, "customTemplate", void 0);
     __decorate([
         Property(',')
@@ -3216,7 +3219,10 @@ var DropDownTree = /** @class */ (function (_super) {
         Property(false)
     ], DropDownTree.prototype, "showCheckBox", void 0);
     __decorate([
-        Property(false)
+        Property(true)
+    ], DropDownTree.prototype, "destroyPopupOnHide", void 0);
+    __decorate([
+        Property(true)
     ], DropDownTree.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Property(true)

package/src/global.js

@@ -2,6 +2,6 @@ import * as index from './index';
 index.DropDownList.Inject(index.VirtualScroll);
 index.ComboBox.Inject(index.VirtualScroll);
 index.AutoComplete.Inject(index.VirtualScroll);
-index.MultiSelect.Inject(index.CheckBoxSelection);
+index.MultiSelect.Inject(index.CheckBoxSelection, index.VirtualScroll);
 index.ListBox.Inject(index.CheckBoxSelection);
 export * from './index';

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

@@ -400,7 +400,7 @@ var ListBox = /** @class */ (function (_super) {
             }
         }
         this.initWrapper();
-        this.setSelection();
+        this.setSelection(this.value, true, false, !this.isRendered);
         this.initDraggable();
         this.mainList = this.ulElement;
         if (this.initLoad) {
@@ -2063,11 +2063,12 @@ var ListBox = /** @class */ (function (_super) {
             });
         }
     };
-    ListBox.prototype.setSelection = function (values, isSelect, isText) {
+    ListBox.prototype.setSelection = function (values, isSelect, isText, canFocus) {
         var _this = this;
         if (values === void 0) { values = this.value; }
         if (isSelect === void 0) { isSelect = true; }
         if (isText === void 0) { isText = false; }
+        if (canFocus === void 0) { canFocus = true; }
         var li;
         var liselect;
         if (values) {
@@ -2096,13 +2097,17 @@ var ListBox = /** @class */ (function (_super) {
                     if (!isSelect && liselect || isSelect && !liselect && li) {
                         if (_this.selectionSettings.showCheckbox) {
                             _this.notify('updatelist', { li: li, module: 'listbox' });
-                            li.focus();
+                            if (canFocus) {
+                                li.focus();
+                            }
                         }
                         else {
                             if (isSelect) {
                                 li.classList.add(cssClass.selected);
                                 li.setAttribute('aria-selected', 'true');
-                                li.focus();
+                                if (canFocus) {
+                                    li.focus();
+                                }
                             }
                             else {
                                 li.classList.remove(cssClass.selected);

package/src/mention/mention.d.ts

@@ -57,6 +57,8 @@ export declare class Mention extends DropDownBase {
     private isTyped;
     private didPopupOpenByTypingInitialChar;
     private isUpDownKey;
+    private isRTE;
+    private keyEventName;
     /**
      * Defines class/multiple classes separated by a space for the mention component.
      *