@syncfusion/ej2-dropdowns 22.2.5 → 22.2.9

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

@@ -283,6 +283,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         _this.isDynamicDataChange = false;
         _this.addedNewItem = false;
         _this.isAddNewItemTemplate = false;
+        _this.isRequesting = false;
         return _this;
     }
     DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {
@@ -666,61 +667,67 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         this.isActive = true;
         var eventArgs = { cancel: false, data: dataSource, query: query };
         this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
-        this.trigger('actionBegin', eventArgs, function (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, function (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(function (e) {
+                            _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
+                            _this.trigger('actionComplete', e, function (e) {
+                                if (!e.cancel) {
+                                    _this.isRequesting = false;
+                                    var 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(function (e) {
+                            _this.isRequested = false;
+                            _this.isRequesting = false;
+                            _this.onActionFailure(e);
+                            _this.hideSpinner();
+                        });
                     }
-                    eventArgs.data.executeQuery(_this.getQuery(eventArgs.query)).then(function (e) {
+                    else {
+                        var dataManager = new DataManager(eventArgs.data);
+                        var listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        var localDataArgs = { cancel: false, result: listItems };
                         _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
-                        _this.trigger('actionComplete', e, function (e) {
-                            if (!e.cancel) {
-                                var listItems = e.result;
-                                if (listItems.length === 0) {
-                                    _this.isDataFetched = true;
-                                }
-                                ulElement = _this.renderItems(listItems, fields);
-                                _this.onActionComplete(ulElement, listItems, e);
+                        _this.trigger('actionComplete', localDataArgs, function (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(function () {
+                                    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(function (e) {
-                        _this.isRequested = false;
-                        _this.onActionFailure(e);
-                        _this.hideSpinner();
-                    });
-                }
-                else {
-                    var dataManager = new DataManager(eventArgs.data);
-                    var listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
-                    var localDataArgs = { cancel: false, result: listItems };
-                    _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
-                    _this.trigger('actionComplete', localDataArgs, function (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(function () {
-                                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();
-                                }
-                            });
-                        }
-                    });
+                    }
                 }
-            }
-        });
+            });
+        }
     };
     DropDownBase.prototype.bindChildItems = function (listItems, ulElement, fields, e) {
         var _this = this;
@@ -3049,7 +3056,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.isNotSearchList = false;
             return;
         }
-        if (this.isActive) {
+        if (this.isActive || !isNullOrUndefined(ulElement)) {
             var selectedItem = this.selectedLI ? this.selectedLI.cloneNode(true) : null;
             _super.prototype.onActionComplete.call(this, ulElement, list, e);
             this.updateSelectElementData(this.allowFiltering);
@@ -3213,20 +3220,20 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var args = { cancel: false };
         this.trigger('beforeOpen', args, function (args) {
             if (!args.cancel) {
-                var popupEle_1 = _this.createElement('div', {
+                var popupEle = _this.createElement('div', {
                     id: _this.element.id + '_popup', className: 'e-ddl e-popup ' + (_this.cssClass !== null ? _this.cssClass : '')
                 });
-                var searchBox = _this.setSearchBox(popupEle_1);
+                var searchBox = _this.setSearchBox(popupEle);
                 _this.listHeight = formatUnit(_this.popupHeight);
                 if (_this.headerTemplate) {
-                    _this.setHeaderTemplate(popupEle_1);
+                    _this.setHeaderTemplate(popupEle);
                 }
-                append([_this.list], popupEle_1);
+                append([_this.list], popupEle);
                 if (_this.footerTemplate) {
-                    _this.setFooterTemplate(popupEle_1);
+                    _this.setFooterTemplate(popupEle);
                 }
-                document.body.appendChild(popupEle_1);
-                popupEle_1.style.visibility = 'hidden';
+                document.body.appendChild(popupEle);
+                popupEle.style.visibility = 'hidden';
                 if (_this.popupHeight !== 'auto') {
                     _this.searchBoxHeight = 0;
                     if (!isNullOrUndefined(searchBox.container)) {
@@ -3234,20 +3241,20 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         _this.listHeight = (parseInt(_this.listHeight, 10) - (_this.searchBoxHeight)).toString() + 'px';
                     }
                     if (_this.headerTemplate) {
-                        _this.header = _this.header ? _this.header : popupEle_1.querySelector('.e-ddl-header');
+                        _this.header = _this.header ? _this.header : popupEle.querySelector('.e-ddl-header');
                         var height = Math.round(_this.header.getBoundingClientRect().height);
                         _this.listHeight = (parseInt(_this.listHeight, 10) - (height + _this.searchBoxHeight)).toString() + 'px';
                     }
                     if (_this.footerTemplate) {
-                        _this.footer = _this.footer ? _this.footer : popupEle_1.querySelector('.e-ddl-footer');
+                        _this.footer = _this.footer ? _this.footer : popupEle.querySelector('.e-ddl-footer');
                         var height = Math.round(_this.footer.getBoundingClientRect().height);
                         _this.listHeight = (parseInt(_this.listHeight, 10) - (height + _this.searchBoxHeight)).toString() + 'px';
                     }
                     _this.list.style.maxHeight = (parseInt(_this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
-                    popupEle_1.style.maxHeight = formatUnit(_this.popupHeight);
+                    popupEle.style.maxHeight = formatUnit(_this.popupHeight);
                 }
                 else {
-                    popupEle_1.style.height = 'auto';
+                    popupEle.style.height = 'auto';
                 }
                 var offsetValue = 0;
                 var left = void 0;
@@ -3259,7 +3266,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 }
                 if (Browser.isDevice && (!_this.allowFiltering && (_this.getModuleName() === 'dropdownlist' ||
                     (_this.isDropDownClick && _this.getModuleName() === 'combobox')))) {
-                    offsetValue = _this.getOffsetValue(popupEle_1);
+                    offsetValue = _this.getOffsetValue(popupEle);
                     var firstItem = _this.isEmptyList() ? _this.list : _this.liCollections[0];
                     if (!isNullOrUndefined(_this.inputElement)) {
                         left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -
@@ -3268,9 +3275,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
                 _this.getFocusElement();
-                _this.createPopup(popupEle_1, offsetValue, left);
-                _this.checkCollision(popupEle_1);
-                var popupLeft_1 = _this.enableRtl ? parseFloat(popupEle_1.style.left) - (_this.ulElement.parentElement.offsetWidth - _this.inputWrapper.container.offsetWidth) : 0;
+                _this.createPopup(popupEle, offsetValue, left);
+                _this.checkCollision(popupEle);
                 if (Browser.isDevice) {
                     _this.popupObj.element.classList.add(dropDownListClasses.device);
                     if (_this.getModuleName() === 'dropdownlist' || (_this.getModuleName() === 'combobox'
@@ -3290,8 +3296,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         EventHandler.add(_this.clearIconElement, 'click', _this.clearText, _this);
                     }
                 }
-                popupEle_1.style.visibility = 'visible';
-                addClass([popupEle_1], 'e-popup-close');
+                popupEle.style.visibility = 'visible';
+                addClass([popupEle], 'e-popup-close');
                 var scrollParentElements = _this.popupObj.getScrollableParent(_this.inputWrapper.container);
                 for (var _i = 0, scrollParentElements_1 = scrollParentElements; _i < scrollParentElements_1.length; _i++) {
                     var element = scrollParentElements_1[_i];
@@ -3324,9 +3330,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         _this.beforePopupOpen = false;
                         _this.destroyPopup();
                     }
-                    if (_this.enableRtl && popupLeft_1 > 0) {
-                        popupEle_1.style.left = popupLeft_1 + "px";
-                    }
                 });
             }
             else {
@@ -3354,7 +3357,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         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: function () {
                 if (!_this.isDocumentClick) {
@@ -3765,7 +3769,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.setFooterTemplate = function (popupEle) {
         var compiledString;
         if (this.footer) {
-            if (this.isReact) {
+            if (this.isReact && typeof this.footerTemplate === 'function') {
                 this.clearTemplate(['footerTemplate']);
             }
             else {
@@ -3851,6 +3855,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         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' ?
@@ -4358,6 +4363,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (this.inputElement && !isNullOrUndefined(this.inputElement.onchange)) {
             this.inputElement.onchange = null;
         }
+        if (this.isAngular) {
+            this.inputElement = null;
+        }
         _super.prototype.destroy.call(this);
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
@@ -7913,7 +7921,8 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
     };
     ComboBox.prototype.setSearchBox = function () {
         this.filterInput = this.inputElement;
-        return (this.isFiltering() ? this.inputWrapper : inputObject$1);
+        var searchBoxContainer = (this.isFiltering() || (this.isReact && this.getModuleName() === 'combobox')) ? this.inputWrapper : inputObject$1;
+        return searchBoxContainer;
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ComboBox.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
@@ -9410,9 +9419,6 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 if (_this.isFirstClick) {
                     _this.loadTemplate();
                 }
-                if (_this.enableRtl) {
-                    _this.popupWrapper.style.visibility = 'hidden';
-                }
             }
         });
     };
@@ -11265,7 +11271,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     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: function () {
@@ -11281,11 +11288,6 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     },
                     open: function () {
                         _this.popupObj.resolveCollision();
-                        if (_this.enableRtl) {
-                            var 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) {
                             var ulElement = _this.list.querySelector('ul');
                             if (ulElement) {