@syncfusion/ej2-dropdowns 20.1.61 → 20.2.39

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 {
@@ -2961,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; });
@@ -2984,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
@@ -3412,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)) {
@@ -3462,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'))) {
@@ -3975,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);
@@ -4037,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 ||
@@ -6519,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);
@@ -6655,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);
@@ -7037,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':
@@ -7257,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(',')
@@ -8898,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 = [];
@@ -9395,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()) {
@@ -9464,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);
@@ -9555,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;
@@ -9633,6 +9632,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
+        this.updateDataList();
         this.refreshListItems(null);
         if (this.mode !== 'Box' && this.mode !== 'CheckBox') {
             this.updateDelimView();
@@ -9643,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');
@@ -9837,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();
                 }
@@ -9859,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);
             }
         }
@@ -9919,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();
                     }
@@ -9936,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);
             }
@@ -9964,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();
@@ -10012,7 +10015,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         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 {
@@ -10158,7 +10161,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             }
             this.refreshSelection();
             if (this.closePopupOnSelect) {
-                this.hidePopup();
+                this.hidePopup(e);
             }
         }
         this.refreshPlaceHolder();
@@ -10190,7 +10193,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             this.makeTextBoxEmpty();
         }
         if (this.closePopupOnSelect) {
-            this.hidePopup();
+            this.hidePopup(e);
         }
         this.checkPlaceholderSize();
     };
@@ -10310,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();
@@ -10424,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' &&
@@ -11268,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;
@@ -11495,7 +11493,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     this.focusAtFirstListItem();
                 }
                 if (this.closePopupOnSelect) {
-                    this.hidePopup();
+                    this.hidePopup(e);
                 }
                 else {
                     e.preventDefault();
@@ -12348,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) {
@@ -12355,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();
@@ -12367,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;
@@ -12421,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()) {
@@ -12430,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) {
@@ -12478,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;
                 }
@@ -13685,8 +13685,8 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             });
         }
     };
-    ListBox.prototype.updateActionCompleteData = function (li, item) {
-        this.jsonData.push(item);
+    ListBox.prototype.updateActionCompleteData = function (li, item, index) {
+        this.jsonData.splice(index, 0, item);
     };
     ListBox.prototype.initToolbar = function () {
         var pos = this.toolbarSettings.position;
@@ -13902,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 {
@@ -13960,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 });
@@ -14092,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]);
         }
@@ -14232,7 +14231,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             var objValue = void 0;
             var dupData = [];
             var itemIdx = void 0;
-            extend(dupData, [], this.listData);
+            extend(dupData, [], this.jsonData);
             var removeIdxes = [];
             var removeLiIdxes = [];
             for (var j = 0; j < items.length; j++) {
@@ -15085,7 +15084,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                 break;
             }
         }
-        var elems = Array.prototype.slice.call(this.element.nextElementSibling.querySelectorAll('.e-grabbed'));
+        var elems = Array.prototype.slice.call(this.element.querySelectorAll('.e-grabbed'));
         return elems;
     };
     ListBox.prototype.getDragArgs = function (args, isDragEnd) {
@@ -15141,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);
             }
         }
@@ -15185,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: {