@syncfusion/ej2-multicolumn-combobox 28.1.33 → 28.1.39

package/dist/es6/ej2-multicolumn-combobox.es2015.js

@@ -1,4 +1,4 @@
-import { ChildProperty, Property, Event, Component, getUniqueID, isNullOrUndefined, addClass, removeClass, formatUnit, attributes, prepend, Browser, append, L10n, select, compile, EventHandler, KeyboardEvents, closest, Animation, detach, Complex, Collection, NotifyPropertyChanges } from '@syncfusion/ej2-base';
+import { ChildProperty, Property, Event, Component, getUniqueID, isNullOrUndefined, addClass, removeClass, formatUnit, getValue, attributes, prepend, Browser, append, L10n, select, compile, EventHandler, KeyboardEvents, closest, Animation, detach, Complex, Collection, NotifyPropertyChanges } from '@syncfusion/ej2-base';
 import { Input } from '@syncfusion/ej2-inputs';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { Popup } from '@syncfusion/ej2-popups';
@@ -352,8 +352,23 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     }
     /* eslint-disable @typescript-eslint/no-explicit-any */
     isRowMatching(data, selectedValue, selectedText) {
-        const values = Object.values(data).map(String);
-        return values.includes(selectedValue) && values.includes(selectedText);
+        const flattenData = (data) => {
+            const result = [];
+            if (data && typeof data === 'object') {
+                if (Array.isArray(data)) {
+                    data.forEach((item) => result.push(...flattenData(item)));
+                }
+                else {
+                    Object.keys(data).forEach((key) => result.push(...flattenData(data[`${key}`])));
+                }
+            }
+            else if (data != null) {
+                result.push(String(data));
+            }
+            return result;
+        };
+        const flattenedValues = flattenData(data);
+        return (flattenedValues.indexOf(selectedValue) !== -1 && flattenedValues.indexOf(selectedText) !== -1);
     }
     updateRowSelection(args) {
         if (args) {
@@ -585,6 +600,10 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         this.inputEle.setAttribute('aria-disabled', value);
         this.inputWrapper.setAttribute('aria-disabled', value);
     }
+    updateFieldValue(fieldValue, dataObj) {
+        const fieldVal = getValue(fieldValue, dataObj).toString();
+        return fieldVal;
+    }
     initValue(isRerender, isValue, isInitial) {
         const prevItemData = this.gridObj.getSelectedRecords()[0];
         const prevItemEle = this.gridObj.getSelectedRows()[0];
@@ -609,8 +628,9 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const dataLists = e.result;
                     const filteredData = dataLists.filter((item) => {
-                        return item[isRerender ? (isValue ? this.fields.value : this.fields.text) :
-                            !isNullOrUndefined(this.value) ? this.fields.value : this.fields.text].toString() === value;
+                        const fieldVal = this.updateFieldValue(isRerender ? (isValue ? this.fields.value : this.fields.text) :
+                            !isNullOrUndefined(this.value) ? this.fields.value : this.fields.text, item);
+                        return fieldVal === value;
                     });
                     if (filteredData.length > 0) {
                         item = filteredData[0];
@@ -622,8 +642,9 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             }
             else if (!isNullOrUndefined(this.dataSource) && this.dataSource instanceof Array) {
                 item = this.dataSource.filter((data) => {
-                    return data[isRerender ? (isValue ? this.fields.value : this.fields.text) :
-                        !isNullOrUndefined(this.value) ? this.fields.value : this.fields.text].toString() === value;
+                    const fieldVal = this.updateFieldValue(isRerender ? (isValue ? this.fields.value : this.fields.text) :
+                        !isNullOrUndefined(this.value) ? this.fields.value : this.fields.text, data);
+                    return fieldVal === value;
                 })[0];
                 updateValues(this.dataSource);
             }
@@ -670,8 +691,9 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         }
     }
     updateChangeEvent(item, prevItemData, prevItemEle, currentValue, currentText, currentIndex, isRerender, isInitial) {
+        const fieldValue = item ? this.updateFieldValue(this.fields.value, item) : null;
         const ChangeEventArgs = {
-            value: item ? item[this.fields.value].toString() : null,
+            value: item ? fieldValue : null,
             itemData: { text: currentText, value: currentValue },
             item: this.getDataByValue(this.value),
             previousItemData: prevItemData,
@@ -684,10 +706,12 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     }
     updateCurrentValues(item, dataList) {
         if (!isNullOrUndefined(item)) {
-            Input.setValue(item[this.fields.text].toString(), this.inputEle, this.floatLabelType, this.showClearButton);
+            const fieldText = this.updateFieldValue(this.fields.text, item);
+            const fieldValue = this.updateFieldValue(this.fields.value, item);
+            Input.setValue(fieldText, this.inputEle, this.floatLabelType, this.showClearButton);
             return {
-                currentValue: item[this.fields.value].toString(),
-                currentText: item[this.fields.text].toString(),
+                currentValue: fieldValue,
+                currentText: fieldText,
                 currentIndex: dataList.indexOf(item)
             };
         }
@@ -863,16 +887,16 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             cancel: false
         };
         const selectedRecords = this.gridObj.getSelectedRecords()[0];
-        const fieldText = selectedRecords ? selectedRecords[this.fields.text].toString() : '';
-        const fieldValue = selectedRecords ? selectedRecords[this.fields.value].toString() : '';
+        const dataText = selectedRecords ? this.updateFieldValue(this.fields.text, selectedRecords) : '';
+        const dataValue = selectedRecords ? this.updateFieldValue(this.fields.value, selectedRecords) : '';
         const ChangeEventArgs = {
             isInteracted: e ? true : false,
             item: selectedRecords,
             itemElement: row,
-            itemData: { text: fieldText, value: fieldValue },
+            itemData: { text: selectedRecords ? dataText : '', value: selectedRecords ? dataValue : '' },
             event: e,
             cancel: false,
-            value: fieldValue,
+            value: selectedRecords ? dataValue : '',
             previousItemData: { text: this.text, value: this.value },
             previousItemElement: this.previousItemElement
         };
@@ -882,9 +906,9 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                 const event = e;
                 const isUpdateVal = event.key === 'Enter' || event.key === 'Tab' || event.shiftKey && event.key === 'Tab' || event.altKey && event.key === 'ArrowUp';
                 if (!isKeyNav || (isKeyNav && isUpdateVal)) {
-                    this.updateValues(selectedRecord[this.fields.value], selectedRecord[this.fields.text], this.gridObj.selectedRowIndex, ChangeEventArgs);
+                    this.updateValues(selectedRecords ? dataValue : '', selectedRecords ? dataText : '', this.gridObj.selectedRowIndex, ChangeEventArgs);
                 }
-                Input.setValue(selectedRecord[this.fields.text], this.inputEle, this.floatLabelType, this.showClearButton);
+                Input.setValue(selectedRecords ? dataText : '', this.inputEle, this.floatLabelType, this.showClearButton);
                 if (!isKeyNav || (isKeyNav && isUpdateVal)) {
                     this.hidePopup(e);
                 }
@@ -956,10 +980,12 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     }
     filterDatas(dataSource, inputValue) {
         const data = dataSource.filter((item) => {
-            return item[this.fields.text].toString().toLowerCase().startsWith(inputValue.toLowerCase());
+            const fieldText = this.updateFieldValue(this.fields.text, item);
+            return fieldText.toLowerCase().startsWith(inputValue.toLowerCase());
         });
         const exactData = dataSource.filter((item) => {
-            return item[this.fields.text].toString() === inputValue;
+            const fieldText = this.updateFieldValue(this.fields.text, item);
+            return fieldText === inputValue;
         });
         return { data, exactData };
     }
