@syncfusion/ej2-dropdowns 19.3.55 → 19.4.41

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

@@ -91,7 +91,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)) {
+            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 };
@@ -635,6 +635,11 @@ let DropDownBase = class DropDownBase extends Component {
                                 this.renderGroupTemplate(ulElement);
                             }
                             this.bindChildItems(localDataArgs.result, ulElement, fields);
+                            setTimeout(() => {
+                                if (this.getModuleName() === 'multiselect' && this.itemTemplate != null && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
+                                    this.updateDataList();
+                                }
+                            });
                         }
                     });
                 }
@@ -765,10 +770,22 @@ let DropDownBase = class DropDownBase extends Component {
                 const groupValue = select(this.groupTemplate, document).innerHTML.trim();
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 const tempHeaders = ListBase.renderGroupTemplate(groupValue, dataSource, this.fields.properties, headerItems, option, this);
+                //EJ2-55168- Group checkbox is not working with group template
+                if (this.isGroupChecking) {
+                    for (var i = 0; i < tempHeaders.length; i++) {
+                        this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
+                    }
+                }
             }
             else {
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 const tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems, option, this);
+                //EJ2-55168- Group checkbox is not working with group template
+                if (this.isGroupChecking) {
+                    for (var i = 0; i < tempHeaders.length; i++) {
+                        this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
+                    }
+                }
             }
             this.renderReactTemplates();
         }
