@syncfusion/ej2-dropdowns 20.1.60 → 20.2.38

package/helpers/e2e/multiselect.js

@@ -1,89 +1,105 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const e2e_1 = require("@syncfusion/ej2-base/helpers/e2e");
-class MultiSelectHelper extends e2e_1.TestHelper {
-    constructor(id, wrapperFn) {
-        super();
-        this.id = id;
-        if (wrapperFn !== undefined) {
-            this.wrapperFn = wrapperFn;
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+define(["require", "exports", "@syncfusion/ej2-base/helpers/e2e"], function (require, exports, e2e_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var MultiSelectHelper = (function (_super) {
+        __extends(MultiSelectHelper, _super);
+        function MultiSelectHelper(id, wrapperFn) {
+            var _this = _super.call(this) || this;
+            _this.id = id;
+            if (wrapperFn !== undefined) {
+                _this.wrapperFn = wrapperFn;
+            }
+            return _this;
         }
-        return this;
-    }
-    selector(arg) {
-        return (this.wrapperFn ? this.wrapperFn(arg) : arg);
-    }
-    getInputElement() {
-        return this.selector('#' + this.id);
-    }
-    getPopupElement() {
-        return this.selector('#' + this.id + '_popup');
-    }
-    getListItemElement() {
-        return this.selector('.e-popup .e-content .e-list-parent .e-list-item');
-    }
-    getListGroupingElemnt() {
-        return this.selector('.e-popup .e-content .e-list-parent .e-list-group-item');
-    }
-    getInputFocusElement() {
-        return this.selector('.e-multiselect.e-input-group.e-input-focus');
-    }
-    getWrapperElement() {
-        return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper');
-    }
-    getValueElement() {
-        return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-multi-hidden');
-    }
-    getDropdownBaseInputElement() {
-        return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-dropdownbase');
-    }
-    getSpinnerElement() {
-        return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-chips-close .e-spinner-pane');
-    }
-    getSpinnerInnerElement() {
-        return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-chips-close .e-spinner-pane .e-spinner-inner');
-    }
-    getDelimValuesElement() {
-        return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-delim-view');
-    }
-    getChipCollectionElement() {
-        return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-chips-collection');
-    }
-    getSearcherElement() {
-        return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-searcher');
-    }
-    getChipCloseElement() {
-        return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-chips-close');
-    }
-    getInputGroupIconElemet() {
-        return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-input-group-icon');
-    }
-    getFilterParentElement() {
-        return this.selector('.e-popup .e-filter-parent');
-    }
-    getfilterInputGroupElement() {
-        return this.selector('.e-popup .e-filter-parent .e-input-group');
-    }
-    getFilterInputElement() {
-        return this.selector('.e-popup .e-filter-parent .e-input-group .e-input-filter');
-    }
-    getFilterClearIconElement() {
-        return this.selector('.e-popup .e-filter-parent .e-input-group .e-clear-icon');
-    }
-    getSelectAllElement() {
-        return this.selector('.e-popup .e-selectall-parent');
-    }
-    getSelectionReorderElement() {
-        return this.selector('.e-popup .e-content .e-list-parent.e-ul.e-reorder');
-    }
-    getSelectionDisabledElement() {
-        return this.selector('.e-popup .e-content .e-list-parent .e-list-item.e-disable');
-    }
-    getSelectAllCheckboxElement() {
-        return this.selector('.e-popup .e-selectall-parent .e-checkbox-wrapper');
-    }
-    getListItemCheckBoxElement() {
-        return this.selector('.e-popup .e-content .e-list-parent .e-list-item .e-checkbox-wrapper');
-    }
-}
-exports.MultiSelectHelper = MultiSelectHelper;
+        MultiSelectHelper.prototype.selector = function (arg) {
+            return (this.wrapperFn ? this.wrapperFn(arg) : arg);
+        };
+        MultiSelectHelper.prototype.getInputElement = function () {
+            return this.selector('#' + this.id);
+        };
+        MultiSelectHelper.prototype.getPopupElement = function () {
+            return this.selector('#' + this.id + '_popup');
+        };
+        MultiSelectHelper.prototype.getListItemElement = function () {
+            return this.selector('.e-popup .e-content .e-list-parent .e-list-item');
+        };
+        MultiSelectHelper.prototype.getListGroupingElemnt = function () {
+            return this.selector('.e-popup .e-content .e-list-parent .e-list-group-item');
+        };
+        MultiSelectHelper.prototype.getInputFocusElement = function () {
+            return this.selector('.e-multiselect.e-input-group.e-input-focus');
+        };
+        MultiSelectHelper.prototype.getWrapperElement = function () {
+            return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper');
+        };
+        MultiSelectHelper.prototype.getValueElement = function () {
+            return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-multi-hidden');
+        };
+        MultiSelectHelper.prototype.getDropdownBaseInputElement = function () {
+            return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-dropdownbase');
+        };
+        MultiSelectHelper.prototype.getSpinnerElement = function () {
+            return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-chips-close .e-spinner-pane');
+        };
+        MultiSelectHelper.prototype.getSpinnerInnerElement = function () {
+            return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-chips-close .e-spinner-pane .e-spinner-inner');
+        };
+        MultiSelectHelper.prototype.getDelimValuesElement = function () {
+            return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-delim-view');
+        };
+        MultiSelectHelper.prototype.getChipCollectionElement = function () {
+            return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-chips-collection');
+        };
+        MultiSelectHelper.prototype.getSearcherElement = function () {
+            return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-searcher');
+        };
+        MultiSelectHelper.prototype.getChipCloseElement = function () {
+            return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-chips-close');
+        };
+        MultiSelectHelper.prototype.getInputGroupIconElemet = function () {
+            return this.selector('.e-multiselect.e-input-group .e-multi-select-wrapper .e-input-group-icon');
+        };
+        MultiSelectHelper.prototype.getFilterParentElement = function () {
+            return this.selector('.e-popup .e-filter-parent');
+        };
+        MultiSelectHelper.prototype.getfilterInputGroupElement = function () {
+            return this.selector('.e-popup .e-filter-parent .e-input-group');
+        };
+        MultiSelectHelper.prototype.getFilterInputElement = function () {
+            return this.selector('.e-popup .e-filter-parent .e-input-group .e-input-filter');
+        };
+        MultiSelectHelper.prototype.getFilterClearIconElement = function () {
+            return this.selector('.e-popup .e-filter-parent .e-input-group .e-clear-icon');
+        };
+        MultiSelectHelper.prototype.getSelectAllElement = function () {
+            return this.selector('.e-popup .e-selectall-parent');
+        };
+        MultiSelectHelper.prototype.getSelectionReorderElement = function () {
+            return this.selector('.e-popup .e-content .e-list-parent.e-ul.e-reorder');
+        };
+        MultiSelectHelper.prototype.getSelectionDisabledElement = function () {
+            return this.selector('.e-popup .e-content .e-list-parent .e-list-item.e-disable');
+        };
+        MultiSelectHelper.prototype.getSelectAllCheckboxElement = function () {
+            return this.selector('.e-popup .e-selectall-parent .e-checkbox-wrapper');
+        };
+        MultiSelectHelper.prototype.getListItemCheckBoxElement = function () {
+            return this.selector('.e-popup .e-content .e-list-parent .e-list-item .e-checkbox-wrapper');
+        };
+        return MultiSelectHelper;
+    }(e2e_1.TestHelper));
+    exports.MultiSelectHelper = MultiSelectHelper;
+});

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@20.1.59",
+  "_id": "@syncfusion/ej2-dropdowns@20.2.36",
   "_inBundle": false,
-  "_integrity": "sha512-43YObh5pSFORNiaJD3XoiWhUMQ1b4yJ3zg0RMxhj/465c2kZC/J3wrIixGV9Z7ppQSse760GkjQ5RJR9IGpPnQ==",
+  "_integrity": "sha512-FIb8PB6MB7ysZ/9APPUDJuKfxqouD9wirgEFqGA7DETAyvNECCi4dW8ZnW8sBL0YlaXPhNr9o+vKhFDn7/fR9g==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -33,8 +33,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.1.59.tgz",
-  "_shasum": "e7c22a1264a2456f51a24eaa394e9a76e504c886",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.2.36.tgz",
+  "_shasum": "594959e4b506524cda286728dfbb611e7e67b217",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -42,12 +42,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.1.60",
-    "@syncfusion/ej2-data": "~20.1.55",
-    "@syncfusion/ej2-inputs": "~20.1.59",
-    "@syncfusion/ej2-lists": "~20.1.55",
-    "@syncfusion/ej2-navigations": "~20.1.60",
-    "@syncfusion/ej2-popups": "~20.1.58"
+    "@syncfusion/ej2-base": "~20.2.38",
+    "@syncfusion/ej2-data": "~20.2.38",
+    "@syncfusion/ej2-inputs": "~20.2.38",
+    "@syncfusion/ej2-lists": "~20.2.38",
+    "@syncfusion/ej2-navigations": "~20.2.38",
+    "@syncfusion/ej2-popups": "~20.2.38"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -72,6 +72,6 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "20.1.60",
+  "version": "20.2.38",
   "sideEffects": false
 }