@@ -1015,7 +1041,8 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         });
     }
     filterData(item, filterType, inputValue, fields) {
-        const itemValue = item[fields ? fields.text : this.fields.text].toString().toLowerCase();
+        const dataValue = this.updateFieldValue(fields ? fields.text : this.fields.text, item);
+        const itemValue = dataValue.toLowerCase();
         switch (filterType) {
             case 'startswith':
                 return itemValue.startsWith(inputValue);
@@ -1137,11 +1164,12 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                 if (!isNullOrUndefined(this.text)) {
                     this.updateInputValue(this.text);
                 }
-                this.updateValuesOnInput(e);
+                const isClearVal = this.inputEle.value === '' ? true : false;
+                this.updateValuesOnInput(e, null, isClearVal);
             }
         }
     }
-    updateValuesOnInput(mouseEvent, keyEvent, isClearValues = false, isKeyDown = false) {
+    updateValuesOnInput(mouseEvent, keyEvent, isClearValues, isKeyDown = false) {
         const e = mouseEvent ? mouseEvent : keyEvent;
         const val = isKeyDown ? this.matchedContent : this.exactMatchedContent;
         if (!val) {
@@ -1149,19 +1177,21 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         }
         this.hidePopup(e);
         if (this.matchedRowEle && !isClearValues && val) {
-            const prevOnChange = this.isProtectedOnChange;
-            this.isProtectedOnChange = true;
             setTimeout(() => {
-                this.inputEle.value = this.matchedContent[this.fields.text].toString();
-                this.value = this.matchedContent[this.fields.value].toString();
+                const prevOnChange = this.isProtectedOnChange;
+                this.isProtectedOnChange = true;
+                const fieldText = this.updateFieldValue(this.fields.text, this.matchedContent);
+                const fieldValue = this.updateFieldValue(this.fields.value, this.matchedContent);
+                this.inputEle.value = fieldText;
+                this.value = fieldValue;
                 const selectIndex = this.findIndex(this.gridObj.currentViewData, this.matchedContent);
                 this.index = selectIndex;
-                this.text = this.matchedContent[this.fields.text].toString();
+                this.text = fieldText;
                 this.gridObj.selectRow(selectIndex);
                 this.selectedGridRow(this.gridObj.getRowByIndex(selectIndex), e);
                 this.previousItemElement = this.gridObj.getSelectedRows()[0];
+                this.isProtectedOnChange = prevOnChange;
             }, 100);
-            this.isProtectedOnChange = prevOnChange;
         }
         else {
             if (this.isDataFiltered) {
@@ -1506,7 +1536,8 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     getDataByValue(value) {
         if (!isNullOrUndefined(this.dataSource) && this.dataSource instanceof Array) {
             return this.dataSource.filter((item) => {
-                return item[this.fields.value].toString() === value;
+                const fieldValue = this.updateFieldValue(this.fields.value, item);
+                return fieldValue === value;
             })[0];
         }
         else if (!isNullOrUndefined(this.dataSource) && this.dataSource instanceof DataManager) {
@@ -1514,7 +1545,8 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const dataLists = e.result;
                 return dataLists.filter((item) => {
-                    return item[this.fields.value].toString() === value;
+                    const fieldValue = this.updateFieldValue(this.fields.value, item);
+                    return fieldValue === value;
                 })[0];
             });
         }