@syncfusion/ej2-dropdowns 20.1.51 → 20.1.52

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.1.51
+*  version : 20.1.52
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@20.1.50",
+  "_id": "@syncfusion/ej2-dropdowns@20.1.51",
   "_inBundle": false,
-  "_integrity": "sha512-42Na+hugdkCNsRVtXmVZOYhn0yKFOJSd5UZcM+Jp4nCAL/QINQ+d9Q8wGoUe6t5fQpa/LDnud77tKVzrBcs+KA==",
+  "_integrity": "sha512-zSL6Qrd71sPFgHBVxXblO4qat12RY1rjR3akiVwYPceXe/CciHvg21sqc1Bhj0D69QNz/o42vy8p6ThxO57/Yg==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -33,8 +33,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.1.50.tgz",
-  "_shasum": "d83ce921a44211784a755b3f4fca309370e950d4",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.1.51.tgz",
+  "_shasum": "c54ea7661ce165a7677891a3edffe43ed6ab21df",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -72,6 +72,6 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "20.1.51",
+  "version": "20.1.52",
   "sideEffects": false
 }

package/src/auto-complete/auto-complete.js

@@ -202,7 +202,9 @@ var AutoComplete = /** @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 });
         }

package/src/combo-box/combo-box.js

@@ -338,7 +338,7 @@ var ComboBox = /** @class */ (function (_super) {
                 }
             }
             if (!this.isAndroidAutoFill(currentValue)) {
-                this.setAutoFillSelection(currentValue);
+                this.setAutoFillSelection(currentValue, isHover);
             }
         }
     };
