@syncfusion/ej2-dropdowns 28.1.38 → 28.1.41

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

@@ -533,6 +533,7 @@ class VirtualScroll {
         }
         if (this.component === 'multiselect') {
             this.parent.updatevirtualizationList();
+            this.parent.checkMaxSelection();
         }
         this.parent.getSkeletonCount();
         this.parent.skeletonCount = this.parent.totalItemCount !== 0 && this.parent.totalItemCount < this.parent.itemCount * 2 &&
@@ -1927,8 +1928,10 @@ let DropDownBase = class DropDownBase extends Component {
     scrollStop(e, isDownkey) {
         const target = !isNullOrUndefined(e) ? e.target : this.list;
         const computedHeight = getComputedStyle(this.getValidLi(), null).getPropertyValue('height');
+        const computedMarginValue = getComputedStyle(this.getValidLi(), null).getPropertyValue('margin-bottom');
+        const marginValue = parseInt(computedMarginValue, 10);
         const liHeight = this.getModuleName() === 'multiselect' ? parseFloat(computedHeight) : parseInt(computedHeight, 10);
-        const topIndex = Math.round(target.scrollTop / liHeight);
+        const topIndex = Math.round(target.scrollTop / (liHeight + marginValue));
         const liCollections = this.list.querySelectorAll('li' + ':not(.e-hide-listitem)');
         const virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
         for (let i = topIndex; i > -1; i--) {
@@ -2830,6 +2833,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.autoFill = false;
         this.isUpdateHeaderHeight = false;
         this.isUpdateFooterHeight = false;
+        this.isReactTemplateUpdate = false;
     }
     /**
      * Initialize the event handler.
@@ -3092,7 +3096,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         };
     }
     setEnableRtl() {
-        Input.setEnableRtl(this.enableRtl, [this.inputElement.parentElement]);
+        if (!isNullOrUndefined(this.inputElement) && !isNullOrUndefined(this.inputElement.parentElement)) {
+            Input.setEnableRtl(this.enableRtl, [this.inputElement.parentElement]);
+        }
         if (this.popupObj) {
             this.popupObj.enableRtl = this.enableRtl;
             this.popupObj.dataBind();
@@ -4197,6 +4203,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 setTimeout(() => {
                     proxy.cloneElements();
                     proxy.isSecondClick = true;
+                    proxy.isSecondClick = proxy.isReact && proxy.isFiltering() && proxy.dataSource instanceof DataManager && !proxy.list.querySelector('ul') ? false : true;
                 }, duration);
             }
         }
@@ -5028,6 +5035,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (this.getInitialData) {
             this.updateActionCompleteDataValues(ulElement, list);
             this.getInitialData = false;
+            this.isReactTemplateUpdate = true;
             this.searchLists(this.filterArgs);
             return;
         }
@@ -5455,6 +5463,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                             addClass([this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
                         }
                         this.renderReactTemplates();
+                        if (this.isReact && this.isFiltering() && this.dataSource instanceof DataManager && this.list.querySelector('ul') && !this.isSecondClick) {
+                            this.executeCloneElements();
+                        }
                         if (!isNullOrUndefined(this.popupObj)) {
                             this.popupObj.show(new Animation(eventArgs.animation), (this.zIndex === 1000) ? this.element : null);
                         }
@@ -5551,6 +5562,10 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.destroyPopup();
                 if (this.isFiltering() && this.actionCompleteData.list && this.actionCompleteData.list.length > 0) {
                     this.isActive = true;
+                    if (this.isReactTemplateUpdate && this.isReact && this.itemTemplate && !this.enableVirtualization) {
+                        this.actionCompleteData.ulElement = this.renderItems(this.actionCompleteData.list, this.fields);
+                        this.isReactTemplateUpdate = false;
+                    }
                     if (this.enableVirtualization) {
                         this.onActionComplete(this.ulElement, this.listData, null, true);
                     }
@@ -6008,6 +6023,9 @@ let DropDownList = class DropDownList extends DropDownBase {
     }
     updateInitialData() {
         const currentData = this.selectData;
+        if (isNullOrUndefined(currentData)) {
+            return;
+        }
         const ulElement = this.renderItems(currentData, this.fields);
         this.list.scrollTop = 0;
         this.virtualListInfo = {
@@ -6040,7 +6058,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
         }
-        else if (!this.list.querySelector('.e-virtual-ddl')) {
+        else if (!this.list.querySelector('.e-virtual-ddl') && this.list.parentElement) {
             const virualElement = this.createElement('div', {
                 id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
             });
@@ -6789,7 +6807,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
             setTimeout(() => {
                 proxy.cloneElements();
-                proxy.isSecondClick = true;
+                proxy.isSecondClick = proxy.isReact && proxy.isFiltering() && proxy.dataSource instanceof DataManager && !proxy.list.querySelector('ul') ? false : true;
             }, duration);
         }
     }
@@ -6846,7 +6864,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (isSelectVal && this.enableVirtualization && this.selectedLI.classList) {
             isSelectVal = this.selectedLI.classList.contains('e-active');
         }
-        if (this.inputElement && this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||
+        if (this.inputElement && this.inputElement.value === '' && !this.isInteracted && (this.isSelectCustom ||
             isSelectVal && this.inputElement.value !== dataItem.text)) {
             this.isSelectCustom = false;
             this.clearAll(e);
@@ -7496,7 +7514,7 @@ let DropDownTree = class DropDownTree extends Component {
         if (firstUl && firstUl.getAttribute('aria-multiselectable')) {
             firstUl.removeAttribute('aria-multiselectable');
         }
-        this.oldValue = this.value;
+        this.setOldValue();
         if (!this.isRemoteData) {
             this.isInitialized = true;
         }
@@ -7916,7 +7934,7 @@ let DropDownTree = class DropDownTree extends Component {
             this.triggerChangeEvent(event);
         }
         this.removeValue = false;
-        this.oldValue = this.value;
+        this.setOldValue();
         this.trigger('blur');
     }
     updateView() {
@@ -7949,7 +7967,7 @@ let DropDownTree = class DropDownTree extends Component {
                 element: this.element
             };
             this.trigger('change', eventArgs);
-            this.oldValue = this.value;
+            this.setOldValue();
         }
     }
     ddtCompareValues(oldValue, newValue) {
@@ -8416,6 +8434,7 @@ let DropDownTree = class DropDownTree extends Component {
             frameSpan.classList.add(CHECK);
             ariaState = 'true';
             if (!this.isReverseUpdate) {
+                this.setOldValue();
                 this.isCheckAllCalled = true;
                 this.treeObj.checkAll();
                 if (!this.changeOnBlur) {
@@ -8578,7 +8597,7 @@ let DropDownTree = class DropDownTree extends Component {
                     }
                 }
                 if (valArr.length !== 0) {
-                    this.oldValue = this.value;
+                    this.setOldValue();
                     this.setProperties({ value: valArr }, true);
                     this.setValidValue();
                 }
@@ -8589,7 +8608,7 @@ let DropDownTree = class DropDownTree extends Component {
             else {
                 data = this.getItems(this.text);
                 if (!isNullOrUndefined(data)) {
-                    this.oldValue = this.value;
+                    this.setOldValue();
                     this.setProperties({ value: [data[this.fields.value].toString()] }, true);
                     this.setValidValue();
                 }
@@ -8604,7 +8623,7 @@ let DropDownTree = class DropDownTree extends Component {
             return;
         }
         if (!this.isInitialized) {
-            this.oldValue = this.value;
+            this.setOldValue();
             if (this.treeObj.selectedNodes.length > 0 && !this.showCheckBox) {
                 this.setProperties({ value: this.treeObj.selectedNodes }, true);
                 if (this.allowMultiSelection) {
@@ -9189,7 +9208,7 @@ let DropDownTree = class DropDownTree extends Component {
     }
     onBeforeSelect(args) {
         if (args.isInteracted) {
-            this.oldValue = this.value ? this.value.slice() : this.value;
+            this.setOldValue();
             if (this.value === null) {
                 this.setProperties({ value: [] }, true);
             }
@@ -9310,7 +9329,7 @@ let DropDownTree = class DropDownTree extends Component {
     }
     beforeCheck(args) {
         if (args.isInteracted) {
-            this.oldValue = this.value ? this.value.slice() : this.value;
+            this.setOldValue();
         }
     }
     onNodeExpanded() {
@@ -9856,7 +9875,7 @@ let DropDownTree = class DropDownTree extends Component {
         }
         Input.setValue(null, this.inputEle, this.floatLabelType);
         if (!isDynamicChange) {
-            this.oldValue = this.value;
+            this.setOldValue();
             this.setProperties({ value: [] }, true);
             this.showOrHideValueTemplate(false);
         }
@@ -9892,6 +9911,9 @@ let DropDownTree = class DropDownTree extends Component {
             this.setLocale(false);
         }
     }
+    setOldValue() {
+        this.oldValue = Array.isArray(this.value) ? this.value.slice() : this.value;
+    }
     selectAllItems(state) {
         if (this.showCheckBox) {
             if (state) {
@@ -11297,7 +11319,7 @@ let ComboBox = class ComboBox extends DropDownList {
                 this.onChangeEvent(e);
             }
         }
-        if (e.action === 'enter' && this.inputElement.value.trim() === '') {
+        if (e.action === 'enter' && this.inputElement.value === '') {
             this.clearAll(e);
         }
         else if (this.isTyped && !this.isSelected && isNullOrUndefined(li)) {
@@ -11342,7 +11364,7 @@ let ComboBox = class ComboBox extends DropDownList {
                 this.onChangeEvent(null);
             }
         }
-        else if (this.inputElement.value.trim() !== '') {
+        else if (this.inputElement.value !== '') {
             const previousValue = this.value;
             if (isNullOrUndefined(value)) {
                 const value = this.inputElement.value === '' ? null : this.inputElement.value;
@@ -12487,11 +12509,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.storedSelectAllHeight = 0;
         this.isUpdateHeaderHeight = false;
         this.isUpdateFooterHeight = false;
+        this.isBlurDispatching = false;
+        this.isFilterPrevented = false;
         this.isValidKey = false;
         this.selectAllEventData = [];
         this.selectAllEventEle = [];
-        this.resetMainList = null;
-        this.resetFilteredData = false;
         this.preventSetCurrentData = false;
         this.isSelectAllLoop = false;
         this.scrollFocusStatus = false;
@@ -12946,6 +12968,19 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.totalItemCount = e.count;
         }
+        if (this.value && list && list.length > 0 && this.allowFiltering && this.mode !== 'CheckBox' && !this.enableVirtualization && !this.isFilterPrevented && !this.allowCustomValue) {
+            const allItemsInValue = list.every((item) => {
+                const itemValue = getValue((this.fields.value) ? this.fields.value : '', item);
+                return this.value.some((val) => {
+                    const value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', val) : val;
+                    return itemValue === value;
+                });
+            });
+            if (allItemsInValue) {
+                ulElement.innerHTML = '';
+                list = [];
+            }
+        }
         /* eslint-enable @typescript-eslint/no-unused-vars */
         super.onActionComplete(ulElement, list, e);
         this.skeletonCount = this.totalItemCount !== 0 && this.totalItemCount < (this.itemCount * 2) &&
@@ -13035,6 +13070,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (!this.enableVirtualization || (this.enableVirtualization && (!(this.dataSource instanceof DataManager)))) {
                 this.initialValueUpdate();
             }
+            else {
+                this.initialValueUpdate(this.listData, true);
+            }
             this.initialUpdate();
             this.refreshPlaceHolder();
             if (this.mode !== 'CheckBox' && this.changeOnBlur) {
@@ -13594,6 +13632,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     onBlurHandler(eve, isDocClickFromCheck) {
         let target;
+        if (this.isBlurDispatching && this.isAngular) {
+            this.isBlurDispatching = false;
+            return;
+        }
         if (!isNullOrUndefined(eve)) {
             target = eve.relatedTarget;
         }
@@ -13639,10 +13681,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         }
         this.updateDataList();
-        if (this.resetMainList) {
-            this.mainList = this.resetMainList;
-            this.resetMainList = null;
-        }
         this.refreshListItems(null);
         if (this.mode !== 'Box' && this.mode !== 'CheckBox') {
             this.updateDelimView();
@@ -13676,6 +13714,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
         }
+        this.isBlurDispatching = true;
+        if (this.isAngular) {
+            this.dispatchEvent(this.inputElement, 'blur');
+        }
     }
     calculateWidth() {
         let elementWidth;
@@ -15310,6 +15352,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (!this.list) {
             super.render();
         }
+        if (this.popupObj && document.body.contains(this.popupObj.element) && this.allowFiltering) {
+            this.refreshPopup();
+            return;
+        }
         if (!this.popupObj) {
             if (!isNullOrUndefined(this.popupWrapper)) {
                 document.body.appendChild(this.popupWrapper);
@@ -15764,7 +15810,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         });
     }
     search(e) {
-        this.resetFilteredData = true;
         this.preventSetCurrentData = false;
         this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         if (!isNullOrUndefined(e)) {
@@ -15801,6 +15846,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     cancel: false
                 };
                 this.trigger('filtering', eventArgs, (eventArgs) => {
+                    this.isFilterPrevented = eventArgs.cancel;
                     if (!eventArgs.cancel) {
                         if (!this.isFiltered && !eventArgs.preventDefaultAction) {
                             this.filterAction = true;
@@ -15980,7 +16026,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 else {
                     if (this.listData) {
                         if (this.enableVirtualization) {
-                            if (delim) {
+                            if (delim && !this.isDynamicRemoteVirtualData) {
                                 data = this.delimiterWrapper && this.delimiterWrapper.innerHTML === '' ? data :
                                     this.delimiterWrapper.innerHTML;
                             }
@@ -15993,7 +16039,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             }
                             else {
                                 temp = isInitialVirtualData && delim ? this.text : this.getTextByValue(value);
-                                const textValues = isInitialVirtualData ? this.text : (this.text && this.text !== '' ? this.text + this.delimiterChar + temp : temp);
+                                const textValues = this.isDynamicRemoteVirtualData && value != null && value !== '' ? this.getTextByValue(value) : isInitialVirtualData ? this.text : (this.text && this.text !== '' ? this.text + this.delimiterChar + temp : temp);
                                 data += temp + delimiterChar + ' ';
                                 text.push(textValues);
                                 hiddenElementContent = this.hiddenElement.innerHTML;
@@ -16153,7 +16199,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             (this.mode === 'Box' || this.mode === 'Default'))) ||
                         (this.enableVirtualization && value != null && text != null && !isCustomData)) {
                         const currentText = [];
-                        const textValues = this.text != null && this.text !== '' ? this.text + this.delimiterChar + text : text;
+                        const textValues = this.isDynamicRemoteVirtualData && text != null && text !== '' ? text : this.text != null && this.text !== '' ? this.text + this.delimiterChar + text : text;
                         currentText.push(textValues);
                         this.setProperties({ text: currentText.toString() }, true);
                         this.addChip(text, value);
@@ -17461,11 +17507,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     onPropertyChanged(newProp, oldProp) {
         if (newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))
             || newProp.query && !isNullOrUndefined(Object.keys(newProp.query))) {
-            if (this.resetFilteredData) {
-                // The filtered data is not being reset in the component after the user focuses out.
-                this.resetMainList = !this.resetMainList ? this.mainList : this.resetMainList;
-                this.resetFilteredData = false;
-            }
             this.mainList = null;
             this.mainData = null;
             this.isFirstClick = false;
@@ -17732,6 +17773,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 if (!this.enableVirtualization || (this.enableVirtualization && (!(this.dataSource instanceof DataManager)))) {
                     this.initialValueUpdate();
                 }
+                else if (!this.isInitRemoteVirtualData) {
+                    this.isDynamicRemoteVirtualData = true;
+                    this.initialValueUpdate(this.listData, true);
+                    this.isDynamicRemoteVirtualData = false;
+                    this.initialUpdate();
+                }
                 if (this.mode !== 'Box' && !this.inputFocus) {
                     this.updateDelimView();
                 }
@@ -18324,9 +18371,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         if (e.result.length > 0) {
                             listItems = e.result;
                             this.initStatus = false;
+                            this.isInitRemoteVirtualData = true;
                             setTimeout(() => {
                                 this.initialValueUpdate(listItems, true);
                                 this.initialUpdate();
+                                this.isInitRemoteVirtualData = false;
                             }, 100);
                             this.initStatus = true;
                         }
@@ -21327,7 +21376,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
     }
     KeyUp(e) {
-        if (this.allowFiltering && e.ctrlKey && e.keyCode === 65) {
+        if (this.allowFiltering && ((e.ctrlKey && e.keyCode === 65) || (e.keyCode === 8 && !this.filterInput.value))) {
             e.preventDefault();
             return;
         }
@@ -22061,7 +22110,9 @@ let Mention = class Mention extends DropDownBase {
                 ? document.querySelector(this.target)
                 : this.target) : this.element;
         if (this.isContentEditable(this.inputElement)) {
-            this.inputElement.setAttribute('contenteditable', 'true');
+            if (!this.inputElement.hasAttribute('contenteditable')) {
+                this.inputElement.setAttribute('contenteditable', 'true');
+            }
             addClass([this.inputElement], ['e-mention']);
             if (isNullOrUndefined(this.target)) {
                 addClass([this.inputElement], ['e-editable-element']);