package/src/common/incremental-search.js

@@ -84,7 +84,7 @@ export function Search(inputVal, items, searchType, ignoreCase) {
         for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {
             var item = itemsData[i];
             var text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
-            if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, 'g').test(text))) {
+            if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, "g").test(text))) {
                 itemData.item = item;
                 itemData.index = i;
                 return { item: item, index: i };

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

@@ -1,4 +1,4 @@
-import { Component, EventHandler, addClass, append, Property, Event, KeyboardEvents, EmitType, L10n, compile } from '@syncfusion/ej2-base';import { setStyleAttribute, extend, removeClass, prepend, isNullOrUndefined, detach, getValue, AnimationModel } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, rippleEffect, RippleOptions, ChildProperty, Complex } from '@syncfusion/ej2-base';import { DataManager, Query, DataOptions, DataUtil } from '@syncfusion/ej2-data';import { ListBase, SortOrder } from '@syncfusion/ej2-lists';import { Popup } from '@syncfusion/ej2-popups';import { remove, select, selectAll } from '@syncfusion/ej2-base';
+import { Component, EventHandler, addClass, append, Property, Event, KeyboardEvents, EmitType, L10n, compile, KeyboardEventArgs } from '@syncfusion/ej2-base';import { setStyleAttribute, extend, removeClass, prepend, isNullOrUndefined, detach, getValue, AnimationModel } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, rippleEffect, RippleOptions, ChildProperty, Complex } from '@syncfusion/ej2-base';import { DataManager, Query, DataOptions, DataUtil } from '@syncfusion/ej2-data';import { ListBase, SortOrder } from '@syncfusion/ej2-lists';import { Popup } from '@syncfusion/ej2-popups';import { remove, select, selectAll } from '@syncfusion/ej2-base';
 import {FilterType,SelectEventArgs} from "./drop-down-base";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

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

