@syncfusion/ej2-dropdowns 20.1.60 → 20.2.38

package/dist/es6/ej2-dropdowns.es5.js

@@ -92,7 +92,7 @@ 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 };
@@ -330,8 +330,7 @@ var DropDownBase = /** @__PURE__ @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);
                         }
                     });
@@ -757,7 +756,7 @@ var DropDownBase = /** @__PURE__ @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);
                     }
                 }
@@ -1244,8 +1243,7 @@ var DropDownBase = /** @__PURE__ @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) {
@@ -1749,7 +1747,7 @@ var DropDownList = /** @__PURE__ @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',
@@ -2015,7 +2013,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             var delay = 100;
-            this.closePopup(delay);
+            this.closePopup(delay, e);
         }
     };
     DropDownList.prototype.onMouseOver = function (e) {
@@ -2239,7 +2237,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 this.isSelectCustom = false;
                 this.onChangeEvent(e);
             }
-            this.hidePopup();
+            this.hidePopup(e);
             this.focusDropDown(e);
         }
         else {
@@ -2474,11 +2472,9 @@ var DropDownList = /** @__PURE__ @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'))) {
@@ -2963,7 +2959,6 @@ var DropDownList = /** @__PURE__ @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; });
@@ -2986,6 +2981,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 else {
                     this.updateValues();
                 }
+                this.initial = false;
             }
             if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {
                 if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter
@@ -3414,7 +3410,7 @@ var DropDownList = /** @__PURE__ @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)) {
@@ -3452,7 +3448,7 @@ var DropDownList = /** @__PURE__ @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;
@@ -3464,7 +3460,7 @@ var DropDownList = /** @__PURE__ @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'))) {
@@ -3685,7 +3681,7 @@ var DropDownList = /** @__PURE__ @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);
         }
@@ -3977,7 +3973,7 @@ var DropDownList = /** @__PURE__ @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);
@@ -4039,7 +4035,7 @@ var DropDownList = /** @__PURE__ @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 ||
@@ -6521,7 +6517,7 @@ var DropDownTree = /** @__PURE__ @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);
@@ -6657,7 +6653,7 @@ var DropDownTree = /** @__PURE__ @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);
@@ -7039,10 +7035,10 @@ var DropDownTree = /** @__PURE__ @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':
@@ -7259,7 +7255,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         Property('')
     ], DropDownTree.prototype, "cssClass", void 0);
     __decorate$2([
-        Property('${value.length} item(s) selected')
+        Property("${value.length} item(s) selected")
     ], DropDownTree.prototype, "customTemplate", void 0);
     __decorate$2([
         Property(',')
@@ -8900,6 +8896,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     function MultiSelect(option, element) {
         var _this = _super.call(this, option, element) || this;
         _this.clearIconWidth = 0;
+        _this.previousFilterText = '';
         _this.isValidKey = false;
         _this.selectAllEventData = [];
         _this.selectAllEventEle = [];
@@ -8975,7 +8972,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         else if (containerAttr.indexOf(htmlAttr) > -1) {
                             this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
                         }
-                        else {
+                        else if (htmlAttr !== 'size') {
                             this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
                         }
                         break;
@@ -9397,7 +9394,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 this.showPopup();
             }
             else {
-                this.hidePopup();
+                this.hidePopup(e);
             }
         }
         else if (!this.openOnClick && this.mode === 'CheckBox' && !this.isPopupOpen()) {
@@ -9466,7 +9463,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
             if (this.backCommand) {
                 this.remoteCustomValue = false;
-                if (this.allowCustomValue && list.querySelectorAll('li').length === 0 && this.mainData.length > 0) {
+                if (this.allowCustomValue && list.querySelectorAll('li').length == 0 && this.mainData.length > 0) {
                     this.mainData = [];
                 }
                 this.onActionComplete(list, this.mainData);
@@ -9557,7 +9554,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 this.showPopup();
             }
             else {
-                this.hidePopup();
+                this.hidePopup(e);
                 if (this.mode === 'CheckBox') {
                     this.showOverAllClear();
                     this.inputFocus = true;
@@ -9635,6 +9632,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
+        this.updateDataList();
         this.refreshListItems(null);
         if (this.mode !== 'Box' && this.mode !== 'CheckBox') {
             this.updateDelimView();
@@ -9645,7 +9643,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         this.overAllClear.style.display = 'none';
         if (this.isPopupOpen()) {
-            this.hidePopup();
+            this.hidePopup(eve);
         }
         this.makeTextBoxEmpty();
         this.trigger('blur');
@@ -9839,7 +9837,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     MultiSelect.prototype.popupKeyActions = function (e) {
         switch (e.keyCode) {
             case 38:
-                this.hidePopup();
+                this.hidePopup(e);
                 if (this.mode === 'CheckBox') {
                     this.inputElement.focus();
                 }
@@ -9861,7 +9859,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 var filterInput = this.popupWrapper.querySelector('.' + FILTERINPUT);
                 filterInput && filterInput.setAttribute('aria-activedescendant', focusedItem.id);
             }
-            else if (this.mode === 'CheckBox') {
+            else if (this.mode == "CheckBox") {
                 this.overAllWrapper.setAttribute('aria-activedescendant', focusedItem.id);
             }
         }
@@ -9921,7 +9919,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 27:
                     e.preventDefault();
-                    this.hidePopup();
+                    this.hidePopup(e);
                     if (this.mode === 'CheckBox') {
                         this.inputElement.focus();
                     }
@@ -9938,7 +9936,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     return;
                 case 9:
                     e.preventDefault();
-                    this.hidePopup();
+                    this.hidePopup(e);
                     this.inputElement.focus();
                     this.overAllWrapper.classList.add(FOCUS);
             }
@@ -9966,6 +9964,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             this.keyNavigation(e);
         }
         if (this.mode === 'CheckBox' && this.enableSelectionOrder) {
+            if (this.allowFiltering) {
+                this.previousFilterText = this.targetElement();
+            }
             this.checkBackCommand(e);
         }
         this.expandTextbox();
@@ -10008,14 +10009,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             if (!document.activeElement.classList.contains(FILTERINPUT)) {
                 e.preventDefault();
                 this.keyAction = true;
-                this.list.focus();
             }
             this.selectByKey(e);
         }
         this.checkPlaceholderSize();
     };
     MultiSelect.prototype.checkBackCommand = function (e) {
-        if (e.keyCode === 8 && this.targetElement() === '') {
+        if (e.keyCode === 8 && this.allowFiltering ? this.targetElement() !== this.previousFilterText : this.targetElement() === '') {
             this.backCommand = false;
         }
         else {
@@ -10161,7 +10161,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             }
             this.refreshSelection();
             if (this.closePopupOnSelect) {
-                this.hidePopup();
+                this.hidePopup(e);
             }
         }
         this.refreshPlaceHolder();
@@ -10193,7 +10193,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             this.makeTextBoxEmpty();
         }
         if (this.closePopupOnSelect) {
-            this.hidePopup();
+            this.hidePopup(e);
         }
         this.checkPlaceholderSize();
     };
@@ -10313,7 +10313,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 value = customVal;
             }
             if (this.isPopupOpen() && this.mode !== 'CheckBox') {
-                this.hidePopup();
+                this.hidePopup(e);
             }
             if (!this.inputFocus) {
                 this.inputElement.focus();
@@ -10427,7 +10427,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         });
                         _this.invokeCheckboxSelection(element_1, eve, isClearAll);
                     }
-                    if (_this.hideSelectedItem && _this.fields.groupBy) {
+                    if (_this.hideSelectedItem && _this.fields.groupBy && element_1) {
                         _this.hideGroupItem(value);
                     }
                     if (_this.hideSelectedItem && _this.fixedHeaderElement && _this.fields.groupBy && _this.mode !== 'CheckBox' &&
@@ -11271,15 +11271,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.updateDataList = function () {
-        if (this.mainList && this.ulElement) {
+        if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction)) {
             var isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
-            var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 &&
-                this.ulElement.children[0].childElementCount > 0) &&
-                (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
-            var isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0
-                && !(this.ulElement.childElementCount < this.mainList.childElementCount)
-                && (this.ulElement.children[0].childElementCount > 0
-                    || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
+            var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
+            var isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0 && !(this.ulElement.childElementCount < this.mainList.childElementCount) && (this.ulElement.children[0].childElementCount > 0 || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
             if (isDynamicGroupItemUpdate || isReactTemplateUpdate || isAngularTemplateUpdate) {
                 //EJ2-57748 - for this task, we prevent the ul element cloning ( this.mainList = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
                 this.mainList = this.ulElement;
@@ -11498,7 +11493,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     this.focusAtFirstListItem();
                 }
                 if (this.closePopupOnSelect) {
-                    this.hidePopup();
+                    this.hidePopup(e);
                 }
                 else {
                     e.preventDefault();
@@ -12351,6 +12346,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         return valuecheck;
     };
+    
     MultiSelect.prototype.addNonPresentItems = function (valuecheck, ulElement, list, event) {
         var _this = this;
         this.dataSource.executeQuery(this.getForQuery(valuecheck)).then(function (e) {
@@ -12358,6 +12354,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             _this.updateActionList(ulElement, list, event);
         });
     };
+    
     MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
         if (!this.list) {
             this.onLoadSelect();
@@ -12370,7 +12367,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
                 valuecheck = this.presentItemValue(this.ulElement);
             }
-            if (prop === 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
+            if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
                 && this.listData != null) {
                 this.mainData = null;
                 this.setDynValue = true;
@@ -12424,7 +12421,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
      *
      * @returns {void}
      */
