@syncfusion/ej2-dropdowns 20.1.60 → 20.2.38

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

@@ -92,7 +92,7 @@ function Search(inputVal, items, searchType, ignoreCase) {
         for (let i = 0, itemsData = listItems; i < itemsData.length; i++) {
             const item = itemsData[i];
             const 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 };
@@ -308,8 +308,7 @@ let DropDownBase = class DropDownBase extends Component {
                     compareValue = value;
                     dataSource.filter((item) => {
                         const itemValue = getValue(fields.value, item);
-                        if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value)
-                            && itemValue.toString() === compareValue.toString()) {
+                        if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value) && itemValue.toString() === compareValue.toString()) {
                             value = getValue(fields.text, item);
                         }
                     });
@@ -732,7 +731,7 @@ let DropDownBase = class DropDownBase extends Component {
         if (this.getModuleName() === 'multiselect' && this.properties.allowCustomValue && this.fields.groupBy) {
             for (let 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);
                     }
                 }
@@ -859,8 +858,8 @@ let DropDownBase = class DropDownBase extends Component {
         this.scrollStop(e);
     }
     scrollStop(e) {
-        const target = !isNullOrUndefined(e) ? e.target : this.list;
-        const liHeight = parseInt(getComputedStyle(this.getValidLi(), null).getPropertyValue('height'), 10);
+        let target = !isNullOrUndefined(e) ? e.target : this.list;
+        let liHeight = parseInt(getComputedStyle(this.getValidLi(), null).getPropertyValue('height'), 10);
         const topIndex = Math.round(target.scrollTop / liHeight);
         const liCollections = this.list.querySelectorAll('li' + ':not(.e-hide-listitem)');
         for (let i = topIndex; i > -1; i--) {
@@ -948,10 +947,10 @@ let DropDownBase = class DropDownBase extends Component {
             Refer bug report https://bugzilla.mozilla.org/show_bug.cgi?id=137688
             Refer alternate solution https://stackoverflow.com/a/41696234/9133493*/
             if (isNaN(borderWidth)) {
-                const borderTopWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-top-width'), 10);
-                const borderBottomWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-bottom-width'), 10);
-                const borderLeftWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-left-width'), 10);
-                const borderRightWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-right-width'), 10);
+                let borderTopWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-top-width'), 10);
+                let borderBottomWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-bottom-width'), 10);
+                let borderLeftWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-left-width'), 10);
+                let borderRightWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-right-width'), 10);
                 borderWidth = (borderTopWidth + borderBottomWidth + borderLeftWidth + borderRightWidth);
             }
         }
@@ -1218,8 +1217,7 @@ let DropDownBase = class DropDownBase extends Component {
             }
             if (this.itemTemplate && !isHeader) {
                 const itemCheck = this.templateCompiler(this.itemTemplate);
-                const compiledString = itemCheck ?
-                    compile(select(this.itemTemplate, document).innerHTML.trim()) : compile(this.itemTemplate);
+                const compiledString = itemCheck ? compile(select(this.itemTemplate, document).innerHTML.trim()) : compile(this.itemTemplate);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const addItemTemplate = compiledString(item, this, 'itemTemplate', this.itemTemplateId, this.isStringTemplate, null, li);
                 if (addItemTemplate) {
@@ -1704,7 +1702,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         return {
             'aria-disabled': 'false',
             'aria-owns': this.element.id + '_options',
-            'role': 'listbox',
+            'role': 'combobox',
             'aria-haspopup': 'true',
             'aria-expanded': 'false',
             'aria-activedescendant': 'null',
@@ -1969,7 +1967,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         else {
             const delay = 100;
-            this.closePopup(delay);
+            this.closePopup(delay, e);
         }
     }
     onMouseOver(e) {
@@ -2193,7 +2191,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.isSelectCustom = false;
                 this.onChangeEvent(e);
             }
-            this.hidePopup();
+            this.hidePopup(e);
             this.focusDropDown(e);
         }
         else {
@@ -2390,9 +2388,9 @@ let DropDownList = class DropDownList extends DropDownBase {
             detach(this.valueTempElement);
             this.inputElement.style.display = 'block';
         }
-        const clearIcon = dropDownListClasses.clearIcon;
-        const isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');
-        const clearElement = isFilterElement && this.filterInput.parentElement.querySelector('.' + clearIcon);
+        let clearIcon = dropDownListClasses.clearIcon;
+        let isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');
+        let clearElement = isFilterElement && this.filterInput.parentElement.querySelector('.' + clearIcon);
         if (this.isFiltering() && clearElement) {
             clearElement.style.removeProperty('visibility');
         }
@@ -2427,11 +2425,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         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'))) {
@@ -2913,7 +2909,6 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.initial = true;
                 this.activeIndex = this.index;
                 this.initRemoteRender = false;
-                this.initial = false;
                 if (this.value && this.dataSource instanceof DataManager) {
                     const checkField = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
                     const checkVal = list.some((x) => x[checkField] === this.value);
@@ -2936,6 +2931,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 else {
                     this.updateValues();
                 }
+                this.initial = false;
             }
             if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {
                 if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter
@@ -3359,7 +3355,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
         }
     }
-    closePopup(delay) {
+    closePopup(delay, e) {
         this.isTyped = false;
         if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {
             return;
@@ -3395,7 +3391,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             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;
@@ -3407,7 +3403,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             delay: delay ? delay : 0
         };
         const popupInstance = this.popupObj;
-        const eventArgs = { popup: popupInstance, cancel: false, animation: animModel };
+        const eventArgs = { popup: popupInstance, cancel: false, animation: animModel, event: e || null };
         this.trigger('close', eventArgs, (eventArgs) => {
             if (!isNullOrUndefined(this.popupObj) &&
                 !isNullOrUndefined(this.popupObj.element.querySelector('.e-fixed-head'))) {
@@ -3628,7 +3624,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             || (!(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);
         }
@@ -3913,7 +3909,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         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);
@@ -3975,7 +3971,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.resetSelection();
             }
         }
-        this.closePopup();
+        this.closePopup(0, e);
         const dataItem = this.getItemData();
         const isSelectVal = !isNullOrUndefined(this.selectedLI);
         if (this.inputElement && this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||
@@ -5509,7 +5505,7 @@ let DropDownTree = class DropDownTree extends Component {
         }
         else {
             if (this.showCheckBox) {
-                const difference = this.value.filter((e) => {
+                let difference = this.value.filter((e) => {
                     return this.treeObj.checkedNodes.indexOf(e) === -1;
                 });
                 if (difference.length > 0 || this.treeSettings.autoCheck) {
@@ -6273,7 +6269,7 @@ let DropDownTree = class DropDownTree extends Component {
         }
         else if (this.treeDataType === 1) {
             for (let i = 0, objlen = this.treeItems.length; i < objlen; i++) {
-                const dataId = getValue(this.fields.value, this.treeItems[i]);
+                let dataId = getValue(this.fields.value, this.treeItems[i]);
                 if (!isNullOrUndefined(this.treeItems[i]) && !isNullOrUndefined(dataId) && dataId.toString() === id) {
                     return this.treeItems[i];
                 }
@@ -6290,19 +6286,19 @@ let DropDownTree = class DropDownTree extends Component {
             return newChildItems;
         }
         for (let i = 0, objlen = obj.length; i < objlen; i++) {
-            const dataValue = getValue(mapper.value, obj[i]);
+            let dataValue = getValue(mapper.value, obj[i]);
             if (obj[i] && dataValue && dataValue.toString() === id) {
                 return obj[i];
             }
             else if (typeof mapper.child === 'string' && !isNullOrUndefined(getValue(mapper.child, obj[i]))) {
-                const childNodeData = getValue(mapper.child, obj[i]);
+                let childNodeData = getValue(mapper.child, obj[i]);
                 newChildItems = this.getChildNodeData(childNodeData, this.getChildMapperFields(mapper), id);
                 if (newChildItems !== undefined) {
                     break;
                 }
             }
             else if (this.fields.dataSource instanceof DataManager && !isNullOrUndefined(getValue('child', obj[i]))) {
-                const child = 'child';
+                let child = 'child';
                 newChildItems = this.getChildNodeData(getValue(child, obj[i]), this.getChildMapperFields(mapper), id);
                 if (newChildItems !== undefined) {
                     break;
@@ -6421,7 +6417,7 @@ let DropDownTree = class DropDownTree extends Component {
             addClass([this.inputWrapper], SHOW_CHIP);
         }
         const chip = this.createElement('span', {
-            className: CHIP
+            className: CHIP,
         });
         if (!this.inputEle.classList.contains(CHIP_INPUT)) {
             addClass([this.inputEle], CHIP_INPUT);
@@ -6557,7 +6553,7 @@ let DropDownTree = class DropDownTree extends Component {
         this.ensurePlaceHolder();
     }
     resetValue(isDynamicChange) {
-        if (this.value === [] && this.text === null) {
+        if (this.value == [] && this.text == null) {
             return;
         }
         Input.setValue(null, this.inputEle, this.floatLabelType);
@@ -6938,10 +6934,10 @@ let DropDownTree = class DropDownTree extends Component {
                     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':
@@ -7159,7 +7155,7 @@ __decorate$2([
     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(',')
@@ -8746,6 +8742,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     constructor(option, element) {
         super(option, element);
         this.clearIconWidth = 0;
+        this.previousFilterText = '';
         this.isValidKey = false;
         this.selectAllEventData = [];
         this.selectAllEventEle = [];
@@ -8819,7 +8816,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         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;
@@ -9208,7 +9205,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     getValidLi() {
-        const liElement = this.ulElement.querySelector('li.' + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');
+        let liElement = this.ulElement.querySelector('li.' + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');
         return (!isNullOrUndefined(liElement) ? liElement : this.liCollections[0]);
     }
     checkSelectAll() {
@@ -9240,7 +9237,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.showPopup();
             }
             else {
-                this.hidePopup();
+                this.hidePopup(e);
             }
         }
         else if (!this.openOnClick && this.mode === 'CheckBox' && !this.isPopupOpen()) {
@@ -9309,7 +9306,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             const 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);
@@ -9400,7 +9397,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.showPopup();
             }
             else {
-                this.hidePopup();
+                this.hidePopup(e);
                 if (this.mode === 'CheckBox') {
                     this.showOverAllClear();
                     this.inputFocus = true;
@@ -9478,6 +9475,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 }
             }
         }
+        this.updateDataList();
         this.refreshListItems(null);
         if (this.mode !== 'Box' && this.mode !== 'CheckBox') {
             this.updateDelimView();
@@ -9488,7 +9486,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.overAllClear.style.display = 'none';
         if (this.isPopupOpen()) {
-            this.hidePopup();
+            this.hidePopup(eve);
         }
         this.makeTextBoxEmpty();
         this.trigger('blur');
@@ -9682,7 +9680,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     popupKeyActions(e) {
         switch (e.keyCode) {
             case 38:
-                this.hidePopup();
+                this.hidePopup(e);
                 if (this.mode === 'CheckBox') {
                     this.inputElement.focus();
                 }
@@ -9701,10 +9699,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (!isNullOrUndefined(focusedItem)) {
             this.inputElement.setAttribute('aria-activedescendant', focusedItem.id);
             if (this.allowFiltering) {
-                const filterInput = this.popupWrapper.querySelector('.' + FILTERINPUT);
+                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);
             }
         }
@@ -9764,7 +9762,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     break;
                 case 27:
                     e.preventDefault();
-                    this.hidePopup();
+                    this.hidePopup(e);
                     if (this.mode === 'CheckBox') {
                         this.inputElement.focus();
                     }
@@ -9781,7 +9779,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     return;
                 case 9:
                     e.preventDefault();
-                    this.hidePopup();
+                    this.hidePopup(e);
                     this.inputElement.focus();
                     this.overAllWrapper.classList.add(FOCUS);
             }
@@ -9809,6 +9807,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.keyNavigation(e);
         }
         if (this.mode === 'CheckBox' && this.enableSelectionOrder) {
+            if (this.allowFiltering) {
+                this.previousFilterText = this.targetElement();
+            }
             this.checkBackCommand(e);
         }
         this.expandTextbox();
@@ -9851,14 +9852,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (!document.activeElement.classList.contains(FILTERINPUT)) {
                 e.preventDefault();
                 this.keyAction = true;
-                this.list.focus();
             }
             this.selectByKey(e);
         }
         this.checkPlaceholderSize();
     }
     checkBackCommand(e) {
-        if (e.keyCode === 8 && this.targetElement() === '') {
+        if (e.keyCode === 8 && this.allowFiltering ? this.targetElement() !== this.previousFilterText : this.targetElement() === '') {
             this.backCommand = false;
         }
         else {
@@ -10004,7 +10004,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
             this.refreshSelection();
             if (this.closePopupOnSelect) {
-                this.hidePopup();
+                this.hidePopup(e);
             }
         }
         this.refreshPlaceHolder();
@@ -10036,7 +10036,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.makeTextBoxEmpty();
         }
         if (this.closePopupOnSelect) {
-            this.hidePopup();
+            this.hidePopup(e);
         }
         this.checkPlaceholderSize();
     }
@@ -10156,7 +10156,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 value = customVal;
             }
             if (this.isPopupOpen() && this.mode !== 'CheckBox') {
-                this.hidePopup();
+                this.hidePopup(e);
             }
             if (!this.inputFocus) {
                 this.inputElement.focus();
@@ -10196,7 +10196,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.expandTextbox();
     }
     removeAllItems(value, eve, isClearAll, element, mainElement) {
-        const index = this.value.indexOf(value);
+        let index = this.value.indexOf(value);
         const removeVal = this.value.slice(0);
         removeVal.splice(index, 1);
         this.setProperties({ value: [].concat([], removeVal) }, true);
@@ -10269,7 +10269,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         });
                         this.invokeCheckboxSelection(element, eve, isClearAll);
                     }
-                    if (this.hideSelectedItem && this.fields.groupBy) {
+                    if (this.hideSelectedItem && this.fields.groupBy && element) {
                         this.hideGroupItem(value);
                     }
                     if (this.hideSelectedItem && this.fixedHeaderElement && this.fields.groupBy && this.mode !== 'CheckBox' &&
@@ -11108,15 +11108,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     updateDataList() {
-        if (this.mainList && this.ulElement) {
-            const isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
-            const isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 &&
-                this.ulElement.children[0].childElementCount > 0) &&
-                (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
-            const 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 (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction)) {
+            let isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
+            let isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
+            let 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;
@@ -11333,7 +11328,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.focusAtFirstListItem();
                 }
                 if (this.closePopupOnSelect) {
-                    this.hidePopup();
+                    this.hidePopup(e);
                 }
                 else {
                     e.preventDefault();
@@ -11524,7 +11519,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
      */
     showSpinner() {
         if (isNullOrUndefined(this.spinnerElement)) {
-            const filterClear = this.filterParent && this.filterParent.querySelector('.e-clear-icon.e-icons');
+            let filterClear = this.filterParent && this.filterParent.querySelector('.e-clear-icon.e-icons');
             if (this.overAllClear.style.display !== 'none' || filterClear) {
                 this.spinnerElement = filterClear ? filterClear : this.overAllClear;
             }
@@ -11601,7 +11596,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             const raminElement = this.createElement('span', {
                 className: REMAIN_WRAPPER$1
             });
-            const remainCompildTemp = remainContent.replace('${count}', this.value.length.toString());
+            let remainCompildTemp = remainContent.replace('${count}', this.value.length.toString());
             raminElement.innerText = remainCompildTemp;
             this.viewWrapper.appendChild(raminElement);
             this.renderReactTemplates();
@@ -11681,8 +11676,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             viewWrapper.removeChild(viewWrapper.firstChild);
         }
         raminElement.innerHTML = '';
-        const remainTemp = remainContent.replace('${count}', remaining.toString());
-        const totalTemp = totalContent.replace('${count}', remaining.toString());
+        let remainTemp = remainContent.replace('${count}', remaining.toString());
+        let totalTemp = totalContent.replace('${count}', remaining.toString());
         raminElement.innerText = (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3) ? remainTemp : totalTemp;
         if (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3) {
             viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER$1);
@@ -11870,9 +11865,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             else {
                 for (let i = 0; i < li.length && i < count; i++) {
                     this.removeHover();
-                    const customVal = li[i].getAttribute('data-value');
-                    const value = this.getFormattedValue(customVal);
-                    const mainElement = this.mainList ? this.mainList.querySelectorAll(state ?
+                    let customVal = li[i].getAttribute('data-value');
+                    let value = this.getFormattedValue(customVal);
+                    let mainElement = this.mainList ? this.mainList.querySelectorAll(state ?
                         'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide)' :
                         'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)')[i] : null;
                     if (state) {
@@ -12135,7 +12130,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     break;
                 case 'popupHeight':
                     if (this.popupObj) {
-                        const overAllHeight = parseInt(this.popupHeight, 10);
+                        let overAllHeight = parseInt(this.popupHeight, 10);
                         if (this.popupHeight !== 'auto') {
                             this.list.style.maxHeight = formatUnit(overAllHeight);
                             this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);
@@ -12173,21 +12168,23 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.renderPopup();
     }
     presentItemValue(ulElement) {
-        const valuecheck = [];
+        let valuecheck = [];
         for (let i = 0; i < this.value.length; i++) {
-            const checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);
+            let checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);
             if (!checkEle) {
                 valuecheck.push(this.value[i]);
             }
         }
         return valuecheck;
     }
+    ;
     addNonPresentItems(valuecheck, ulElement, list, event) {
         this.dataSource.executeQuery(this.getForQuery(valuecheck)).then((e) => {
             this.addItem(e.result, list.length);
             this.updateActionList(ulElement, list, event);
         });
     }
+    ;
     updateVal(newProp, oldProp, prop) {
         if (!this.list) {
             this.onLoadSelect();
@@ -12200,7 +12197,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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;
@@ -12254,7 +12251,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
      *
      * @returns {void}
      */
-    hidePopup() {
+    hidePopup(e) {
         const delay = 100;
         if (this.isPopupOpen()) {
             const animModel = {
@@ -12262,7 +12259,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 duration: 100,
                 delay: delay ? delay : 0
             };
-            const eventArgs = { popup: this.popupObj, cancel: false, animation: animModel };
+            const eventArgs = { popup: this.popupObj, cancel: false, animation: animModel, event: e || null };
             this.trigger('close', eventArgs, (eventArgs) => {
                 if (!eventArgs.cancel) {
                     if (this.fields.groupBy && this.mode !== 'CheckBox' && this.fixedHeaderElement) {
@@ -12309,7 +12306,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 const mainLiLength = this.ulElement.querySelectorAll('li.' + 'e-list-item').length;
                 const 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;
                 }
@@ -13409,6 +13406,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     }
     initWrapper() {
         const 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');
@@ -13694,14 +13692,14 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     triggerDrag(args) {
         let scrollParent;
         let boundRect;
-        const scrollMoved = 36;
+        let scrollMoved = 36;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const event = args.event;
+        let event = args.event;
         let 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 {
@@ -13734,12 +13732,12 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
     }
     beforeDragEnd(args) {
-        const 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);
     }
@@ -13755,8 +13753,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         const getArgs = this.getDragArgs({ target: args.droppedElement }, true);
         const sourceArgs = { previousData: this.dataSource };
         const destArgs = { previousData: listObj.dataSource };
-        let dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource },
-            previousIndex: args.previousIndex, currentIndex: args.currentIndex });
+        let dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource }, previousIndex: args.previousIndex, currentIndex: args.currentIndex });
         if (listObj !== this) {
             const sourceArgs1 = extend(sourceArgs, { currentData: this.listData });
             dragArgs = extend(dragArgs, { source: sourceArgs1, destination: destArgs });
@@ -13850,14 +13847,14 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 currIdx++;
             });
             if (this.fields.groupBy) {
-                const sourceElem = this.renderItems(this.listData, this.fields);
+                let sourceElem = this.renderItems(this.listData, this.fields);
                 this.updateListItems(sourceElem, this.ulElement);
                 this.setSelection();
             }
             if (listObj.sortOrder !== 'None' || this.selectionSettings.showCheckbox
                 !== listObj.selectionSettings.showCheckbox || listObj.fields.groupBy || listObj.itemTemplate || this.itemTemplate) {
                 const sortable = getComponent(ul, 'sortable');
-                const sourceElem = listObj.renderItems(listData, listObj.fields);
+                let sourceElem = listObj.renderItems(listData, listObj.fields);
                 listObj.updateListItems(sourceElem, ul);
                 this.setSelection();
                 if (sortable.placeHolderElement) {
@@ -13887,7 +13884,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     }
     updateListItems(sourceElem, destElem) {
         const i = 0;
-        destElem.innerHTML = '';
+        destElem.innerHTML = "";
         while (i < sourceElem.childNodes.length) {
             destElem.appendChild(sourceElem.childNodes[i]);
         }
@@ -13947,7 +13944,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     enableItems(items, enable = true, isValue) {
         let li;
         items.forEach((item) => {
-            const text = item;
+            let text = item;
             li = this.findListElement(this.list, 'li', 'data-value', isValue ? text : this.getValueByText(text));
             if (!li) {
                 return;
@@ -14678,7 +14675,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             });
             if (isRefresh) {
                 if (fListBox.fields.groupBy) {
-                    const sourceElem = fListBox.renderItems(listData, fListBox.fields);
+                    let sourceElem = fListBox.renderItems(listData, fListBox.fields);
                     fListBox.updateListItems(sourceElem, fListBox.ulElement);
                 }
                 else {
@@ -14711,7 +14708,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             tListBox.jsonData = tJsonData;
             tListBox.sortedData = tSortData;
             if (isRefresh) {
-                const sourceElem = tListBox.renderItems(tListData, tListBox.fields);
+                let sourceElem = tListBox.renderItems(tListData, tListBox.fields);
                 tListBox.updateListItems(sourceElem, tListBox.ulElement);
                 tListBox.setSelection();
                 fListBox.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
@@ -14800,7 +14797,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         tListBox.jsonData = jsonData;
         fListBox.listData = fListBox.sortedData = fListBox.jsonData = [];
         if (isRefresh) {
-            const sourceElem = tListBox.renderItems(listData, tListBox.fields);
+            let sourceElem = tListBox.renderItems(listData, tListBox.fields);
             tListBox.updateListItems(sourceElem, tListBox.ulElement);
             this.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
         }
@@ -14852,6 +14849,15 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         return listObj;
     }
     getGrabbedItems() {
+        for (let i = 0; i < this.value.length; i++) {
+            if (this.value[i] === this.dragValue) {
+                const liColl = this.list.querySelectorAll('[aria-selected="true"]');
+                for (let i = 0; i < liColl.length; i++) {
+                    liColl[i].classList.add('e-grabbed');
+                }
+                break;
+            }
+        }
         const elems = Array.prototype.slice.call(this.element.querySelectorAll('.e-grabbed'));
         return elems;
     }
@@ -14908,7 +14914,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                     }
                 }
             }
-            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);
             }
         }
@@ -14951,9 +14957,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 this.selectHandler({ target: ul.children[fliIdx], ctrlKey: e.ctrlKey, shiftKey: e.shiftKey }, true);
             }
             if (this.selectionSettings.showCheckbox && e.ctrlKey && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
-                const selectedidx = Array.prototype.indexOf.call(ul.children, fli);
-                const sidx = e.code === 'Home' ? 0 : selectedidx;
-                const eidx = e.code === 'Home' ? selectedidx : ul.children.length - 1;
+                let selectedidx = Array.prototype.indexOf.call(ul.children, fli);
+                let sidx = e.code === "Home" ? 0 : selectedidx;
+                let eidx = e.code === "Home" ? selectedidx : ul.children.length - 1;
                 for (let i = sidx; i <= eidx; i++) {
                     const item = ul.children[i];
                     this.notify('updatelist', { li: item, e: {