@@ -1,4 +1,4 @@
-import { Component, KeyboardEvents, EmitType, L10n } from '@syncfusion/ej2-base';
+import { Component, KeyboardEvents, EmitType, L10n, KeyboardEventArgs } from '@syncfusion/ej2-base';
 import { AnimationModel } from '@syncfusion/ej2-base';
 import { INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
@@ -720,6 +720,10 @@ export interface PopupEventArgs {
      * Specifies the animation Object.
      */
     animation?: AnimationModel;
+    /**
+     * Specifies the event.
+     */
+    event?: MouseEvent | KeyboardEventArgs;
 }
 export interface FocusEventArgs {
     /**

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

@@ -159,8 +159,7 @@ var DropDownBase = /** @class */ (function (_super) {
                     compareValue_1 = value;
                     dataSource.filter(function (item) {
                         var itemValue = getValue(fields.value, item);
-                        if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value)
-                            && itemValue.toString() === compareValue_1.toString()) {
+                        if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value) && itemValue.toString() === compareValue_1.toString()) {
                             value = getValue(fields.text, item);
                         }
                     });
@@ -586,7 +585,7 @@ var DropDownBase = /** @class */ (function (_super) {
         if (this.getModuleName() === 'multiselect' && this.properties.allowCustomValue && this.fields.groupBy) {
             for (var i = 0; i < ulElement.childElementCount; i++) {
                 if (ulElement.children[i].classList.contains('e-list-group-item')) {
-                    if (isNullOrUndefined(ulElement.children[i].innerHTML) || ulElement.children[i].innerHTML === '') {
+                    if (isNullOrUndefined(ulElement.children[i].innerHTML) || ulElement.children[i].innerHTML == "") {
                         addClass([ulElement.children[i]], HIDE_GROUPLIST);
                     }
                 }
@@ -1073,8 +1072,7 @@ var DropDownBase = /** @class */ (function (_super) {
             }
             if (this.itemTemplate && !isHeader) {
                 var itemCheck = this.templateCompiler(this.itemTemplate);
-                var compiledString = itemCheck ?
-                    compile(select(this.itemTemplate, document).innerHTML.trim()) : compile(this.itemTemplate);
+                var compiledString = itemCheck ? compile(select(this.itemTemplate, document).innerHTML.trim()) : compile(this.itemTemplate);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var addItemTemplate = compiledString(item, this, 'itemTemplate', this.itemTemplateId, this.isStringTemplate, null, li);
                 if (addItemTemplate) {

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

@@ -286,7 +286,7 @@ var DropDownList = /** @class */ (function (_super) {
         return {
             'aria-disabled': 'false',
             'aria-owns': this.element.id + '_options',
-            'role': 'listbox',
+            'role': 'combobox',
             'aria-haspopup': 'true',
             'aria-expanded': 'false',
             'aria-activedescendant': 'null',
@@ -552,7 +552,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         else {
             var delay = 100;
-            this.closePopup(delay);
+            this.closePopup(delay, e);
         }
     };
     DropDownList.prototype.onMouseOver = function (e) {
@@ -776,7 +776,7 @@ var DropDownList = /** @class */ (function (_super) {
                 this.isSelectCustom = false;
                 this.onChangeEvent(e);
             }
-            this.hidePopup();
+            this.hidePopup(e);
             this.focusDropDown(e);
         }
         else {
@@ -1011,11 +1011,9 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.setValue(e)) {
             return;
         }
-        if (this.isPopupOpen) {
-            attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
-            if (this.isFilterLayout() && this.filterInput) {
-                attributes(this.filterInput, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
-            }
+        attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
+        if (this.isFilterLayout() && this.filterInput) {
+            attributes(this.filterInput, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
         }
         if ((!this.isPopupOpen && !isNullOrUndefined(li)) || (this.isPopupOpen && !isNullOrUndefined(e) &&
             (e.type !== 'keydown' || e.type === 'keydown' && e.action === 'enter'))) {
@@ -1500,7 +1498,6 @@ var DropDownList = /** @class */ (function (_super) {
                 this.initial = true;
                 this.activeIndex = this.index;
                 this.initRemoteRender = false;
-                this.initial = false;
                 if (this.value && this.dataSource instanceof DataManager) {
                     var checkField_1 = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
                     var checkVal = list.some(function (x) { return x[checkField_1] === _this.value; });
@@ -1523,6 +1520,7 @@ var DropDownList = /** @class */ (function (_super) {
                 else {
                     this.updateValues();
                 }
+                this.initial = false;
             }
             if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {
                 if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter
@@ -1951,7 +1949,7 @@ var DropDownList = /** @class */ (function (_super) {
             }
         }
     };
-    DropDownList.prototype.closePopup = function (delay) {
+    DropDownList.prototype.closePopup = function (delay, e) {
         var _this = this;
         this.isTyped = false;
         if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {
@@ -1989,7 +1987,7 @@ var DropDownList = /** @class */ (function (_super) {
             EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);
             this.filterInput = null;
         }
-        attributes(this.targetElement(), { 'aria-expanded': 'false', 'aria-activedescendant': null });
+        attributes(this.targetElement(), { 'aria-expanded': 'false' });
         this.inputWrapper.container.classList.remove(dropDownListClasses.iconAnimation);
         if (this.isFiltering()) {
             this.actionCompleteData.isUpdated = false;
@@ -2001,7 +1999,7 @@ var DropDownList = /** @class */ (function (_super) {
             delay: delay ? delay : 0
         };
         var popupInstance = this.popupObj;
-        var eventArgs = { popup: popupInstance, cancel: false, animation: animModel };
+        var eventArgs = { popup: popupInstance, cancel: false, animation: animModel, event: e || null };
         this.trigger('close', eventArgs, function (eventArgs) {
             if (!isNullOrUndefined(_this.popupObj) &&
                 !isNullOrUndefined(_this.popupObj.element.querySelector('.e-fixed-head'))) {
@@ -2222,7 +2220,7 @@ var DropDownList = /** @class */ (function (_super) {
             || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0)))) {
             this.clearAll(null, props);
         }
-        if ((this.fields.groupBy && props.fields) && !this.isGroupChecking) {
+        if ((this.fields.groupBy && props.fields) && !this.isGroupChecking && this.list) {
             EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);
             EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);
         }
@@ -2514,7 +2512,7 @@ var DropDownList = /** @class */ (function (_super) {
         if (!this.enabled) {
             return;
         }
-        if (this.isFiltering() && this.dataSource instanceof DataManager && (this.actionData.list !== this.actionCompleteData.list) &&
+        if (this.isFiltering() && this.dataSource instanceof DataManager && (this.actionData.list != this.actionCompleteData.list) &&
             this.actionData.list && this.actionData.ulElement) {
             this.actionCompleteData = this.actionData;
             this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list, null, true);
@@ -2576,7 +2574,7 @@ var DropDownList = /** @class */ (function (_super) {
                 this.resetSelection();
             }
         }
-        this.closePopup();
+        this.closePopup(0, e);
         var dataItem = this.getItemData();
         var isSelectVal = !isNullOrUndefined(this.selectedLI);
         if (this.inputElement && this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||

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

@@ -172,7 +172,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"
@@ -308,7 +308,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;
 

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

@@ -2278,7 +2278,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);
@@ -2415,7 +2415,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);
@@ -2797,10 +2797,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':
@@ -3017,7 +3017,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(',')

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

@@ -119,6 +119,7 @@ export declare class ListBox extends DropDownBase {
     private jsonData;
     private toolbarAction;
     private isDataSourceUpdate;
+    private dragValue;
     /**
      * Sets the CSS classes to root element of this component, which helps to customize the
      * complete styles.

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

@@ -134,6 +134,7 @@ var ListBox = /** @class */ (function (_super) {
     };
     ListBox.prototype.initWrapper = function () {
         var hiddenSelect = this.createElement('select', { className: 'e-hidden-select', attrs: { 'multiple': '' } });
+        hiddenSelect.style.visibility = 'hidden';
         this.list.classList.add('e-listbox-wrapper');
         if (this.itemTemplate) {
             this.list.classList.add('e-list-template');
@@ -426,10 +427,10 @@ var ListBox = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var event = args.event;
         var wrapper;
-        if (args.target && (args.target.classList.contains('e-listbox-wrapper') || args.target.classList.contains('e-list-item')
-            || args.target.classList.contains('e-filter-parent') || args.target.classList.contains('e-input-group'))) {
-            if (args.target.classList.contains('e-list-item') || args.target.classList.contains('e-filter-parent')
-                || args.target.classList.contains('e-input-group')) {
+        if (args.target && (args.target.classList.contains("e-listbox-wrapper") || args.target.classList.contains("e-list-item")
+            || args.target.classList.contains("e-filter-parent") || args.target.classList.contains("e-input-group"))) {
+            if (args.target.classList.contains("e-list-item") || args.target.classList.contains("e-filter-parent")
+                || args.target.classList.contains("e-input-group")) {
                 wrapper = args.target.closest('.e-listbox-wrapper');
             }
             else {
@@ -462,12 +463,12 @@ var ListBox = /** @class */ (function (_super) {
         }
     };
     ListBox.prototype.beforeDragEnd = function (args) {
-        var dragValue = this.getFormattedValue(args.droppedElement.getAttribute('data-value'));
-        if (this.value.indexOf(dragValue) > -1) {
+        this.dragValue = this.getFormattedValue(args.droppedElement.getAttribute('data-value'));
+        if (this.value.indexOf(this.dragValue) > -1) {
             args.items = this.getDataByValues(this.value);
         }
         else {
-            args.items = this.getDataByValues([dragValue]);
+            args.items = this.getDataByValues([this.dragValue]);
         }
         this.trigger('beforeDrop', args);
     };
@@ -484,8 +485,7 @@ var ListBox = /** @class */ (function (_super) {
         var getArgs = this.getDragArgs({ target: args.droppedElement }, true);
         var sourceArgs = { previousData: this.dataSource };
         var destArgs = { previousData: listObj.dataSource };
-        var dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource },
-            previousIndex: args.previousIndex, currentIndex: args.currentIndex });
+        var dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource }, previousIndex: args.previousIndex, currentIndex: args.currentIndex });
         if (listObj !== this) {
             var sourceArgs1 = extend(sourceArgs, { currentData: this.listData });
             dragArgs = extend(dragArgs, { source: sourceArgs1, destination: destArgs });
@@ -616,7 +616,7 @@ var ListBox = /** @class */ (function (_super) {
     };
     ListBox.prototype.updateListItems = function (sourceElem, destElem) {
         var i = 0;
-        destElem.innerHTML = '';
+        destElem.innerHTML = "";
         while (i < sourceElem.childNodes.length) {
             destElem.appendChild(sourceElem.childNodes[i]);
         }
@@ -1600,6 +1600,15 @@ var ListBox = /** @class */ (function (_super) {
         return listObj;
     };
     ListBox.prototype.getGrabbedItems = function () {
+        for (var i = 0; i < this.value.length; i++) {
+            if (this.value[i] === this.dragValue) {
+                var liColl = this.list.querySelectorAll('[aria-selected="true"]');
+                for (var i_1 = 0; i_1 < liColl.length; i_1++) {
+                    liColl[i_1].classList.add('e-grabbed');
+                }
+                break;
+            }
+        }
         var elems = Array.prototype.slice.call(this.element.querySelectorAll('.e-grabbed'));
         return elems;
     };
@@ -1656,7 +1665,7 @@ var ListBox = /** @class */ (function (_super) {
                     }
                 }
             }
-            else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== 'KeyA') {
+            else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== "KeyA") {
                 this.upDownKeyHandler(e);
             }
         }
@@ -1700,8 +1709,8 @@ var ListBox = /** @class */ (function (_super) {
             }
             if (this.selectionSettings.showCheckbox && e.ctrlKey && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
                 var selectedidx = Array.prototype.indexOf.call(ul.children, fli);
-                var sidx = e.code === 'Home' ? 0 : selectedidx;
-                var eidx = e.code === 'Home' ? selectedidx : ul.children.length - 1;
+                var sidx = e.code === "Home" ? 0 : selectedidx;
+                var eidx = e.code === "Home" ? selectedidx : ul.children.length - 1;
                 for (var i = sidx; i <= eidx; i++) {
                     var item = ul.children[i];
                     this.notify('updatelist', { li: item, e: {

package/src/multi-select/multi-select-model.d.ts

@@ -450,7 +450,7 @@ export interface MultiSelectModel extends DropDownBaseModel{
      *
      * @default false
      */
-    addTagOnBlur?: boolean;
+    addTagOnBlur?: boolean; 
 
     /**
      * Fires each time when selection changes happened in list items after model and input value get affected.

package/src/multi-select/multi-select.d.ts

@@ -46,6 +46,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private keyAction;
     private isSelectAll;
     private clearIconWidth;
+    private previousFilterText;
     /**
      * The `fields` property maps the columns of the data table and binds the data to the component.
      * * text - Maps the text column from data table for each list item.
@@ -816,7 +817,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      *
      * @returns {void}
      */
-    hidePopup(): void;
+    hidePopup(e?: MouseEvent | KeyboardEventArgs): void;
     /**
      * Shows the popup, if the popup in a closed state.
      *