-    MultiSelect.prototype.hidePopup = function () {
+    MultiSelect.prototype.hidePopup = function (e) {
         var _this = this;
         var delay = 100;
         if (this.isPopupOpen()) {
@@ -12433,7 +12430,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 duration: 100,
                 delay: delay ? delay : 0
             };
-            var eventArgs = { popup: this.popupObj, cancel: false, animation: animModel };
+            var eventArgs = { popup: this.popupObj, cancel: false, animation: animModel, event: e || null };
             this.trigger('close', eventArgs, function (eventArgs) {
                 if (!eventArgs.cancel) {
                     if (_this.fields.groupBy && _this.mode !== 'CheckBox' && _this.fixedHeaderElement) {
@@ -12481,7 +12478,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 var mainLiLength = _this.ulElement.querySelectorAll('li.' + 'e-list-item').length;
                 var liLength = _this.ulElement.querySelectorAll('li.'
                     + dropDownBaseClasses.li + '.' + HIDE_LIST).length;
-                if (mainLiLength > 0 && (mainLiLength === liLength) && (liLength === _this.mainData.length)) {
+                if (mainLiLength > 0 && (mainLiLength === liLength) && (liLength === _this.mainData.length) && !(_this.targetElement() !== '' && _this.allowCustomValue)) {
                     _this.beforePopupOpen = false;
                     return;
                 }
@@ -13612,6 +13609,7 @@ var ListBox = /** @__PURE__ @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');
@@ -13904,10 +13902,10 @@ var ListBox = /** @__PURE__ @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 {
@@ -13940,12 +13938,12 @@ var ListBox = /** @__PURE__ @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);
     };
@@ -13962,8 +13960,7 @@ var ListBox = /** @__PURE__ @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 });
@@ -14094,7 +14091,7 @@ var ListBox = /** @__PURE__ @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]);
         }
@@ -15078,6 +15075,15 @@ var ListBox = /** @__PURE__ @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;
     };
@@ -15134,7 +15140,7 @@ var ListBox = /** @__PURE__ @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);
             }
         }
@@ -15178,8 +15184,8 @@ var ListBox = /** @__PURE__ @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: {