@@ -406,7 +406,8 @@ var ComboBox = /** @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())) {
@@ -414,7 +415,7 @@ var ComboBox = /** @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);
         }

package/src/common/incremental-search.js

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

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

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

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

@@ -2498,7 +2498,7 @@ var DropDownList = /** @class */ (function (_super) {
         if (!this.enabled) {
             return;
         }
-        if (this.isFiltering() && this.dataSource instanceof DataManager && (this.actionData.list != this.actionCompleteData.list) &&
+        if (this.isFiltering() && this.dataSource instanceof DataManager && (this.actionData.list !== this.actionCompleteData.list) &&
             this.actionData.list && this.actionData.ulElement) {
             this.actionCompleteData = this.actionData;
             this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list, null, true);

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

@@ -172,7 +172,7 @@ export interface DropDownTreeModel extends ComponentModel{
     cssClass?: string;
 
     /**
-     * This property is used to customize the display text of the selected items in the Dropdown Tree. The given custom template is 
+     * This property is used to customize the display text of the selected items in the Dropdown Tree. The given custom template is
      * added to the input instead of the selected item text in the Dropdown Tree when the multi-selection or checkbox support is enabled.
      *
      * @default "${value.length} item(s) selected"
@@ -308,7 +308,7 @@ export interface DropDownTreeModel extends ComponentModel{
      * * Delimiter : Selected items will be visualized in the text content.
      * * Default : On focus in component will act in the box mode. On blur component will act in the delimiter mode.
      * * Custom : Selected items will be visualized with the given custom template value. The given custom template
-     *  is added to the input instead of the selected item text in the Dropdown Tree when the multi-selection or checkbox support is enabled. 
+     *  is added to the input instead of the selected item text in the Dropdown Tree when the multi-selection or checkbox support is enabled.
      */
     mode?: Mode;
 

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

@@ -2276,7 +2276,7 @@ var DropDownTree = /** @class */ (function (_super) {
             addClass([this.inputWrapper], SHOW_CHIP);
         }
         var chip = this.createElement('span', {
-            className: CHIP,
+            className: CHIP
         });
         if (!this.inputEle.classList.contains(CHIP_INPUT)) {
             addClass([this.inputEle], CHIP_INPUT);
@@ -2413,7 +2413,7 @@ var DropDownTree = /** @class */ (function (_super) {
         this.ensurePlaceHolder();
     };
     DropDownTree.prototype.resetValue = function (isDynamicChange) {
-        if (this.value == [] && this.text == null) {
+        if (this.value === [] && this.text === null) {
             return;
         }
         Input.setValue(null, this.inputEle, this.floatLabelType);
@@ -2795,10 +2795,10 @@ var DropDownTree = /** @class */ (function (_super) {
                     this.updateTreeSettings(newProp);
                     break;
                 case 'customTemplate':
-                    if (this.mode !== "Custom") {
+                    if (this.mode !== 'Custom') {
                         return;
                     }
-                    this.chipCollection.innerHTML = "";
+                    this.chipCollection.innerHTML = '';
                     this.setTagValues();
                     break;
                 case 'sortOrder':
@@ -3015,7 +3015,7 @@ var DropDownTree = /** @class */ (function (_super) {
         Property('')
     ], DropDownTree.prototype, "cssClass", void 0);
     __decorate([
-        Property("${value.length} item(s) selected")
+        Property('${value.length} item(s) selected')
     ], DropDownTree.prototype, "customTemplate", void 0);
     __decorate([
         Property(',')

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

@@ -426,10 +426,10 @@ var ListBox = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var event = args.event;
         var wrapper;
-        if (args.target && (args.target.classList.contains("e-listbox-wrapper") || args.target.classList.contains("e-list-item")
-            || args.target.classList.contains("e-filter-parent") || args.target.classList.contains("e-input-group"))) {
-            if (args.target.classList.contains("e-list-item") || args.target.classList.contains("e-filter-parent")
-                || args.target.classList.contains("e-input-group")) {
+        if (args.target && (args.target.classList.contains('e-listbox-wrapper') || args.target.classList.contains('e-list-item')
+            || args.target.classList.contains('e-filter-parent') || args.target.classList.contains('e-input-group'))) {
+            if (args.target.classList.contains('e-list-item') || args.target.classList.contains('e-filter-parent')
+                || args.target.classList.contains('e-input-group')) {
                 wrapper = args.target.closest('.e-listbox-wrapper');
             }
             else {
@@ -484,7 +484,8 @@ var ListBox = /** @class */ (function (_super) {
         var getArgs = this.getDragArgs({ target: args.droppedElement }, true);
         var sourceArgs = { previousData: this.dataSource };
         var destArgs = { previousData: listObj.dataSource };
-        var dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource }, previousIndex: args.previousIndex, currentIndex: args.currentIndex });
+        var dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource },
+            previousIndex: args.previousIndex, currentIndex: args.currentIndex });
         if (listObj !== this) {
             var sourceArgs1 = extend(sourceArgs, { currentData: this.listData });
             dragArgs = extend(dragArgs, { source: sourceArgs1, destination: destArgs });
@@ -615,7 +616,7 @@ var ListBox = /** @class */ (function (_super) {
     };
     ListBox.prototype.updateListItems = function (sourceElem, destElem) {
         var i = 0;
-        destElem.innerHTML = "";
+        destElem.innerHTML = '';
         while (i < sourceElem.childNodes.length) {
             destElem.appendChild(sourceElem.childNodes[i]);
         }
@@ -804,6 +805,8 @@ var ListBox = /** @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.
@@ -1054,7 +1057,10 @@ var ListBox = /** @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);
             }
@@ -1650,7 +1656,7 @@ var ListBox = /** @class */ (function (_super) {
                     }
                 }
             }
-            else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== "KeyA") {
+            else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== 'KeyA') {
                 this.upDownKeyHandler(e);
             }
         }
@@ -1694,8 +1700,8 @@ var ListBox = /** @class */ (function (_super) {
             }
             if (this.selectionSettings.showCheckbox && e.ctrlKey && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
                 var selectedidx = Array.prototype.indexOf.call(ul.children, fli);
-                var sidx = e.code === "Home" ? 0 : selectedidx;
-                var eidx = e.code === "Home" ? selectedidx : ul.children.length - 1;
+                var sidx = e.code === 'Home' ? 0 : selectedidx;
+                var eidx = e.code === 'Home' ? selectedidx : ul.children.length - 1;
                 for (var i = sidx; i <= eidx; i++) {
                     var item = ul.children[i];
                     this.notify('updatelist', { li: item, e: {

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

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

package/src/multi-select/multi-select.js

@@ -660,7 +660,7 @@ var MultiSelect = /** @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);
@@ -1055,7 +1055,7 @@ var MultiSelect = /** @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);
             }
         }
@@ -2467,8 +2467,13 @@ var MultiSelect = /** @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;
@@ -3540,7 +3545,6 @@ var MultiSelect = /** @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) {
@@ -3548,7 +3552,6 @@ var MultiSelect = /** @class */ (function (_super) {
             _this.updateActionList(ulElement, list, event);
         });
     };
-    ;
     MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
         if (!this.list) {
             this.onLoadSelect();
@@ -3561,7 +3564,7 @@ var MultiSelect = /** @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;