@syncfusion/ej2-dropdowns 20.1.51 → 20.1.56

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,7 +308,8 @@ 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);
                         }
                     });
@@ -731,7 +732,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);
                     }
                 }
@@ -858,8 +859,8 @@ let DropDownBase = class DropDownBase extends Component {
         this.scrollStop(e);
     }
     scrollStop(e) {
-        let target = !isNullOrUndefined(e) ? e.target : this.list;
-        let liHeight = parseInt(getComputedStyle(this.getValidLi(), null).getPropertyValue('height'), 10);
+        const target = !isNullOrUndefined(e) ? e.target : this.list;
+        const 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--) {
@@ -947,10 +948,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)) {
-                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);
+                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);
                 borderWidth = (borderTopWidth + borderBottomWidth + borderLeftWidth + borderRightWidth);
             }
         }
@@ -1217,7 +1218,8 @@ 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) {
@@ -2388,9 +2390,9 @@ let DropDownList = class DropDownList extends DropDownBase {
             detach(this.valueTempElement);
             this.inputElement.style.display = 'block';
         }
-        let clearIcon = dropDownListClasses.clearIcon;
-        let isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');
-        let clearElement = isFilterElement && this.filterInput.parentElement.querySelector('.' + clearIcon);
+        const clearIcon = dropDownListClasses.clearIcon;
+        const isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');
+        const clearElement = isFilterElement && this.filterInput.parentElement.querySelector('.' + clearIcon);
         if (this.isFiltering() && clearElement) {
             clearElement.style.removeProperty('visibility');
         }
@@ -2902,7 +2904,6 @@ let DropDownList = class DropDownList extends DropDownBase {
             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) {
@@ -2915,8 +2916,17 @@ let DropDownList = class DropDownList extends DropDownBase {
                                 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) {
@@ -3895,7 +3905,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);
@@ -5490,7 +5500,7 @@ let DropDownTree = class DropDownTree extends Component {
         }
         else {
             if (this.showCheckBox) {
-                let difference = this.value.filter((e) => {
+                const difference = this.value.filter((e) => {
                     return this.treeObj.checkedNodes.indexOf(e) === -1;
                 });
                 if (difference.length > 0 || this.treeSettings.autoCheck) {
@@ -6253,7 +6263,7 @@ let DropDownTree = class DropDownTree extends Component {
         }
         else if (this.treeDataType === 1) {
             for (let i = 0, objlen = this.treeItems.length; i < objlen; i++) {
-                let dataId = getValue(this.fields.value, this.treeItems[i]);
+                const dataId = getValue(this.fields.value, this.treeItems[i]);
                 if (!isNullOrUndefined(this.treeItems[i]) && !isNullOrUndefined(dataId) && dataId.toString() === id) {
                     return this.treeItems[i];
                 }
@@ -6270,19 +6280,19 @@ let DropDownTree = class DropDownTree extends Component {
             return newChildItems;
         }
         for (let i = 0, objlen = obj.length; i < objlen; i++) {
-            let dataValue = getValue(mapper.value, obj[i]);
+            const 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]))) {
-                let childNodeData = getValue(mapper.child, obj[i]);
+                const 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]))) {
-                let child = 'child';
+                const child = 'child';
                 newChildItems = this.getChildNodeData(getValue(child, obj[i]), this.getChildMapperFields(mapper), id);
                 if (newChildItems !== undefined) {
                     break;
@@ -6401,7 +6411,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);
@@ -6537,7 +6547,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);
@@ -6918,10 +6928,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':
@@ -7139,7 +7149,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(',')
@@ -7600,7 +7610,7 @@ let ComboBox = class ComboBox extends DropDownList {
                 }
             }
             if (!this.isAndroidAutoFill(currentValue)) {
-                this.setAutoFillSelection(currentValue);
+                this.setAutoFillSelection(currentValue, isHover);
             }
         }
     }
@@ -7668,7 +7678,7 @@ let ComboBox = class ComboBox extends DropDownList {
             e.preventDefault();
         }
     }
