@syncfusion/ej2-dropdowns 19.4.48 → 19.4.54

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

@@ -234,6 +234,7 @@ var HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';
 var FOOTERTEMPLATE_PROPERTY = 'FooterTemplate';
 var NORECORDSTEMPLATE_PROPERTY = 'NoRecordsTemplate';
 var ACTIONFAILURETEMPLATE_PROPERTY = 'ActionFailureTemplate';
+var 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
  */
@@ -660,7 +661,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                             }
                             _this.bindChildItems(localDataArgs.result, ulElement, fields);
                             setTimeout(function () {
-                                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();
                                 }
                             });
@@ -747,12 +748,23 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         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 (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 == "") {
+                        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 */
     DropDownBase.prototype.postRender = function (listElement, list, bindEvent) {
@@ -3682,160 +3694,195 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     DropDownList.prototype.onPropertyChanged = function (newProp, oldProp) {
+        var _this = this;
         if (this.getModuleName() === 'dropdownlist') {
             this.checkData(newProp);
             this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);
         }
-        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
-            var prop = _a[_i];
+        var _loop_1 = function (prop) {
             switch (prop) {
                 case 'query':
                 case 'dataSource': break;
                 case 'htmlAttributes':
-                    this.setHTMLAttributes();
+                    this_1.setHTMLAttributes();
                     break;
                 case 'width':
-                    this.setEleWidth(newProp.width);
+                    this_1.setEleWidth(newProp.width);
                     break;
                 case 'placeholder':
-                    Input.setPlaceholder(newProp.placeholder, this.inputElement);
+                    Input.setPlaceholder(newProp.placeholder, this_1.inputElement);
                     break;
                 case 'filterBarPlaceholder':
-                    if (this.filterInput) {
-                        Input.setPlaceholder(newProp.filterBarPlaceholder, this.filterInput);
+                    if (this_1.filterInput) {
+                        Input.setPlaceholder(newProp.filterBarPlaceholder, this_1.filterInput);
                     }
                     break;
                 case 'readonly':
-                    if (this.getModuleName() !== 'dropdownlist') {
-                        Input.setReadonly(newProp.readonly, this.inputElement);
+                    if (this_1.getModuleName() !== 'dropdownlist') {
+                        Input.setReadonly(newProp.readonly, this_1.inputElement);
                     }
-                    this.setReadOnly();
+                    this_1.setReadOnly();
                     break;
                 case 'cssClass':
-                    this.setCssClass(newProp.cssClass, oldProp.cssClass);
+                    this_1.setCssClass(newProp.cssClass, oldProp.cssClass);
                     break;
                 case 'enableRtl':
-                    this.setEnableRtl();
+                    this_1.setEnableRtl();
                     break;
                 case 'enabled':
-                    this.setEnable();
+                    this_1.setEnable();
                     break;
                 case 'text':
                     if (newProp.text === null) {
-                        this.clearAll();
+                        this_1.clearAll();
                         break;
                     }
-                    if (!this.list) {
-                        if (this.dataSource instanceof DataManager) {
-                            this.initRemoteRender = true;
+                    if (!this_1.list) {
+                        if (this_1.dataSource instanceof DataManager) {
+                            this_1.initRemoteRender = true;
                         }
-                        this.renderList();
-                    }
-                    if (!this.initRemoteRender) {
-                        var li = this.getElementByText(newProp.text);
-                        if (!this.checkValidLi(li)) {
-                            if (this.liCollections && this.liCollections.length === 100 &&
-                                this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
-                                this.setSelectionData(newProp.text, oldProp.text, 'text');
+                        this_1.renderList();
+                    }
+                    if (!this_1.initRemoteRender) {
+                        var li = this_1.getElementByText(newProp.text);
+                        if (!this_1.checkValidLi(li)) {
+                            if (this_1.liCollections && this_1.liCollections.length === 100 &&
+                                this_1.getModuleName() === 'autocomplete' && this_1.listData.length > 100) {
+                                this_1.setSelectionData(newProp.text, oldProp.text, 'text');
+                            }
+                            else if (newProp.text && this_1.dataSource instanceof DataManager) {
+                                var listLength_1 = this_1.getItems().length;
+                                var checkField = isNullOrUndefined(this_1.fields.text) ? this_1.fields.value : this_1.fields.text;
+                                this_1.typedString = '';
+                                this_1.dataSource.executeQuery(this_1.getQuery(this_1.query).where(new Predicate(checkField, 'equal', newProp.text)))
+                                    .then(function (e) {
+                                    if (e.result.length > 0) {
+                                        _this.addItem(e.result, listLength_1);
+                                        _this.updateValues();
+                                    }
+                                    else {
+                                        _this.setOldText(oldProp.text);
+                                    }
+                                });
                             }
                             else {
-                                this.setOldText(oldProp.text);
+                                this_1.setOldText(oldProp.text);
                             }
                         }
-                        this.updateInputFields();
+                        this_1.updateInputFields();
                     }
                     break;
                 case 'value':
                     if (newProp.value === null) {
-                        this.clearAll();
+                        this_1.clearAll();
                         break;
                     }
-                    this.notify('beforeValueChange', { newProp: newProp }); // gird component value type change
-                    if (!this.list) {
-                        if (this.dataSource instanceof DataManager) {
-                            this.initRemoteRender = true;
+                    this_1.notify('beforeValueChange', { newProp: newProp }); // gird component value type change
+                    if (!this_1.list) {
+                        if (this_1.dataSource instanceof DataManager) {
+                            this_1.initRemoteRender = true;
                         }
-                        this.renderList();
-                    }
-                    if (!this.initRemoteRender) {
-                        var item = this.getElementByValue(newProp.value);
-                        if (!this.checkValidLi(item)) {
-                            if (this.liCollections && this.liCollections.length === 100 &&
-                                this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
-                                this.setSelectionData(newProp.value, oldProp.value, 'value');
+                        this_1.renderList();
+                    }
+                    if (!this_1.initRemoteRender) {
+                        var item = this_1.getElementByValue(newProp.value);
+                        if (!this_1.checkValidLi(item)) {
+                            if (this_1.liCollections && this_1.liCollections.length === 100 &&
+                                this_1.getModuleName() === 'autocomplete' && this_1.listData.length > 100) {
+                                this_1.setSelectionData(newProp.value, oldProp.value, 'value');
+                            }
+                            else if (newProp.value && this_1.dataSource instanceof DataManager) {
+                                var listLength_2 = this_1.getItems().length;
+                                var checkField = isNullOrUndefined(this_1.fields.value) ? this_1.fields.text : this_1.fields.value;
+                                this_1.typedString = '';
+                                this_1.dataSource.executeQuery(this_1.getQuery(this_1.query).where(new Predicate(checkField, 'equal', newProp.value)))
+                                    .then(function (e) {
+                                    if (e.result.length > 0) {
+                                        _this.addItem(e.result, listLength_2);
+                                        _this.updateValues();
+                                    }
+                                    else {
+                                        _this.setOldValue(oldProp.value);
+                                    }
+                                });
                             }
                             else {
-                                this.setOldValue(oldProp.value);
+                                this_1.setOldValue(oldProp.value);
                             }
                         }
-                        this.updateInputFields();
-                        this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;
+                        this_1.updateInputFields();
+                        this_1.preventChange = this_1.isAngular && this_1.preventChange ? !this_1.preventChange : this_1.preventChange;
                     }
                     break;
                 case 'index':
                     if (newProp.index === null) {
-                        this.clearAll();
+                        this_1.clearAll();
                         break;
                     }
-                    if (!this.list) {
-                        if (this.dataSource instanceof DataManager) {
-                            this.initRemoteRender = true;
+                    if (!this_1.list) {
+                        if (this_1.dataSource instanceof DataManager) {
+                            this_1.initRemoteRender = true;
                         }
-                        this.renderList();
-                    }
-                    if (!this.initRemoteRender && this.liCollections) {
-                        var element = this.liCollections[newProp.index];
-                        if (!this.checkValidLi(element)) {
-                            if (this.liCollections && this.liCollections.length === 100 &&
-                                this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
-                                this.setSelectionData(newProp.index, oldProp.index, 'index');
+                        this_1.renderList();
+                    }
+                    if (!this_1.initRemoteRender && this_1.liCollections) {
+                        var element = this_1.liCollections[newProp.index];
+                        if (!this_1.checkValidLi(element)) {
+                            if (this_1.liCollections && this_1.liCollections.length === 100 &&
+                                this_1.getModuleName() === 'autocomplete' && this_1.listData.length > 100) {
+                                this_1.setSelectionData(newProp.index, oldProp.index, 'index');
                             }
                             else {
-                                this.index = oldProp.index;
+                                this_1.index = oldProp.index;
                             }
                         }
-                        this.updateInputFields();
+                        this_1.updateInputFields();
                     }
                     break;
                 case 'footerTemplate':
-                    if (this.popupObj) {
-                        this.setFooterTemplate(this.popupObj.element);
+                    if (this_1.popupObj) {
+                        this_1.setFooterTemplate(this_1.popupObj.element);
                     }
                     break;
                 case 'headerTemplate':
-                    if (this.popupObj) {
-                        this.setHeaderTemplate(this.popupObj.element);
+                    if (this_1.popupObj) {
+                        this_1.setHeaderTemplate(this_1.popupObj.element);
                     }
                     break;
                 case 'valueTemplate':
-                    if (!isNullOrUndefined(this.itemData) && this.valueTemplate != null) {
-                        this.setValueTemplate();
+                    if (!isNullOrUndefined(this_1.itemData) && this_1.valueTemplate != null) {
+                        this_1.setValueTemplate();
                     }
                     break;
                 case 'allowFiltering':
-                    if (this.allowFiltering) {
-                        this.actionCompleteData = { ulElement: this.ulElement,
-                            list: this.listData, isUpdated: true };
-                        this.actionData = this.actionCompleteData;
-                        this.updateSelectElementData(this.allowFiltering);
+                    if (this_1.allowFiltering) {
+                        this_1.actionCompleteData = { ulElement: this_1.ulElement,
+                            list: this_1.listData, isUpdated: true };
+                        this_1.actionData = this_1.actionCompleteData;
+                        this_1.updateSelectElementData(this_1.allowFiltering);
                     }
                     break;
                 case 'floatLabelType':
-                    Input.removeFloating(this.inputWrapper);
-                    Input.addFloating(this.inputElement, newProp.floatLabelType, this.placeholder, this.createElement);
+                    Input.removeFloating(this_1.inputWrapper);
+                    Input.addFloating(this_1.inputElement, newProp.floatLabelType, this_1.placeholder, this_1.createElement);
                     break;
                 case 'showClearButton':
-                    Input.setClearButton(newProp.showClearButton, this.inputElement, this.inputWrapper, null, this.createElement);
-                    this.bindClearEvent();
+                    Input.setClearButton(newProp.showClearButton, this_1.inputElement, this_1.inputWrapper, null, this_1.createElement);
+                    this_1.bindClearEvent();
                     break;
                 default:
                     {
                         // eslint-disable-next-line max-len
-                        var ddlProps = this.getPropObject(prop, newProp, oldProp);
-                        _super.prototype.onPropertyChanged.call(this, ddlProps.newProperty, ddlProps.oldProperty);
+                        var ddlProps = this_1.getPropObject(prop, newProp, oldProp);
+                        _super.prototype.onPropertyChanged.call(this_1, ddlProps.newProperty, ddlProps.oldProperty);
                     }
                     break;
             }
+        };
+        var this_1 = this;
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            _loop_1(prop);
         }
     };
     DropDownList.prototype.checkValidLi = function (element) {
@@ -5074,13 +5121,10 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             var l10nLocale = { overflowCountTemplate: '+${count} more..', totalCountTemplate: '${count} selected' };
             this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
             var remainContent = this.l10n.getConstant('overflowCountTemplate');
+            var totalContent = this.l10n.getConstant('totalCountTemplate');
             var remainElement = this.createElement('span', { className: REMAIN_WRAPPER });
-            // eslint-disable-next-line
-            var compiledString = compile(remainContent);
-            // eslint-disable-next-line
-            var totalCompiledString = compile(this.l10n.getConstant('totalCountTemplate'));
-            remainElement.appendChild(compiledString({ 'count': this.value.length }, this, 'overflowCountTemplate', null, !this.isStringTemplate)[0]);
             this.overFlowWrapper.appendChild(remainElement);
+            remainElement.innerText = remainContent.replace('${count}', this.value.length.toString());
             var remainSize = remainElement.offsetWidth;
             remove(remainElement);
             if (this.showDropDownIcon) {
@@ -5162,7 +5206,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             if (remaining > 0) {
-                this.overFlowWrapper.appendChild(this.updateRemainTemplate(remainElement, remaining, compiledString, totalCompiledString));
+                this.overFlowWrapper.appendChild(this.updateRemainTemplate(remainElement, remaining, remainContent, totalContent));
             }
             if (this.mode === 'Box' && !this.overFlowWrapper.classList.contains(TOTAL_COUNT_WRAPPER)) {
                 addClass([remainElement], REMAIN_COUNT);
@@ -5174,19 +5218,14 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
         this.updateDelimMode();
     };
-    DropDownTree.prototype.updateRemainTemplate = function (remainElement, remaining, 
-    // eslint-disable-next-line
-    compiledString, 
-    // eslint-disable-next-line
-    totalCompiledString) {
+    DropDownTree.prototype.updateRemainTemplate = function (remainElement, remaining, remainContent, totalContent) {
         if (this.overFlowWrapper.firstChild && this.overFlowWrapper.firstChild.nodeType === 3 &&
             this.overFlowWrapper.firstChild.nodeValue === '') {
             this.overFlowWrapper.removeChild(this.overFlowWrapper.firstChild);
         }
         remainElement.innerHTML = '';
-        remainElement.appendChild((this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) ?
-            compiledString({ 'count': remaining }, this, 'overflowCountTemplate', null, !this.isStringTemplate)[0] :
-            totalCompiledString({ 'count': remaining }, this, 'totalCountTemplate', null, !this.isStringTemplate)[0]);
+        remainElement.innerText = (this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) ?
+            remainContent.replace('${count}', remaining.toString()) : totalContent.replace('${count}', remaining.toString());
         if (this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) {
             removeClass([this.overFlowWrapper], TOTAL_COUNT_WRAPPER);
         }
@@ -7547,12 +7586,15 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ComboBox.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
+        var _this = this;
         _super.prototype.onActionComplete.call(this, ulElement, list, e);
         if (this.isSelectCustom) {
             this.removeSelection();
         }
         if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped) {
-            this.inlineSearch();
+            setTimeout(function () {
+                _this.inlineSearch();
+            });
         }
     };
     ComboBox.prototype.getFocusElement = function () {
@@ -9058,7 +9100,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         return ariaAttributes;
     };
     MultiSelect.prototype.updateListARIA = function () {
-        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' });
+        }
         var disableStatus = (this.inputElement.disabled) ? true : false;
         attributes(this.inputElement, this.getAriaAttributes());
         if (disableStatus) {
@@ -9218,7 +9262,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                             addClass([listEle[0]], dropDownBaseClasses.focus);
                         }
                         else {
-                            this.ulElement = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
+                            //EJ2-57588 - for this task, we prevent the ul element cloning ( this.ulElement = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
                             if (!(this.list && this.list.querySelectorAll('.' + dropDownBaseClasses.li).length > 0)) {
                                 this.l10nUpdate();
                                 addClass([this.list], dropDownBaseClasses.noData);
@@ -11192,8 +11236,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.updateDataList = function () {
-        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) {
+            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.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;
+            }
         }
     };
     MultiSelect.prototype.isValidLI = function (li) {
@@ -11542,11 +11591,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.wireListEvents = function () {
-        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);
+        }
     };
     MultiSelect.prototype.unwireListEvents = function () {
         EventHandler.remove(document, 'mousedown', this.onDocumentClick);
@@ -12676,6 +12727,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         this.mainData = null;
         this.filterParent = null;
         this.ulElement = null;
+        this.mainListCollection = null;
         _super.prototype.destroy.call(this);
         var temp = ['readonly', 'aria-disabled', 'aria-placeholder', 'placeholder'];
         var length = temp.length;
@@ -14129,9 +14181,10 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                     }
                     if (objValue === dataValue) {
                         itemIdx = this.getIndexByValue(dataValue);
-                        liCollections.push(liElement[itemIdx]);
-                        removeIdxes.push(i);
-                        removeLiIdxes.push(itemIdx);
+                        var idx = itemIdx === i ? itemIdx : i;
+                        liCollections.push(liElement[idx]);
+                        removeIdxes.push(idx);
+                        removeLiIdxes.push(idx);
                     }
                 }
             }