@syncfusion/ej2-dropdowns 31.2.2 → 31.2.4

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

@@ -1533,6 +1533,11 @@ let DropDownBase = class DropDownBase extends Component {
                                 if (this.isVirtualizationEnabled && (e.count !== 0 && e.count < (this.itemCount * 2))) {
                                     if (newQuery) {
                                         for (let queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                            if (this.getModuleName() === 'multiselect' && this.isCheckBoxSelection && (newQuery.queries[queryElements].e && (newQuery.queries[queryElements].e.operator === 'notequal' ||
+                                                newQuery.queries[queryElements].e.operator === 'equal' || newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.condition === 'and') && !this.isCustomFiltering)) {
+                                                isReOrder = false;
+                                                break;
+                                            }
                                             if (newQuery.queries[queryElements].fn === 'onTake') {
                                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                                 newQuery.queries[queryElements].e.nos = e.count;
@@ -1644,6 +1649,11 @@ let DropDownBase = class DropDownBase extends Component {
                                 listItems.count < (this.itemCount * 2)) && !this.appendUncheckList) {
                                 if (newQuery) {
                                     for (let queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                        if (this.getModuleName() === 'multiselect' && this.isCheckBoxSelection && (newQuery.queries[queryElements].e && (newQuery.queries[queryElements].e.operator === 'notequal' ||
+                                            newQuery.queries[queryElements].e.operator === 'equal' || newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.condition === 'and') && !this.isCustomFiltering)) {
+                                            isReOrder = false;
+                                            break;
+                                        }
                                         if (newQuery.queries[queryElements].fn === 'onTake') {
                                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                             newQuery.queries[queryElements].e.nos = listItems.count;
@@ -3565,6 +3575,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.onChangeEvent(e);
         }
         this.floatLabelChange();
+        this.updateFloatLabelOverflowWidth();
         this.dispatchEvent(this.hiddenElement, 'change');
         if (this.getModuleName() === 'dropdownlist' && this.element.tagName !== 'INPUT') {
             this.dispatchEvent(this.inputElement, 'blur');
@@ -3581,6 +3592,12 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.trigger('focus', args);
         }
         this.updateIconState();
+        if (this.floatLabelType !== 'Never' && this.inputWrapper && this.inputWrapper.container) {
+            const label = this.inputWrapper.container.querySelector('.e-float-text');
+            if (label) {
+                label.removeAttribute('style');
+            }
+        }
         this.isFocused = true;
     }
     resizingWireEvent() {
@@ -5398,7 +5415,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                         checkVal = this.virtualGroupDataSource.some((x) => isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
                             this.checkFieldValue(x, fieldValue) === value : x[checkField] === value);
                     }
-                    if (!checkVal) {
+                    if (!checkVal && !this.enableVirtualization) {
                         this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', value)))
                             .then((e) => {
                             if (e.result.length > 0) {
@@ -6535,6 +6552,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never') {
             this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
         }
+        this.updateFloatLabelOverflowWidth();
         this.wireEvent();
         this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
         this.element.removeAttribute('tabindex');
@@ -7095,6 +7113,24 @@ let DropDownList = class DropDownList extends DropDownBase {
             Input.setCssClass(newClass, [this.popupObj.element], oldClass);
         }
     }
+    getRightIconsWidth() {
+        const container = this.inputWrapper.container;
+        let width = 0;
+        const iconSelectors = '.e-input-group-icon, .e-clear-icon';
+        const icons = container.querySelectorAll(iconSelectors);
+        for (let index = 0; index < icons.length; index++) {
+            width += icons[index].offsetWidth;
+        }
+        return width;
+    }
+    updateFloatLabelOverflowWidth() {
+        const container = this.inputWrapper.container;
+        const label = container.querySelector('.e-float-text');
+        const calculateWidth = (container.clientWidth - this.getRightIconsWidth());
+        if (label && calculateWidth) {
+            label.style.width = calculateWidth + 'px';
+        }
+    }
     /**
      * Return the module name of this component.
      *
@@ -11311,7 +11347,9 @@ let ComboBox = class ComboBox extends DropDownList {
                                 this.fields.value : '', this.value) : this.value;
                             if ((valueFieldValue === dataItem.value && this.text !== dataItem.text.toString()) ||
                                 (valueFieldValue !== dataItem.value && this.text === dataItem.text.toString())) {
-                                this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value });
+                                this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value }, true);
+                                this.setHiddenValue();
+                                Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
                             }
                         }
                         else if (this.allowCustom) {
@@ -13245,6 +13283,27 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.scrollBottom(focusedItem, undefined, false, null, true);
         }
     }
+    updatePopupHeightOnFilter() {
+        if (this.allowFiltering && this.allowResize && this.keyboardEvent) {
+            if (this.allowResize && this.popupObj && this.list) {
+                const filterText = this.inputElement && this.inputElement.value;
+                const filteredItems = this.list.querySelectorAll('li.e-list-item:not(.e-hide-listitem):not(.e-disabled)');
+                const isFiltering = filterText && filterText.length > 0;
+                if (isFiltering && filteredItems.length > 0) {
+                    const itemHeight = filteredItems[0].offsetHeight;
+                    const newHeight = filteredItems.length * itemHeight;
+                    this.popupObj.element.style.maxHeight = newHeight + 16 + 'px';
+                    this.list.style.maxHeight = newHeight + 'px';
+                }
+                else if (!isFiltering) {
+                    const restoreHeight = this.resizeHeight || parseInt(this.popupHeight, 10);
+                    this.popupObj.element.style.maxHeight = restoreHeight + 'px';
+                    this.list.style.maxHeight = restoreHeight + 'px';
+                    this.setResize();
+                }
+            }
+        }
+    }
     focusAtFirstListItem(isOpen) {
         if (this.ulElement && this.ulElement.querySelector('li.'
             + dropDownBaseClasses.li)) {
@@ -13971,7 +14030,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.getFilteringSkeletonCount();
         }
         this.refreshPopup();
-        if (this.allowResize) {
+        if (this.allowResize && !this.isFilteringAction) {
             this.setResize();
         }
         if (this.mode === 'CheckBox') {
@@ -14158,6 +14217,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     onBlurHandler(eve, isDocClickFromCheck) {
         let target;
+        this.updatePopupHeightOnFilter();
         if (this.isBlurDispatching && this.isAngular) {
             this.isBlurDispatching = false;
             return;
@@ -14238,6 +14298,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             Input.createSpanElement(this.overAllWrapper, this.createElement);
         }
         this.calculateWidth();
+        this.updateFloatLabelOverflowWidth();
         if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] &&
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
@@ -14439,6 +14500,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.searchWrapper.classList.remove(ZERO_SIZE);
             }
             this.checkPlaceholderSize();
+            if (this.floatLabelType !== 'Never' && this.overAllWrapper) {
+                const label = this.overAllWrapper.querySelector('.e-float-text');
+                if (label) {
+                    label.removeAttribute('style');
+                }
+            }
             if (this.focused) {
                 const args = { isInteracted: e ? true : false, event: e };
                 this.trigger('focus', args);
@@ -14749,7 +14816,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (!(this.mode === 'CheckBox' && this.showSelectAll)) {
             this.refreshPopup();
         }
-        if (this.allowResize) {
+        if (this.allowResize && !this.isFilterAction) {
             this.setResize();
         }
         this.isKeyBoardAction = false;
@@ -16453,6 +16520,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 }
             }
         });
+        this.updatePopupHeightOnFilter();
     }
     search(e) {
         this.preventSetCurrentData = false;
@@ -16847,10 +16915,19 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             ((!(this.dataSource instanceof DataManager)) ||
                                 (this.dataSource instanceof DataManager && isInitialVirtualData)))) {
                         const indexItem = this.listData.length;
-                        const newValue = {};
+                        let newValue = {};
                         setValue(this.fields.text, value, newValue);
                         setValue(this.fields.value, value, newValue);
                         const noDataEle = this.popupWrapper.querySelector('.' + dropDownBaseClasses.noData);
+                        if (newValue && this.allowObjectBinding && this.allowCustomValue && this.value.length > 0 && typeof this.value[0] === 'object') {
+                            const valueArray = this.value;
+                            const filteredItems = valueArray.filter((valObj) => {
+                                return valObj[this.fields.value] === value;
+                            });
+                            if (filteredItems.length > 0) {
+                                newValue = filteredItems[0]; // Take the first matching item
+                            }
+                        }
                         if (!this.enableVirtualization) {
                             this.addItem(newValue, indexItem);
                         }
@@ -18698,6 +18775,24 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.isSelectAll = true;
         this.selectAllItems(state);
     }
+    getRightIconsWidth() {
+        const container = this.overAllWrapper;
+        let width = 0;
+        const iconSelectors = '.e-input-group-icon, .e-clear-icon';
+        const icons = container.querySelectorAll(iconSelectors);
+        for (let index = 0; index < icons.length; index++) {
+            width += icons[index].offsetWidth;
+        }
+        return width;
+    }
+    updateFloatLabelOverflowWidth() {
+        const container = this.overAllWrapper;
+        const label = container.querySelector('.e-float-text');
+        const calculateWidth = (container.clientWidth - this.getRightIconsWidth());
+        if (label && calculateWidth) {
+            label.style.width = calculateWidth + 'px';
+        }
+    }
     /**
      * Return the module name of this component.
      *
@@ -18861,6 +18956,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             closest(this.element, 'fieldset').disabled) {
             this.enabled = false;
         }
+        this.updateFloatLabelOverflowWidth();
         this.wireEvent();
         this.enable(this.enabled);
         this.enableRTL(this.enableRtl);
@@ -23186,7 +23282,7 @@ let Mention = class Mention extends DropDownBase {
                 : lastWordRange.replace(this.mentionChar, '');
         }
         if (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) &&
-            this.queryString !== '' && e.keyCode !== 38 && e.keyCode !== 40 && !this.lineBreak) {
+            this.queryString !== '' && e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 8 && !this.lineBreak) {
             this.searchLists(e);
             if (!this.isPopupOpen && this.queryString.length >= this.minLength) {
                 if (!this.isContentEditable(this.inputElement)) {