@syncfusion/ej2-dropdowns 19.4.41 → 19.4.50

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
  */
@@ -724,6 +725,15 @@ let DropDownBase = class DropDownBase extends Component {
         }
         this.list.innerHTML = '';
         this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;
+        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);
+                    }
+                }
+            }
+        }
         this.list.appendChild(ulElement);
         this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
         this.ulElement = this.list.querySelector('ul');
@@ -772,7 +782,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 +792,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] });
                     }
                 }
@@ -1199,7 +1209,8 @@ let DropDownBase = class DropDownBase extends Component {
                 li.innerText = itemText;
             }
             if (this.itemTemplate && !isHeader) {
-                const compiledString = compile(this.itemTemplate);
+                const itemCheck = this.templateCompiler(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) {
@@ -3608,7 +3619,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') {
@@ -3679,6 +3690,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);
                             }
@@ -3705,6 +3731,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);
                             }
@@ -12048,6 +12089,17 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.notify('selectAllText', false);
                     break;
                 case 'popupHeight':
+                    if (this.popupObj) {
+                        let overAllHeight = parseInt(this.popupHeight, 10);
+                        if (this.popupHeight !== 'auto') {
+                            this.list.style.maxHeight = formatUnit(overAllHeight);
+                            this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);
+                        }
+                        else {
+                            this.list.style.maxHeight = formatUnit(this.popupHeight);
+                        }
+                    }
+                    break;
                 case 'headerTemplate':
                 case 'footerTemplate':
                     this.reInitializePoup();
@@ -12497,6 +12549,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;
@@ -13913,9 +13966,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);
                     }
                 }
             }