-    setAutoFillSelection(currentValue) {
+    setAutoFillSelection(currentValue, isKeyNavigate = false) {
         const selection = this.getSelectionPoints();
         const value = this.inputElement.value.substr(0, selection.start);
         if (value && (value.toLowerCase() === currentValue.substr(0, selection.start).toLowerCase())) {
@@ -7676,7 +7686,7 @@ let ComboBox = class ComboBox extends DropDownList {
             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);
         }
@@ -8293,7 +8303,9 @@ let AutoComplete = class AutoComplete extends ComboBox {
             this.setScrollPosition(e);
             if (this.autofill && this.isPopupOpen) {
                 this.preventAutoFill = false;
-                super.setAutoFill(li);
+                const isKeyNavigate = (e && e.action === 'down' || e.action === 'up' ||
+                    e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown');
+                super.setAutoFill(li, isKeyNavigate);
             }
             attributes(this.inputElement, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
         }
@@ -9186,7 +9198,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     getValidLi() {
-        let liElement = this.ulElement.querySelector('li.' + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');
+        const liElement = this.ulElement.querySelector('li.' + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');
         return (!isNullOrUndefined(liElement) ? liElement : this.liCollections[0]);
     }
     checkSelectAll() {
@@ -9284,7 +9296,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);
@@ -9676,10 +9688,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (!isNullOrUndefined(focusedItem)) {
             this.inputElement.setAttribute('aria-activedescendant', focusedItem.id);
             if (this.allowFiltering) {
-                var filterInput = this.popupWrapper.querySelector('.' + FILTERINPUT);
+                const 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);
             }
         }
@@ -10171,7 +10183,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.expandTextbox();
     }
     removeAllItems(value, eve, isClearAll, element, mainElement) {
-        let index = this.value.indexOf(value);
+        const index = this.value.indexOf(value);
         const removeVal = this.value.slice(0);
         removeVal.splice(index, 1);
         this.setProperties({ value: [].concat([], removeVal) }, true);
@@ -11084,9 +11096,14 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     updateDataList() {
         if (this.mainList && this.ulElement) {
-            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));
+            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 (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;
@@ -11494,7 +11511,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
      */
     showSpinner() {
         if (isNullOrUndefined(this.spinnerElement)) {
-            let filterClear = this.filterParent && this.filterParent.querySelector('.e-clear-icon.e-icons');
+            const filterClear = this.filterParent && this.filterParent.querySelector('.e-clear-icon.e-icons');
             if (this.overAllClear.style.display !== 'none' || filterClear) {
                 this.spinnerElement = filterClear ? filterClear : this.overAllClear;
             }
@@ -11571,7 +11588,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             const raminElement = this.createElement('span', {
                 className: REMAIN_WRAPPER$1
             });
-            let remainCompildTemp = remainContent.replace('${count}', this.value.length.toString());
+            const remainCompildTemp = remainContent.replace('${count}', this.value.length.toString());
             raminElement.innerText = remainCompildTemp;
             this.viewWrapper.appendChild(raminElement);
             this.renderReactTemplates();
@@ -11651,8 +11668,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             viewWrapper.removeChild(viewWrapper.firstChild);
         }
         raminElement.innerHTML = '';
-        let remainTemp = remainContent.replace('${count}', remaining.toString());
-        let totalTemp = totalContent.replace('${count}', remaining.toString());
+        const remainTemp = remainContent.replace('${count}', remaining.toString());
+        const 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);
@@ -11840,9 +11857,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             else {
                 for (let i = 0; i < li.length && i < count; i++) {
                     this.removeHover();
-                    let customVal = li[i].getAttribute('data-value');
-                    let value = this.getFormattedValue(customVal);
-                    let mainElement = this.mainList ? this.mainList.querySelectorAll(state ?
+                    const customVal = li[i].getAttribute('data-value');
+                    const value = this.getFormattedValue(customVal);
+                    const 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) {
@@ -12105,7 +12122,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     break;
                 case 'popupHeight':
                     if (this.popupObj) {
-                        let overAllHeight = parseInt(this.popupHeight, 10);
+                        const overAllHeight = parseInt(this.popupHeight, 10);
                         if (this.popupHeight !== 'auto') {
                             this.list.style.maxHeight = formatUnit(overAllHeight);
                             this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);
@@ -12143,23 +12160,21 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.renderPopup();
     }
     presentItemValue(ulElement) {
-        let valuecheck = [];
+        const valuecheck = [];
         for (let i = 0; i < this.value.length; i++) {
-            let checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);
+            const 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();
@@ -12172,7 +12187,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;
@@ -13666,14 +13681,14 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     triggerDrag(args) {
         let scrollParent;
         let boundRect;
-        let scrollMoved = 36;
+        const scrollMoved = 36;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let event = args.event;
+        const 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 {
@@ -13727,7 +13742,8 @@ 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 });
@@ -13821,14 +13837,14 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 currIdx++;
             });
             if (this.fields.groupBy) {
-                let sourceElem = this.renderItems(this.listData, this.fields);
+                const 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');
-                let sourceElem = listObj.renderItems(listData, listObj.fields);
+                const sourceElem = listObj.renderItems(listData, listObj.fields);
                 listObj.updateListItems(sourceElem, ul);
                 this.setSelection();
                 if (sortable.placeHolderElement) {
@@ -13858,7 +13874,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]);
         }
@@ -13918,7 +13934,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     enableItems(items, enable = true, isValue) {
         let li;
         items.forEach((item) => {
-            let text = item;
+            const text = item;
             li = this.findListElement(this.list, 'li', 'data-value', isValue ? text : this.getValueByText(text));
             if (!li) {
                 return;
@@ -14043,6 +14059,8 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         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.
@@ -14284,7 +14302,10 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         let filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
         if (this.allowFiltering) {
             const filterType = this.inputString === '' ? 'contains' : this.filterType;
-            const dataType = this.typeOfData(this.jsonData).typeof;
+            let 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);
             }
@@ -14644,7 +14665,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             });
             if (isRefresh) {
                 if (fListBox.fields.groupBy) {
-                    let sourceElem = fListBox.renderItems(listData, fListBox.fields);
+                    const sourceElem = fListBox.renderItems(listData, fListBox.fields);
                     fListBox.updateListItems(sourceElem, fListBox.ulElement);
                 }
                 else {
@@ -14677,7 +14698,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             tListBox.jsonData = tJsonData;
             tListBox.sortedData = tSortData;
             if (isRefresh) {
-                let sourceElem = tListBox.renderItems(tListData, tListBox.fields);
+                const sourceElem = tListBox.renderItems(tListData, tListBox.fields);
                 tListBox.updateListItems(sourceElem, tListBox.ulElement);
                 tListBox.setSelection();
                 fListBox.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
@@ -14766,7 +14787,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         tListBox.jsonData = jsonData;
         fListBox.listData = fListBox.sortedData = fListBox.jsonData = [];
         if (isRefresh) {
-            let sourceElem = tListBox.renderItems(listData, tListBox.fields);
+            const sourceElem = tListBox.renderItems(listData, tListBox.fields);
             tListBox.updateListItems(sourceElem, tListBox.ulElement);
             this.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
         }
@@ -14874,7 +14895,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);
             }
         }
@@ -14917,9 +14938,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)) {
-                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;
+                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;
                 for (let i = sidx; i <= eidx; i++) {
                     const item = ul.children[i];
                     this.notify('updatelist', { li: item, e: {