@syncfusion/ej2-dropdowns 22.2.5 → 22.2.9

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

@@ -259,6 +259,7 @@ let DropDownBase = class DropDownBase extends Component {
         this.isDynamicDataChange = false;
         this.addedNewItem = false;
         this.isAddNewItemTemplate = false;
+        this.isRequesting = false;
     }
     getPropObject(prop, newProp, oldProp) {
         const newProperty = new Object();
@@ -637,61 +638,67 @@ let DropDownBase = class DropDownBase extends Component {
         this.isActive = true;
         const eventArgs = { cancel: false, data: dataSource, query: query };
         this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
-        this.trigger('actionBegin', eventArgs, (eventArgs) => {
-            if (!eventArgs.cancel) {
-                this.showSpinner();
-                if (dataSource instanceof DataManager) {
-                    this.isRequested = true;
-                    if (this.isDataFetched) {
-                        this.emptyDataRequest(fields);
-                        return;
+        if (!this.isRequesting) {
+            this.trigger('actionBegin', eventArgs, (eventArgs) => {
+                if (!eventArgs.cancel) {
+                    this.isRequesting = true;
+                    this.showSpinner();
+                    if (dataSource instanceof DataManager) {
+                        this.isRequested = true;
+                        if (this.isDataFetched) {
+                            this.emptyDataRequest(fields);
+                            return;
+                        }
+                        eventArgs.data.executeQuery(this.getQuery(eventArgs.query)).then((e) => {
+                            this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
+                            this.trigger('actionComplete', e, (e) => {
+                                if (!e.cancel) {
+                                    this.isRequesting = false;
+                                    const listItems = e.result;
+                                    if (listItems.length === 0) {
+                                        this.isDataFetched = true;
+                                    }
+                                    ulElement = this.renderItems(listItems, fields);
+                                    this.onActionComplete(ulElement, listItems, e);
+                                    if (this.groupTemplate) {
+                                        this.renderGroupTemplate(ulElement);
+                                    }
+                                    this.isRequested = false;
+                                    this.bindChildItems(listItems, ulElement, fields, e);
+                                }
+                            });
+                        }).catch((e) => {
+                            this.isRequested = false;
+                            this.isRequesting = false;
+                            this.onActionFailure(e);
+                            this.hideSpinner();
+                        });
                     }
-                    eventArgs.data.executeQuery(this.getQuery(eventArgs.query)).then((e) => {
+                    else {
+                        const dataManager = new DataManager(eventArgs.data);
+                        const listItems = (this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        const localDataArgs = { cancel: false, result: listItems };
                         this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
-                        this.trigger('actionComplete', e, (e) => {
-                            if (!e.cancel) {
-                                const listItems = e.result;
-                                if (listItems.length === 0) {
-                                    this.isDataFetched = true;
-                                }
-                                ulElement = this.renderItems(listItems, fields);
-                                this.onActionComplete(ulElement, listItems, e);
+                        this.trigger('actionComplete', localDataArgs, (localDataArgs) => {
+                            if (!localDataArgs.cancel) {
+                                this.isRequesting = false;
+                                ulElement = this.renderItems(localDataArgs.result, fields);
+                                this.onActionComplete(ulElement, localDataArgs.result, event);
                                 if (this.groupTemplate) {
                                     this.renderGroupTemplate(ulElement);
                                 }
-                                this.isRequested = false;
-                                this.bindChildItems(listItems, ulElement, fields, e);
+                                this.bindChildItems(localDataArgs.result, ulElement, fields);
+                                setTimeout(() => {
+                                    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();
+                                    }
+                                });
                             }
                         });
-                    }).catch((e) => {
-                        this.isRequested = false;
-                        this.onActionFailure(e);
-                        this.hideSpinner();
-                    });
-                }
-                else {
-                    const dataManager = new DataManager(eventArgs.data);
-                    const listItems = (this.getQuery(eventArgs.query)).executeLocal(dataManager);
-                    const localDataArgs = { cancel: false, result: listItems };
-                    this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
-                    this.trigger('actionComplete', localDataArgs, (localDataArgs) => {
-                        if (!localDataArgs.cancel) {
-                            ulElement = this.renderItems(localDataArgs.result, fields);
-                            this.onActionComplete(ulElement, localDataArgs.result, event);
-                            if (this.groupTemplate) {
-                                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.fields.groupBy && ulElement.children[1] && ulElement.children[1].childElementCount > 0)))) {
-                                    this.updateDataList();
-                                }
-                            });
-                        }
-                    });
+                    }
                 }
-            }
-        });
+            });
+        }
     }
     bindChildItems(listItems, ulElement, fields, e) {
         if (listItems.length >= 100 && this.getModuleName() === 'autocomplete') {
@@ -2994,7 +3001,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.isNotSearchList = false;
             return;
         }
-        if (this.isActive) {
+        if (this.isActive || !isNullOrUndefined(ulElement)) {
             const selectedItem = this.selectedLI ? this.selectedLI.cloneNode(true) : null;
             super.onActionComplete(ulElement, list, e);
             this.updateSelectElementData(this.allowFiltering);
@@ -3210,7 +3217,6 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.getFocusElement();
                 this.createPopup(popupEle, offsetValue, left);
                 this.checkCollision(popupEle);
-                const popupLeft = this.enableRtl ? parseFloat(popupEle.style.left) - (this.ulElement.parentElement.offsetWidth - this.inputWrapper.container.offsetWidth) : 0;
                 if (Browser.isDevice) {
                     this.popupObj.element.classList.add(dropDownListClasses.device);
                     if (this.getModuleName() === 'dropdownlist' || (this.getModuleName() === 'combobox'
@@ -3263,9 +3269,6 @@ let DropDownList = class DropDownList extends DropDownBase {
                         this.beforePopupOpen = false;
                         this.destroyPopup();
                     }
-                    if (this.enableRtl && popupLeft > 0) {
-                        popupEle.style.left = popupLeft + "px";
-                    }
                 });
             }
             else {
@@ -3292,7 +3295,8 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.popupObj = new Popup(element, {
             width: this.setWidth(), targetType: 'relative',
             relateTo: this.inputWrapper.container, collision: { X: 'flip', Y: 'flip' }, offsetY: offsetValue,
-            enableRtl: this.enableRtl, offsetX: left, position: { X: 'left', Y: 'bottom' },
+            enableRtl: this.enableRtl, offsetX: left,
+            position: this.enableRtl ? { X: 'right', Y: 'bottom' } : { X: 'left', Y: 'bottom' },
             zIndex: this.zIndex,
             close: () => {
                 if (!this.isDocumentClick) {
@@ -3701,7 +3705,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     setFooterTemplate(popupEle) {
         let compiledString;
         if (this.footer) {
-            if (this.isReact) {
+            if (this.isReact && typeof this.footerTemplate === 'function') {
                 this.clearTemplate(['footerTemplate']);
             }
             else {
@@ -3787,6 +3791,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (this.allowFiltering && newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))) {
             this.actionCompleteData = { ulElement: null, list: null, isUpdated: false };
             this.actionData = this.actionCompleteData;
+            this.itemData = null;
         }
         else if (this.allowFiltering && newProp.query && !isNullOrUndefined(Object.keys(newProp.query))) {
             this.actionCompleteData = this.getModuleName() === 'combobox' ?
@@ -4287,6 +4292,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (this.inputElement && !isNullOrUndefined(this.inputElement.onchange)) {
             this.inputElement.onchange = null;
         }
+        if (this.isAngular) {
+            this.inputElement = null;
+        }
         super.destroy();
     }
     /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
@@ -7790,7 +7798,8 @@ let ComboBox = class ComboBox extends DropDownList {
     }
     setSearchBox() {
         this.filterInput = this.inputElement;
-        return (this.isFiltering() ? this.inputWrapper : inputObject$1);
+        let searchBoxContainer = (this.isFiltering() || (this.isReact && this.getModuleName() === 'combobox')) ? this.inputWrapper : inputObject$1;
+        return searchBoxContainer;
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onActionComplete(ulElement, list, e, isUpdated) {
@@ -9246,9 +9255,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 if (this.isFirstClick) {
                     this.loadTemplate();
                 }
-                if (this.enableRtl) {
-                    this.popupWrapper.style.visibility = 'hidden';
-                }
             }
         });
     }
@@ -11096,7 +11102,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.list.style.maxHeight = formatUnit(this.popupHeight);
                 }
                 this.popupObj = new Popup(this.popupWrapper, {
-                    width: this.calcPopupWidth(), targetType: 'relative', position: { X: 'left', Y: 'bottom' },
+                    width: this.calcPopupWidth(), targetType: 'relative',
+                    position: this.enableRtl ? { X: 'right', Y: 'bottom' } : { X: 'left', Y: 'bottom' },
                     relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,
                     enableRtl: this.enableRtl, zIndex: this.zIndex,
                     close: () => {
@@ -11112,11 +11119,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     },
                     open: () => {
                         this.popupObj.resolveCollision();
-                        if (this.enableRtl) {
-                            const popupLeft = parseFloat(this.popupWrapper.style.left) - (this.popupWrapper.offsetWidth - this.overAllWrapper.offsetWidth);
-                            this.popupWrapper.style.left = popupLeft > 0 ? popupLeft + "px" : this.popupWrapper.style.left;
-                            this.popupWrapper.style.visibility = 'hidden';
-                        }
                         if (!this.isFirstClick) {
                             const ulElement = this.list.querySelector('ul');
                             if (ulElement) {