@@ -5433,9 +5450,14 @@ let DropDownTree = class DropDownTree extends Component {
         }
         else {
             if (this.showCheckBox) {
-                this.treeObj.checkedNodes = this.value.slice();
-                this.treeObj.dataBind();
-                this.setMultiSelect();
+                let difference = this.value.filter((e) => {
+                    return this.treeObj.checkedNodes.indexOf(e) === -1;
+                });
+                if (difference.length > 0 || this.treeSettings.autoCheck) {
+                    this.treeObj.checkedNodes = this.value.slice();
+                    this.treeObj.dataBind();
+                    this.setMultiSelect();
+                }
             }
             else {
                 this.treeObj.selectedNodes = this.value.slice();
@@ -6471,6 +6493,9 @@ let DropDownTree = class DropDownTree extends Component {
         this.ensurePlaceHolder();
     }
     resetValue(isDynamicChange) {
+        if (this.value == [] && this.text == null) {
+            return;
+        }
         Input.setValue(null, this.inputEle, this.floatLabelType);
         if (!isDynamicChange) {
             this.oldValue = this.value;
@@ -6482,7 +6507,8 @@ let DropDownTree = class DropDownTree extends Component {
         setValue('selectedNodes', [], this.treeObj);
         this.hiddenElement.innerHTML = '';
         if (this.showCheckBox) {
-            this.treeObj.uncheckAll();
+            this.treeObj.checkedNodes = [];
+            this.treeObj.dataBind();
             this.setMultiSelect();
             this.clearCheckAll();
         }
@@ -6859,8 +6885,8 @@ let DropDownTree = class DropDownTree extends Component {
                         this.updateTemplate();
                     }
                     this.treeObj.sortOrder = newProp.sortOrder;
-                    this.updateValue(this.value);
                     this.treeObj.dataBind();
+                    this.updateValue(this.value);
                     break;
                 case 'showDropDownIcon':
                     this.updateDropDownIconState(newProp.showDropDownIcon);
@@ -7427,7 +7453,7 @@ let ComboBox = class ComboBox extends DropDownList {
         if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
             !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
             const inputValue = this.inputElement.value;
-            const activeItem = Search(inputValue, this.liCollections, 'StartsWith', true);
+            const activeItem = Search(inputValue, this.liCollections, this.filterType, true);
             const activeElement = activeItem.item;
             if (!isNullOrUndefined(activeElement)) {
                 const count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
@@ -7584,7 +7610,7 @@ let ComboBox = class ComboBox extends DropDownList {
         else {
             this.activeIndex = null;
             this.removeSelection();
-            if (this.liCollections && this.liCollections.length < 0) {
+            if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {
                 this.removeFocus();
             }
         }
@@ -8973,7 +8999,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.mainData = list;
             this.mainListCollection = this.liCollections;
         }
-        else if (!isNullOrUndefined(this.mainData) && this.mainData.length === 0) {
+        else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {
             this.mainData = list;
         }
         if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
@@ -9601,6 +9627,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         const focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
         if (!isNullOrUndefined(focusedItem)) {
             this.inputElement.setAttribute('aria-activedescendant', focusedItem.id);
+            if (this.allowFiltering) {
+                var filterInput = this.popupWrapper.querySelector('.' + FILTERINPUT);
+                filterInput && filterInput.setAttribute('aria-activedescendant', focusedItem.id);
+            }
+            else if (this.mode == "CheckBox") {
+                this.overAllWrapper.setAttribute('aria-activedescendant', focusedItem.id);
+            }
         }
     }
     homeNavigation(isHome) {
@@ -9716,7 +9749,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.keyAction = true;
         if (document.activeElement.classList.contains(FILTERINPUT)
             || (this.mode === 'CheckBox' && !this.allowFiltering && document.activeElement !== this.list)) {
-            this.list.focus();
             EventHandler.add(this.list, 'keydown', this.onKeyDown, this);
         }
         this.updateAriaAttribute();
@@ -10735,7 +10767,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             EventHandler.add(this.inputElement, 'input', this.onInput, this);
         }
         EventHandler.add(this.inputElement, 'blur', this.onBlurHandler, this);
-        EventHandler.add(this.componentWrapper, 'mousemove', this.mouseIn, this);
+        EventHandler.add(this.componentWrapper, 'mouseover', this.mouseIn, this);
         const formElement = closest(this.inputElement, 'form');
         if (formElement) {
             EventHandler.add(formElement, 'reset', this.resetValueHandler, this);
@@ -10983,7 +11015,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     updateActionCompleteData(li, item) {
         if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {
             this.mainList = this.ulElement;
-            addClass([li], HIDE_LIST);
+            if (this.hideSelectedItem) {
+                addClass([li], HIDE_LIST);
+            }
         }
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -11001,7 +11035,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     updateDataList() {
-        if (this.mainList && this.ulElement && this.mainList.childElementCount < this.ulElement.childElementCount) {
+        if (this.mainList && this.ulElement && (this.mainList.childElementCount < this.ulElement.childElementCount || ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount)))) {
             this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
         }
     }
@@ -11627,7 +11661,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             EventHandler.remove(formElement, 'reset', this.resetValueHandler);
         }
         EventHandler.remove(this.inputElement, 'blur', this.onBlurHandler);
-        EventHandler.remove(this.componentWrapper, 'mousemove', this.mouseIn);
+        EventHandler.remove(this.componentWrapper, 'mouseover', this.mouseIn);
         EventHandler.remove(this.componentWrapper, 'mouseout', this.mouseOut);
         EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);
         EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
@@ -11644,7 +11678,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
         }
         if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
-            let target = (event ? event.target : null);
+            let target = (event ? (this.groupTemplate ? closest(event.target, '.e-list-group-item') : event.target) : null);
             target = (event && event.keyCode === 32) ? list : target;
             target = (target && target.classList.contains('e-frame')) ? target.parentElement.parentElement : target;
             if (target && target.classList.contains('e-list-group-item')) {
@@ -12041,6 +12075,24 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.renderPopup();
     }
+    presentItemValue(ulElement) {
+        let 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]);
+            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();
@@ -12049,31 +12101,43 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.onLoadSelect();
         }
         else {
-            if (prop === 'text') {
-                this.initialTextUpdate();
-                newProp = this.value;
+            let valuecheck = [];
+            if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
+                valuecheck = this.presentItemValue(this.ulElement);
             }
-            if (isNullOrUndefined(this.value) || this.value.length === 0) {
-                this.tempValues = oldProp;
+            if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
+                && this.listData != null) {
+                this.mainData = null;
+                this.setDynValue = true;
+                this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
             }
-            // eslint-disable-next-line
-            if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
-                && this.isPopupOpen() && this.mainData !== this.listData) {
-                const list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
-                this.onActionComplete(list, this.mainData);
-            }
-            this.initialValueUpdate();
-            if (this.mode !== 'Box' && !this.inputFocus) {
-                this.updateDelimView();
-            }
-            if (!this.inputFocus) {
-                this.refreshInputHight();
-            }
-            this.refreshPlaceHolder();
-            if (this.mode !== 'CheckBox' && this.changeOnBlur) {
-                this.updateValueState(null, newProp, oldProp);
+            else {
+                if (prop === 'text') {
+                    this.initialTextUpdate();
+                    newProp = this.value;
+                }
+                if (isNullOrUndefined(this.value) || this.value.length === 0) {
+                    this.tempValues = oldProp;
+                }
+                // eslint-disable-next-line
+                if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
+                    && this.isPopupOpen() && this.mainData !== this.listData) {
+                    const list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
+                    this.onActionComplete(list, this.mainData);
+                }
+                this.initialValueUpdate();
+                if (this.mode !== 'Box' && !this.inputFocus) {
+                    this.updateDelimView();
+                }
+                if (!this.inputFocus) {
+                    this.refreshInputHight();
+                }
+                this.refreshPlaceHolder();
+                if (this.mode !== 'CheckBox' && this.changeOnBlur) {
+                    this.updateValueState(null, newProp, oldProp);
+                }
+                this.checkPlaceholderSize();
             }
-            this.checkPlaceholderSize();
         }
         if (!this.changeOnBlur) {
             this.updateValueState(null, newProp, oldProp);
@@ -13550,9 +13614,6 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             args.items = this.getDataByValues([dragValue]);
         }
         this.trigger('beforeDrop', args);
-        if (args.isDragAll !== null) {
-            this.allowDragAll = args.isDragAll;
-        }
     }
     dragEnd(args) {
         let listData;