@syncfusion/ej2-dropdowns 20.2.39 → 20.2.44

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

@@ -463,7 +463,7 @@ let DropDownBase = class DropDownBase extends Component {
      *
      * @returns {void}
      */
-    initialize() {
+    initialize(e) {
         this.bindEvent = true;
         this.actionFailureTemplateId = `${this.element.id}${ACTIONFAILURETEMPLATE_PROPERTY}`;
         if (this.element.tagName === 'UL') {
@@ -482,7 +482,7 @@ let DropDownBase = class DropDownBase extends Component {
             }
         }
         else {
-            this.setListData(this.dataSource, this.fields, this.query);
+            this.setListData(this.dataSource, this.fields, this.query, e);
         }
     }
     /**
@@ -589,7 +589,7 @@ let DropDownBase = class DropDownBase extends Component {
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @returns {void}
      */
-    setListData(dataSource, fields, query) {
+    setListData(dataSource, fields, query, event) {
         fields = fields ? fields : this.fields;
         let ulElement;
         this.isActive = true;
@@ -635,7 +635,7 @@ let DropDownBase = class DropDownBase extends Component {
                     this.trigger('actionComplete', localDataArgs, (localDataArgs) => {
                         if (!localDataArgs.cancel) {
                             ulElement = this.renderItems(localDataArgs.result, fields);
-                            this.onActionComplete(ulElement, localDataArgs.result);
+                            this.onActionComplete(ulElement, localDataArgs.result, event);
                             if (this.groupTemplate) {
                                 this.renderGroupTemplate(ulElement);
                             }
@@ -1024,7 +1024,7 @@ let DropDownBase = class DropDownBase extends Component {
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @returns {void}
      */
-    resetList(dataSource, fields, query) {
+    resetList(dataSource, fields, query, e) {
         if (this.list) {
             if ((this.element.tagName === 'SELECT' && this.element.options.length > 0)
                 || (this.element.tagName === 'UL' && this.element.childNodes.length > 0)) {
@@ -1035,7 +1035,7 @@ let DropDownBase = class DropDownBase extends Component {
                 }
             }
             dataSource = this.getModuleName() === 'combobox' && this.selectData && dataSource instanceof Array && dataSource.length < this.selectData.length ? this.selectData : dataSource;
-            this.setListData(dataSource, fields, query);
+            this.setListData(dataSource, fields, query, e);
         }
     }
     updateSelectElementData(isFiltering) {
@@ -1126,7 +1126,7 @@ let DropDownBase = class DropDownBase extends Component {
      * @private
      * @returns {void}
      */
-    render(isEmptyData) {
+    render(e, isEmptyData) {
         this.list = this.createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });
         this.list.classList.add(dropDownBaseClasses.root);
         this.setFields();
@@ -1150,7 +1150,7 @@ let DropDownBase = class DropDownBase extends Component {
         this.setEnableRtl();
         this.setEnabled();
         if (!isEmptyData) {
-            this.initialize();
+            this.initialize(e);
         }
     }
     /**
@@ -1567,8 +1567,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.popupObj.setProperties({ 'zIndex': this.zIndex });
         }
     }
-    renderList(isEmptyData) {
-        super.render(isEmptyData);
+    renderList(e, isEmptyData) {
+        super.render(e, isEmptyData);
         this.unWireListEvents();
         this.wireListEvents();
     }
@@ -2051,7 +2051,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             const isTabAction = e.action === 'tab' || e.action === 'close';
             if (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape') {
                 this.searchKeyEvent = e;
-                this.renderList();
+                this.renderList(e);
             }
             if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&
                 isNavigation && this.liCollections.length === 0) || this.isRequested) {
@@ -2090,7 +2090,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                     break;
                 case 'open':
-                    this.showPopup();
+                    this.showPopup(e);
                     break;
                 case 'hide':
                     this.preventAltUp = this.isPopupOpen;
@@ -2282,7 +2282,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         if (!this.readonly) {
             if (this.isPopupOpen) {
-                this.hidePopup();
+                this.hidePopup(e);
                 if (this.isFilterLayout()) {
                     this.focusDropDown(e);
                 }
@@ -2292,7 +2292,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.floatLabelChange();
                 this.queryString = this.inputElement.value.trim() === '' ? null : this.inputElement.value;
                 this.isDropDownClick = true;
-                this.showPopup();
+                this.showPopup(e);
             }
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const proxy = this;
@@ -2933,6 +2933,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
                 this.initial = false;
             }
+            else if (this.getModuleName() === 'autocomplete' && this.value) {
+                this.setInputValue();
+            }
             if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {
                 if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter
                     && !this.isFilterFocus) || (isNullOrUndefined(this.itemData) && this.allowFiltering)
@@ -2954,7 +2957,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
             }
             if (this.beforePopupOpen) {
-                this.renderPopup();
+                this.renderPopup(e);
             }
         }
     }
@@ -3024,7 +3027,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             removeClass(highlightedItem, dropDownListClasses.focus);
         }
     }
-    renderPopup() {
+    renderPopup(e) {
         if (this.popupObj && document.body.contains(this.popupObj.element)) {
             this.refreshPopup();
             return;
@@ -3125,7 +3128,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 const animModel = { name: 'FadeIn', duration: 100 };
                 this.beforePopupOpen = true;
                 const popupInstance = this.popupObj;
-                const eventArgs = { popup: popupInstance, cancel: false, animation: animModel };
+                const eventArgs = { popup: popupInstance, event: e, cancel: false, animation: animModel };
                 this.trigger('open', eventArgs, (eventArgs) => {
                     if (!eventArgs.cancel) {
                         addClass([this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
@@ -3535,7 +3538,12 @@ let DropDownList = class DropDownList extends DropDownBase {
     setFooterTemplate(popupEle) {
         let compiledString;
         if (this.footer) {
-            this.footer.innerHTML = '';
+            if (this.isReact) {
+                this.clearTemplate(['footerTemplate']);
+            }
+            else {
+                this.footer.innerHTML = '';
+            }
         }
         else {
             this.footer = this.createElement('div');
@@ -3726,6 +3734,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                                     }
                                 });
                             }
+                            else if (this.getModuleName() === 'autocomplete') {
+                                this.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this.setOldText(oldProp.text);
                             }
@@ -3767,6 +3778,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                                     }
                                 });
                             }
+                            else if (this.getModuleName() === 'autocomplete') {
+                                this.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this.setOldValue(oldProp.value);
                             }
@@ -3879,6 +3893,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             removeClass([this.inputWrapper.container], ['e-readonly']);
         }
     }
+    setInputValue(newProp, oldProp) {
+    }
     setCssClass(newClass, oldClass) {
         if (!isNullOrUndefined(oldClass)) {
             oldClass = (oldClass.replace(/\s+/g, ' ')).trim();
@@ -3905,7 +3921,7 @@ let DropDownList = class DropDownList extends DropDownBase {
      *
      * @returns {void}
      */
-    showPopup() {
+    showPopup(e) {
         if (!this.enabled) {
             return;
         }
@@ -3925,11 +3941,11 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         else if (isNullOrUndefined(this.list) || !isUndefined(this.list) && (this.list.classList.contains(dropDownBaseClasses.noData) ||
             this.list.querySelectorAll('.' + dropDownBaseClasses.li).length <= 0)) {
-            this.renderList();
+            this.renderList(e);
         }
-        this.invokeRenderPopup();
+        this.invokeRenderPopup(e);
     }
-    invokeRenderPopup() {
+    invokeRenderPopup(e) {
         if (Browser.isDevice && this.isFilterLayout()) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const proxy = this;
@@ -3939,7 +3955,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             history.pushState({}, '');
         }
         if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {
-            this.renderPopup();
+            this.renderPopup(e);
         }
         attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
     }
@@ -5942,7 +5958,8 @@ let DropDownTree = class DropDownTree extends Component {
             }
             return 2;
         }
-        this.fields.dataSource = isNullOrUndefined(this.fields.dataSource) ? [] : this.fields.dataSource;
+        if (isNullOrUndefined(this.fields.dataSource))
+            this.fields.dataSource = [];
         for (let i = 0, len = this.fields.dataSource.length; i < len; i++) {
             if ((typeof field.child === 'string') && !isNullOrUndefined(getValue(field.child, this.fields.dataSource[i]))) {
                 return 2;
@@ -7678,7 +7695,7 @@ let ComboBox = class ComboBox extends DropDownList {
         }
     }
     incrementalSearch(e) {
-        this.showPopup();
+        this.showPopup(e);
         if (!isNullOrUndefined(this.listData)) {
             this.inlineSearch(e);
             e.preventDefault();
@@ -7938,8 +7955,8 @@ let ComboBox = class ComboBox extends DropDownList {
      * @returns {void}
      * @deprecated
      */
-    showPopup() {
-        super.showPopup();
+    showPopup(e) {
+        super.showPopup(e);
     }
     /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
@@ -8214,13 +8231,13 @@ let AutoComplete = class AutoComplete extends ComboBox {
         this.isTyped = true;
         this.isDataFetched = this.isSelectCustom = false;
         if (isNullOrUndefined(this.list)) {
-            super.renderList(true);
+            super.renderList(e, true);
         }
         this.queryString = this.filterInput.value;
         if (e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38)) {
             this.queryString = this.queryString === '' ? null : this.queryString;
             this.beforePopupOpen = true;
-            this.resetList(this.dataSource, this.fields);
+            this.resetList(this.dataSource, this.fields, null, e);
             return;
         }
         this.isSelected = false;
@@ -8240,7 +8257,7 @@ let AutoComplete = class AutoComplete extends ComboBox {
         this.trigger('filtering', eventArgs, (eventArgs) => {
             if (!eventArgs.cancel && !this.isFiltered && !eventArgs.preventDefaultAction) {
                 this.searchList = true;
-                this.filterAction(this.dataSource, null, this.fields);
+                this.filterAction(this.dataSource, null, this.fields, e);
             }
         });
     }
@@ -8257,13 +8274,13 @@ let AutoComplete = class AutoComplete extends ComboBox {
         this.isFiltered = true;
         this.filterAction(dataSource, query, fields);
     }
-    filterAction(dataSource, query, fields) {
+    filterAction(dataSource, query, fields, e) {
         this.beforePopupOpen = true;
         if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {
-            this.resetList(dataSource, fields, query);
+            this.resetList(dataSource, fields, query, e);
         }
         else {
-            this.hidePopup();
+            this.hidePopup(e);
             this.beforePopupOpen = false;
         }
         this.renderReactTemplates();
@@ -8349,9 +8366,9 @@ let AutoComplete = class AutoComplete extends ComboBox {
     isFiltering() {
         return true;
     }
-    renderPopup() {
+    renderPopup(e) {
         this.list.scrollTop = 0;
-        super.renderPopup();
+        super.renderPopup(e);
     }
     isEditTextBox() {
         return true && this.inputElement.value.trim() !== '';
@@ -8363,13 +8380,37 @@ let AutoComplete = class AutoComplete extends ComboBox {
     isSelectFocusItem(element) {
         return false;
     }
+    setInputValue(newProp, oldProp) {
+        let oldValue = oldProp && oldProp.text ? oldProp.text : oldProp ? oldProp.value : oldProp;
+        let value = newProp && newProp.text ? newProp.text : newProp && newProp.value ? newProp.value : this.value;
+        if (value && this.typedString === '' && !this.allowCustom && !(this.dataSource instanceof DataManager)) {
+            let checkFields_1 = this.typeOfData(this.dataSource).typeof === 'string' ? '' : this.fields.value;
+            const listLength = this.getItems().length;
+            let query = new Query();
+            let _this = this;
+            new DataManager(this.dataSource).executeQuery(query.where(new Predicate(checkFields_1, 'equal', value)))
+                .then(function (e) {
+                if (e.result.length > 0) {
+                    _this.value = checkFields_1 !== '' ? e.result[0][_this.fields.value].toString() : e.result[0].toString();
+                    _this.addItem(e.result, listLength);
+                    _this.updateValues();
+                }
+                else {
+                    newProp && newProp.text ? _this.setOldText(oldValue) : newProp && newProp.value ? _this.setOldValue(oldValue) : _this.updateValues();
+                }
+            });
+        }
+        else if (newProp) {
+            newProp.text ? this.setOldText(oldValue) : this.setOldValue(oldValue);
+        }
+    }
     /**
      * Search the entered text and show it in the suggestion list if available.
      *
      * @returns {void}
      * @deprecated
      */
-    showPopup() {
+    showPopup(e) {
         if (!this.enabled) {
             return;
         }
@@ -8380,10 +8421,10 @@ let AutoComplete = class AutoComplete extends ComboBox {
         this.beforePopupOpen = true;
         this.preventAutoFill = true;
         if (isNullOrUndefined(this.list)) {
-            this.renderList();
+            this.renderList(e);
         }
         else {
-            this.resetList(this.dataSource, this.fields);
+            this.resetList(this.dataSource, this.fields, null, e);
         }
     }
     /**
@@ -8867,7 +8908,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         }
     }
-    onPopupShown() {
+    onPopupShown(e) {
         if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const proxy = this;
@@ -8878,7 +8919,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             history.pushState({}, '');
         }
         const animModel = { name: 'FadeIn', duration: 100 };
-        const eventArgs = { popup: this.popupObj, cancel: false, animation: animModel };
+        const eventArgs = { popup: this.popupObj, event: e, cancel: false, animation: animModel };
         this.trigger('open', eventArgs, (eventArgs) => {
             if (!eventArgs.cancel) {
                 this.focusAtFirstListItem();
@@ -9102,7 +9143,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.renderPopup();
         if (this.beforePopupOpen) {
             this.beforePopupOpen = false;
-            this.onPopupShown();
+            this.onPopupShown(e);
         }
     }
     refreshSelection() {
@@ -9394,7 +9435,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
             if (!this.isPopupOpen() &&
                 (this.openOnClick || (this.showDropDownIcon && e.target && e.target.className === dropdownIcon))) {
-                this.showPopup();
+                this.showPopup(e);
             }
             else {
                 this.hidePopup(e);
@@ -9688,7 +9729,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 break;
             case 40:
                 if (!this.isPopupOpen()) {
-                    this.showPopup();
+                    this.showPopup(e);
                     e.preventDefault();
                 }
                 break;
@@ -10873,7 +10914,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.keyCode = e.keyCode;
         }
         if (!this.isPopupOpen() && this.openOnClick) {
-            this.showPopup();
+            this.showPopup(e);
         }
         this.openClick(e);
         if (this.checkTextLength() && !this.allowFiltering && !isNullOrUndefined(e) && (e.keyCode !== 8)) {
@@ -11020,7 +11061,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             || this.list.querySelector('.e-ul') && this.list.querySelector('.e-ul').childElementCount === 0)) {
             isEmptyData = true;
         }
-        super.render(isEmptyData);
+        super.render(null, isEmptyData);
         this.unwireListEvents();
         this.wireListEvents();
     }
@@ -11108,7 +11149,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     updateDataList() {
-        if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction)) {
+        if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction || this.targetElement().trim())) {
             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));
@@ -12285,7 +12326,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
      *
      * @returns {void}
      */
-    showPopup() {
+    showPopup(e) {
         if (!this.enabled) {
             return;
         }
@@ -12294,7 +12335,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (!args.cancel) {
                 if (!this.ulElement) {
                     this.beforePopupOpen = true;
-                    super.render();
+                    super.render(e);
                     if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
                         this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
                     }
@@ -12310,7 +12351,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.beforePopupOpen = false;
                     return;
                 }
-                this.onPopupShown();
+                this.onPopupShown(e);
             }
         });
     }
@@ -14793,9 +14834,20 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         fListBox.value = [];
         listData = listData
             .filter((data) => data.isHeader !== true);
-        tListBox.listData = listData;
-        tListBox.jsonData = jsonData;
-        fListBox.listData = fListBox.sortedData = fListBox.jsonData = [];
+        tListBox.listData = tListBox.jsonData = listData;
+        if (fListBox.listData.length == fListBox.jsonData.length) {
+            fListBox.listData = fListBox.sortedData = fListBox.jsonData = [];
+        }
+        else if (this.allowFiltering) {
+            for (let i = 0; i < fListBox.listData.length; i++) {
+                for (let j = 0; j < fListBox.jsonData.length; j++) {
+                    if (fListBox.listData[i] === fListBox.jsonData[j]) {
+                        fListBox.jsonData.splice(j, 1);
+                    }
+                }
+            }
+            fListBox.listData = fListBox.sortedData = [];
+        }
         if (isRefresh) {
             let sourceElem = tListBox.renderItems(listData, tListBox.fields);
             tListBox.updateListItems(sourceElem, tListBox.ulElement);