@syncfusion/ej2-dropdowns 24.2.8 → 24.2.9

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

@@ -1068,7 +1068,7 @@ let DropDownBase = class DropDownBase extends Component {
                             this.trigger('actionComplete', e, (e) => {
                                 if (!this.virtualGroupDataSource && this.isVirtualizationEnabled) {
                                     this.isRemoteDataUpdated = true;
-                                    if ((this.getModuleName() === 'combobox' && this.isAllowFiltering && this.isVirtualizationEnabled && e.result)) {
+                                    if ((this.getModuleName() === 'combobox' && !this.initialRemoteRender && this.isAllowFiltering && this.isVirtualizationEnabled && e.result)) {
                                         e.result = e.result.result;
                                     }
                                     if (e.result.length > 0) {
@@ -2263,7 +2263,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.isFilterFocus = false;
         this.beforePopupOpen = false;
         this.initial = true;
-        this.initRemoteRender = false;
+        this.initialRemoteRender = false;
         this.isNotSearchList = false;
         this.isTyped = false;
         this.isSelected = false;
@@ -2552,7 +2552,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;
         this.renderList();
         if (this.dataSource instanceof DataManager) {
-            this.initRemoteRender = true;
+            this.initialRemoteRender = true;
         }
         else {
             this.updateValues();
@@ -3538,17 +3538,15 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.setSelectOptions(li, e);
             if (this.enableVirtualization) {
                 const fields = (this.fields.value) ? this.fields.value : '';
-                if (this.dataSource instanceof DataManager) {
-                    this.dataSource.executeQuery(new Query().where(new Predicate(fields, 'equal', this.value)))
-                        .then((e) => {
-                        if (e.result.length > 0) {
-                            this.itemData = e.result[0];
-                            const dataItem = this.getItemData();
-                            if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
-                                this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
-                            }
+                if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
+                    const getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
+                    if (getItem && getItem.length > 0) {
+                        this.itemData = getItem[0];
+                        const dataItem = this.getItemData();
+                        if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
+                            this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
                         }
-                    });
+                    }
                 }
                 else {
                     const getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
@@ -4202,15 +4200,19 @@ let DropDownList = class DropDownList extends DropDownBase {
             if (!isNullOrUndefined(ulElement)) {
                 attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false', 'aria-label': 'listbox' });
             }
-            if (this.initRemoteRender) {
+            if (this.initialRemoteRender) {
                 this.initial = true;
                 this.activeIndex = this.index;
-                this.initRemoteRender = false;
+                this.initialRemoteRender = false;
                 if (this.value && this.dataSource instanceof DataManager) {
                     const checkField = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
                     const fieldValue = this.fields.value.split('.');
-                    const checkVal = list.some((x) => isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
+                    let checkVal = list.some((x) => isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
                         this.checkFieldValue(x, fieldValue) === this.value : x[checkField] === this.value);
+                    if (this.enableVirtualization && this.virtualGroupDataSource) {
+                        checkVal = this.virtualGroupDataSource.some((x) => isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
+                            this.checkFieldValue(x, fieldValue) === this.value : x[checkField] === this.value);
+                    }
                     if (!checkVal) {
                         this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', this.value)))
                             .then((e) => {
@@ -4524,6 +4526,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.getFocusElement();
                 this.checkCollision(popupEle);
                 if (Browser.isDevice) {
+                    if ((parseInt(this.popupWidth.toString(), 10) > window.outerWidth) && !(this.getModuleName() === 'dropdownlist' && this.allowFiltering)) {
+                        this.popupObj.element.classList.add('e-wide-popup');
+                    }
                     this.popupObj.element.classList.add(dropDownListClasses.device);
                     if (this.getModuleName() === 'dropdownlist' || (this.getModuleName() === 'combobox'
                         && !this.allowFiltering && this.isDropDownClick)) {
@@ -5030,8 +5035,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
             }
         });
-        if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
-            this.actionCompleteData.ulElement = this.ulElement.cloneNode(true);
+        if (Browser.isDevice && !eventArgs.cancel && this.popupObj.element.classList.contains('e-wide-popup')) {
+            this.popupObj.element.classList.remove('e-wide-popup');
         }
         let dataSourceCount;
         if (this.dataSource instanceof DataManager) {
@@ -5458,11 +5463,11 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                     if (!this.list) {
                         if (this.dataSource instanceof DataManager) {
-                            this.initRemoteRender = true;
+                            this.initialRemoteRender = true;
                         }
                         this.renderList();
                     }
-                    if (!this.initRemoteRender) {
+                    if (!this.initialRemoteRender) {
                         const li = this.getElementByText(newProp.text);
                         if (!this.checkValidLi(li)) {
                             if (this.liCollections && this.liCollections.length === 100 &&
@@ -5511,11 +5516,11 @@ let DropDownList = class DropDownList extends DropDownBase {
                     this.notify('beforeValueChange', { newProp: newProp }); // gird component value type change
                     if (!this.list) {
                         if (this.dataSource instanceof DataManager) {
-                            this.initRemoteRender = true;
+                            this.initialRemoteRender = true;
                         }
                         this.renderList();
                     }
-                    if (!this.initRemoteRender) {
+                    if (!this.initialRemoteRender) {
                         const item = this.getElementByValue(newProp.value);
                         if (!this.checkValidLi(item)) {
                             if (this.liCollections && this.liCollections.length === 100 &&
@@ -5555,11 +5560,11 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                     if (!this.list) {
                         if (this.dataSource instanceof DataManager) {
-                            this.initRemoteRender = true;
+                            this.initialRemoteRender = true;
                         }
                         this.renderList();
                     }
-                    if (!this.initRemoteRender && this.liCollections) {
+                    if (!this.initialRemoteRender && this.liCollections) {
                         const element = this.liCollections[newProp.index];
                         if (!this.checkValidLi(element)) {
                             if (this.liCollections && this.liCollections.length === 100 &&
@@ -5720,6 +5725,9 @@ 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)) {
+            if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
+                this.isSecondClick = false;
+            }
             this.renderList(e);
         }
         if (this.enableVirtualization && this.listData && this.listData.length) {
@@ -5926,7 +5934,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     getItems() {
         if (!this.list) {
             if (this.dataSource instanceof DataManager) {
-                this.initRemoteRender = true;
+                this.initialRemoteRender = true;
             }
             this.renderList();
         }
@@ -9411,13 +9419,39 @@ let ComboBox = class ComboBox extends DropDownList {
     updateValues() {
         if (!isNullOrUndefined(this.value)) {
             const li = this.getElementByValue(this.value);
+            let isExistItem = !isNullOrUndefined(li) ? true : false;
+            if (this.enableVirtualization && this.value) {
+                const fields = (this.fields.value) ? this.fields.value : '';
+                if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
+                    const getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
+                    if (getItem && getItem.length > 0) {
+                        this.itemData = getItem[0];
+                        isExistItem = true;
+                        const dataItem = this.getItemData();
+                        if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
+                            this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
+                        }
+                    }
+                }
+                else {
+                    const getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
+                    if (getItem && getItem.length > 0) {
+                        this.itemData = getItem[0];
+                        isExistItem = true;
+                        const dataItem = this.getItemData();
+                        if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
+                            this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
+                        }
+                    }
+                }
+            }
             if (li) {
                 this.setSelection(li, null);
             }
-            else if (this.allowCustom) {
+            else if ((!this.enableVirtualization && this.allowCustom) || (this.allowCustom && this.enableVirtualization && !isExistItem)) {
                 this.valueMuteChange(this.value);
             }
-            else {
+            else if (!this.enableVirtualization || (this.enableVirtualization && !isExistItem)) {
                 this.valueMuteChange(null);
             }
         }
@@ -18499,7 +18533,7 @@ let Mention = class Mention extends DropDownBase {
                 this.range.startContainer.previousElementSibling && this.range.startContainer.previousElementSibling.tagName !== 'BR' && this.range.startContainer.textContent.split('').length > 0 &&
                 (rangetextContent.length === 1 || rangetextContent[rangetextContent.length - 2].indexOf('') === -1 ||
                     this.range.startContainer.nodeType === 1))) {
-            if (this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
+            if (this.isPopupOpen && this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
                 && !this.isMatchedText() && (currentRange.length > 1 && currentRange.replace(/\u00A0/g, ' ').charAt(currentRange.length - 2) !== ' ') &&
                 (this.list && this.list.querySelectorAll('ul').length > 0)) {
                 this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
@@ -19002,6 +19036,9 @@ let Mention = class Mention extends DropDownBase {
             this.popupObj.element.removeAttribute('style');
             this.popupObj.element.removeAttribute('aria-disabled');
         }
+        if (this.list.classList.contains('e-nodata')) {
+            this.list = null;
+        }
     }
     onDocumentClick(e) {
         const target = e.target;
@@ -19112,6 +19149,7 @@ let Mention = class Mention extends DropDownBase {
         return coordinates;
     }
     initValue() {
+        this.isDataFetched = false;
         this.renderList();
         if (this.dataSource instanceof DataManager) {
             this.initRemoteRender = true;