@syncfusion/ej2-dropdowns 20.1.51 → 20.1.56

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,7 +330,8 @@ 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);
                         }
                     });
@@ -756,7 +757,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);
                     }
                 }
@@ -1243,7 +1244,8 @@ 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) {
@@ -2952,7 +2954,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             if (this.initRemoteRender) {
                 this.initial = true;
                 this.activeIndex = this.index;
-                this.updateValues();
                 this.initRemoteRender = false;
                 this.initial = false;
                 if (this.value && this.dataSource instanceof DataManager) {
@@ -2965,8 +2966,17 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                                 _this.addItem(e.result, list.length);
                                 _this.updateValues();
                             }
+                            else {
+                                _this.updateValues();
+                            }
                         });
                     }
+                    else {
+                        this.updateValues();
+                    }
+                }
+                else {
+                    this.updateValues();
                 }
             }
             if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {
@@ -3959,7 +3969,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);
@@ -6501,7 +6511,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);
@@ -6637,7 +6647,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);
@@ -7019,10 +7029,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':
@@ -7239,7 +7249,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(',')
@@ -7717,7 +7727,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             if (!this.isAndroidAutoFill(currentValue)) {
-                this.setAutoFillSelection(currentValue);
+                this.setAutoFillSelection(currentValue, isHover);
             }
         }
     };
@@ -7785,7 +7795,8 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
             e.preventDefault();
         }
     };
-    ComboBox.prototype.setAutoFillSelection = function (currentValue) {
+    ComboBox.prototype.setAutoFillSelection = function (currentValue, isKeyNavigate) {
+        if (isKeyNavigate === void 0) { isKeyNavigate = false; }
         var selection = this.getSelectionPoints();
         var value = this.inputElement.value.substr(0, selection.start);
         if (value && (value.toLowerCase() === currentValue.substr(0, selection.start).toLowerCase())) {
@@ -7793,7 +7804,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
             Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);
             this.inputElement.setSelectionRange(selection.start, this.inputElement.value.length);
         }
-        else {
+        else if (isKeyNavigate) {
             Input.setValue(currentValue, this.inputElement, this.floatLabelType, this.showClearButton);
             this.inputElement.setSelectionRange(0, this.inputElement.value.length);
         }
@@ -8429,7 +8440,9 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
             this.setScrollPosition(e);
             if (this.autofill && this.isPopupOpen) {
                 this.preventAutoFill = false;
-                _super.prototype.setAutoFill.call(this, li);
+                var isKeyNavigate = (e && e.action === 'down' || e.action === 'up' ||
+                    e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown');
+                _super.prototype.setAutoFill.call(this, li, isKeyNavigate);
             }
             attributes(this.inputElement, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
         }
@@ -9440,7 +9453,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);
@@ -9835,7 +9848,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);
             }
         }
@@ -11247,8 +11260,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     MultiSelect.prototype.updateDataList = function () {
         if (this.mainList && this.ulElement) {
             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;
@@ -12320,7 +12338,6 @@ 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) {
@@ -12328,7 +12345,6 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             _this.updateActionList(ulElement, list, event);
         });
     };
-    
     MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
         if (!this.list) {
             this.onLoadSelect();
@@ -12341,7 +12357,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;
@@ -13875,10 +13891,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 {
@@ -13933,7 +13949,8 @@ 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 });
@@ -14064,7 +14081,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]);
         }
@@ -14253,6 +14270,8 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         if (this.listData.length === 0) {
             this.l10nUpdate();
         }
+        this.value = null;
+        this.updateToolBarState();
     };
     /**
      * Gets the array of data Object that matches the given array of values.
@@ -14503,7 +14522,10 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
         if (this.allowFiltering) {
             var filterType = this.inputString === '' ? 'contains' : this.filterType;
-            var dataType = this.typeOfData(this.jsonData).typeof;
+            var dataType = this.typeOfData(this.dataSource).typeof;
+            if (dataType === null) {
+                dataType = this.typeOfData(this.jsonData).typeof;
+            }
             if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                 filterQuery.where('', filterType, this.inputString, this.ignoreCase, this.ignoreAccent);
             }
@@ -15099,7 +15121,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);
             }
         }
@@ -15143,8 +15165,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: {