@syncfusion/ej2-dropdowns 19.4.42 → 19.4.52

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

@@ -216,6 +216,7 @@ const HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';
 const FOOTERTEMPLATE_PROPERTY = 'FooterTemplate';
 const NORECORDSTEMPLATE_PROPERTY = 'NoRecordsTemplate';
 const ACTIONFAILURETEMPLATE_PROPERTY = 'ActionFailureTemplate';
+const HIDE_GROUPLIST = 'e-hide-group-header';
 /**
  * DropDownBase component will generate the list items based on given data and act as base class to drop-down related components
  */
@@ -636,7 +637,7 @@ let DropDownBase = class DropDownBase extends Component {
                             }
                             this.bindChildItems(localDataArgs.result, ulElement, fields);
                             setTimeout(() => {
-                                if (this.getModuleName() === 'multiselect' && this.itemTemplate != null && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
+                                if (this.getModuleName() === 'multiselect' && this.itemTemplate != null && (ulElement.childElementCount > 0 && (ulElement.children[0].childElementCount > 0 || (this.fields.groupBy && ulElement.children[1] && ulElement.children[1].childElementCount > 0)))) {
                                     this.updateDataList();
                                 }
                             });
@@ -722,12 +723,23 @@ let DropDownBase = class DropDownBase extends Component {
         if (this.isReact) {
             this.clearTemplate(['itemTemplate', 'groupTemplate', 'actionFailureTemplate', 'noRecordsTemplate']);
         }
-        this.list.innerHTML = '';
         this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;
-        this.list.appendChild(ulElement);
-        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-        this.ulElement = this.list.querySelector('ul');
-        this.postRender(this.list, list, this.bindEvent);
+        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 == "") {
+                        addClass([ulElement.children[i]], HIDE_GROUPLIST);
+                    }
+                }
+            }
+        }
+        if (!isNullOrUndefined(this.list)) {
+            this.list.innerHTML = '';
+            this.list.appendChild(ulElement);
+            this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+            this.ulElement = this.list.querySelector('ul');
+            this.postRender(this.list, list, this.bindEvent);
+        }
     }
     /* eslint-disable @typescript-eslint/no-unused-vars */
     postRender(listElement, list, bindEvent) {
@@ -772,7 +784,7 @@ let DropDownBase = class DropDownBase extends Component {
                 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++) {
+                    for (let i = 0; i < tempHeaders.length; i++) {
                         this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
                     }
                 }
@@ -782,7 +794,7 @@ let DropDownBase = class DropDownBase extends Component {
                 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++) {
+                    for (let i = 0; i < tempHeaders.length; i++) {
                         this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
                     }
                 }
@@ -3609,7 +3621,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     checkCustomValue() {
         this.itemData = this.getDataByValue(this.value);
         const dataItem = this.getItemData();
-        this.setProperties({ 'value': dataItem.value, 'text': dataItem.text });
+        this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
     }
     updateInputFields() {
         if (this.getModuleName() === 'dropdownlist') {
@@ -3680,6 +3692,21 @@ let DropDownList = class DropDownList extends DropDownBase {
                                 this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
                                 this.setSelectionData(newProp.text, oldProp.text, 'text');
                             }
+                            else if (newProp.text && this.dataSource instanceof DataManager) {
+                                const listLength = this.getItems().length;
+                                const checkField = isNullOrUndefined(this.fields.text) ? this.fields.value : this.fields.text;
+                                this.typedString = '';
+                                this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', newProp.text)))
+                                    .then((e) => {
+                                    if (e.result.length > 0) {
+                                        this.addItem(e.result, listLength);
+                                        this.updateValues();
+                                    }
+                                    else {
+                                        this.setOldText(oldProp.text);
+                                    }
+                                });
+                            }
                             else {
                                 this.setOldText(oldProp.text);
                             }
@@ -3706,6 +3733,21 @@ let DropDownList = class DropDownList extends DropDownBase {
                                 this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
                                 this.setSelectionData(newProp.value, oldProp.value, 'value');
                             }
+                            else if (newProp.value && this.dataSource instanceof DataManager) {
+                                const listLength = this.getItems().length;
+                                const checkField = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
+                                this.typedString = '';
+                                this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', newProp.value)))
+                                    .then((e) => {
+                                    if (e.result.length > 0) {
+                                        this.addItem(e.result, listLength);
+                                        this.updateValues();
+                                    }
+                                    else {
+                                        this.setOldValue(oldProp.value);
+                                    }
+                                });
+                            }
                             else {
                                 this.setOldValue(oldProp.value);
                             }
@@ -8908,7 +8950,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         return ariaAttributes;
     }
     updateListARIA() {
-        attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
+        if (!isNullOrUndefined(this.ulElement)) {
+            attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
+        }
         const disableStatus = (this.inputElement.disabled) ? true : false;
         attributes(this.inputElement, this.getAriaAttributes());
         if (disableStatus) {
@@ -11036,8 +11080,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     updateDataList() {
-        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;
+        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.children[0].childElementCount > 0 || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
+            if (isDynamicGroupItemUpdate || isReactTemplateUpdate || isAngularTemplateUpdate) {
+                this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
+            }
         }
     }
     isValidLI(li) {
@@ -11384,11 +11433,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     wireListEvents() {
-        EventHandler.add(document, 'mousedown', this.onDocumentClick, this);
-        EventHandler.add(this.list, 'mousedown', this.onListMouseDown, this);
-        EventHandler.add(this.list, 'mouseup', this.onMouseClick, this);
-        EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
-        EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
+        if (!isNullOrUndefined(this.list)) {
+            EventHandler.add(document, 'mousedown', this.onDocumentClick, this);
+            EventHandler.add(this.list, 'mousedown', this.onListMouseDown, this);
+            EventHandler.add(this.list, 'mouseup', this.onMouseClick, this);
+            EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
+            EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
+        }
     }
     unwireListEvents() {
         EventHandler.remove(document, 'mousedown', this.onDocumentClick);
@@ -12509,6 +12560,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.mainData = null;
         this.filterParent = null;
         this.ulElement = null;
+        this.mainListCollection = null;
         super.destroy();
         const temp = ['readonly', 'aria-disabled', 'aria-placeholder', 'placeholder'];
         let length = temp.length;
@@ -13925,9 +13977,10 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                     }
                     if (objValue === dataValue) {
                         itemIdx = this.getIndexByValue(dataValue);
-                        liCollections.push(liElement[itemIdx]);
-                        removeIdxes.push(i);
-                        removeLiIdxes.push(itemIdx);
+                        const idx = itemIdx === i ? itemIdx : i;
+                        liCollections.push(liElement[idx]);
+                        removeIdxes.push(idx);
+                        removeLiIdxes.push(idx);
                     }
                 }
             }