@syncfusion/ej2-multicolumn-combobox 27.2.5 → 28.1.37

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

@@ -1,9 +1,8 @@
-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';
 import { Grid, VirtualScroll, Group, Edit, Sort, Resize } from '@syncfusion/ej2-grids';
-export { Edit, Group, Sort, VirtualScroll } from '@syncfusion/ej2-grids';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -11,6 +10,14 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 const DROPDOWNICON = 'e-input-group-icon e-multicolumn-list-icon e-icons';
 const CONTENT = 'e-popup-content';
 const ICONANIMATION = 'e-icon-anim';
@@ -223,7 +230,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             moveDown: 'downarrow',
             moveUp: 'uparrow'
         };
-        this.matchedRowEle = this.matchedContent = null;
+        this.matchedRowEle = this.matchedContent = this.exactMatchedContent = null;
         this.persistData();
     }
     getDirective() {
@@ -249,7 +256,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     }
     persistData() {
         if (this.enablePersistence) {
-            this.element.id = this.element.id + '_wrapper';
+            this.element.id += '_wrapper';
             const data = window.localStorage.getItem(this.getModuleName() + this.element.id);
             if (!(isNullOrUndefined(data) || (data === ''))) {
                 this.setProperties(JSON.parse(data), true);
@@ -267,6 +274,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     }
     renderGrid() {
         const gridColumns = this.getGridColumns();
+        const sortOrder = this.sortOrder.toString().toLowerCase();
         this.gridObj = new Grid({
             dataSource: this.dataSource,
             columns: gridColumns,
@@ -289,22 +297,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             actionFailure: (args) => { this.onActionFailure(args); },
             actionBegin: (args) => { this.trigger('actionBegin', args); },
             actionComplete: this.handleActionComplete.bind(this),
-            keyPressed: (args) => {
-                if (args.key === 'Enter') {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    args.cancel = true;
-                    if (this.isPopupOpen) {
-                        this.selectedGridRow(this.gridObj.getRows()[this.gridObj.selectedRowIndex], args, true);
-                        this.hidePopup(args);
-                        this.focusIn(args);
-                    }
-                }
-                if (this.fields.groupBy) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    args.cancel = true;
-                    this.gridKeyActionHandler(args, true);
-                }
-            },
+            keyPressed: this.handleKeyPressed.bind(this),
             resizing: (args) => {
                 if (this.gridSettings.resizing) {
                     this.gridSettings.resizing.call(this, args);
@@ -323,7 +316,6 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         });
         this.gridEle = this.createElement('div', { id: getUniqueID('grid'), className: MULTICOLUMNGRID });
         this.updateGroupByField();
-        const sortOrder = this.sortOrder.toString().toLowerCase();
         if (gridColumns.length > 0) {
             // Set first column as primary key to avoid PRIMARY KEY MISSING warning.
             this.gridObj.columns[0].isPrimaryKey = true;
@@ -342,24 +334,53 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         this.popupObj.refreshPosition();
         this.gridObj.element.querySelector('.e-content').scrollTop = 0;
     }
+    handleKeyPressed(args) {
+        if (args.key === 'Enter') {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            args.cancel = true;
+            if (this.isPopupOpen) {
+                this.selectedGridRow(this.gridObj.getRows()[this.gridObj.selectedRowIndex], args, true);
+                this.hidePopup(args);
+                this.focusIn(args);
+            }
+        }
+        if (this.fields.groupBy) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            args.cancel = true;
+            this.gridKeyActionHandler(args, true);
+        }
+    }
     /* eslint-disable @typescript-eslint/no-explicit-any */
     isRowMatching(data, selectedValue, selectedText) {
-        const values = Object.values(data).map(String);
-        const isRowPresent = values.includes(selectedValue) && values.includes(selectedText);
-        return isRowPresent;
+        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) {
             const dataRows = args.rows;
             dataRows.forEach((row) => {
-                const data = row.data;
-                const index = row.index;
-                this.selectDataRow(data, index);
+                this.selectDataRow(row.data, row.index);
             });
         }
     }
     selectDataRow(data, index) {
-        const isPresent = this.isRowMatching(data, this.value ? this.value.toString() : '', this.text ? this.text.toString() : '');
+        const isPresent = this.isRowMatching(data, this.value ?
+            this.value.toString() : '', this.text ? this.text.toString() : '');
         if (isPresent) {
             this.gridObj.selectRow(index);
             const prevOnChange = this.isProtectedOnChange;
@@ -375,29 +396,24 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             return Object.keys(obj).every((key) => item[key] === obj[key]);
         });
     }
-    /* eslint-enable @typescript-eslint/no-explicit-any */
     getGridColumns() {
-        return this.columns.map((column) => {
-            let changeType;
-            if (column.displayAsCheckBox && !column.format) {
-                changeType = 'boolean';
-            }
-            return {
-                field: column.field,
-                headerText: column.header,
-                width: column.width,
-                textAlign: column.textAlign === '' && this.enableRtl ? 'Right' : column.textAlign,
-                format: column.format,
-                displayAsCheckBox: column.displayAsCheckBox,
-                template: column.template,
-                headerTemplate: column.headerTemplate,
-                customAttributes: column.customAttributes,
-                type: changeType
-            };
-        });
+        return this.columns.map(({ field, header, width, textAlign, format, displayAsCheckBox, template, headerTemplate, customAttributes }) => ({
+            field,
+            headerText: header,
+            width,
+            textAlign: textAlign.toString() === '' && this.enableRtl ? 'Right' : textAlign,
+            format,
+            displayAsCheckBox,
+            template,
+            headerTemplate,
+            customAttributes,
+            type: displayAsCheckBox && !format ? 'boolean' : undefined
+        }));
     }
     updateGroupByField() {
-        if (this.fields.groupBy !== '' && !isNullOrUndefined(this.fields.groupBy)) {
+        const groupByField = this.fields.groupBy;
+        const isGroupByValid = groupByField !== '' && !isNullOrUndefined(groupByField);
+        if (isGroupByValid) {
             if (this.sortType.toString().toLowerCase() !== 'multiplecolumns') {
                 this.gridEle.classList.add('e-multicolumn-group');
             }
@@ -406,10 +422,11 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             this.gridObj.allowGrouping = true;
             this.gridObj.groupSettings = {
                 showDropArea: false,
-                columns: [this.fields.groupBy],
-                captionTemplate: (this.groupTemplate && this.fields.groupBy !== '' && !isNullOrUndefined(this.fields.groupBy))
-                    ? this.groupTemplate : '${key}'
+                columns: [groupByField]
             };
+            if (this.groupTemplate && isGroupByValid) {
+                this.gridObj.groupSettings.captionTemplate = this.groupTemplate;
+            }
             if (this.isVue) {
                 this.gridObj.isVue = this.isVue;
             }
@@ -419,12 +436,13 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     onDataBound() {
         const dataCount = this.dataSource.length;
         const popupChild = this.popupDiv.querySelector('.' + MULTICOLUMNGRID);
+        const hasNoDataClass = this.popupDiv.classList.contains(NODATA);
         if (dataCount <= 0 && popupChild) {
             this.l10nUpdate();
             this.popupDiv.removeChild(this.gridEle);
             addClass([this.popupDiv], [NODATA]);
         }
-        else if (this.popupDiv.classList.contains(NODATA) && dataCount >= 1) {
+        else if (hasNoDataClass && dataCount >= 1) {
             removeClass([this.popupDiv], [NODATA]);
             const noRecordEle = this.popupDiv.querySelector('.e-no-records');
             if (noRecordEle) {
@@ -432,8 +450,9 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             }
         }
         if (this.isInitialRender) {
-            const rowHeight = !this.popupDiv.classList.contains(NODATA) ? this.popupDiv.querySelector('.e-gridcontent tr') ?
-                this.popupDiv.querySelector('.e-gridcontent tr').getBoundingClientRect().height : 0 :
+            const gridContentRow = this.popupDiv.querySelector('.e-gridcontent tr');
+            const rowHeight = !hasNoDataClass ? gridContentRow ?
+                gridContentRow.getBoundingClientRect().height : 0 :
                 this.popupDiv.getBoundingClientRect().height;
             this.popupRowHeight = rowHeight;
             this.popupObj.hide();
@@ -452,6 +471,16 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         addClass([this.popupDiv], [NODATA]);
     }
     renderInput() {
+        const allowedAttributes = ['aria-expanded', 'aria-readOnly', 'aria-disabled', 'autocomplete',
+            'autocapitalize', 'spellcheck', 'tabindex'];
+        const setAttributes = (element, attributes) => {
+            for (const key in attributes) {
+                // eslint-disable-next-line no-prototype-builtins
+                if (attributes.hasOwnProperty(key) && allowedAttributes.indexOf(key) !== -1 && isNullOrUndefined(element.getAttribute(key))) {
+                    element.setAttribute(key, attributes[key]);
+                }
+            }
+        };
         if (this.element.tagName === 'INPUT') {
             this.inputEle = this.element;
             if (isNullOrUndefined(this.inputEle.getAttribute('role'))) {
@@ -460,13 +489,15 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             if (isNullOrUndefined(this.inputEle.getAttribute('type'))) {
                 this.inputEle.setAttribute('type', 'text');
             }
-            this.inputEle.setAttribute('aria-expanded', 'false');
-            this.inputEle.setAttribute('aria-readOnly', this.readonly.toString());
-            this.inputEle.setAttribute('aria-disabled', this.disabled.toString());
-            this.inputEle.setAttribute('autocomplete', 'off');
-            this.inputEle.setAttribute('autocapitalize', 'off');
-            this.inputEle.setAttribute('spellcheck', 'false');
-            this.inputEle.setAttribute('tabindex', '0');
+            setAttributes(this.inputEle, {
+                'aria-expanded': 'false',
+                'aria-readOnly': this.readonly.toString(),
+                'aria-disabled': this.disabled.toString(),
+                autocomplete: 'off',
+                autocapitalize: 'off',
+                spellcheck: 'false',
+                tabindex: '0'
+            });
         }
         else {
             this.inputEle = this.createElement('input', { attrs: { role: 'textbox', type: 'text' } });
@@ -496,48 +527,52 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             this.initValue(null, null, true);
         }
     }
-    /* To calculate the width when change via set model */
     setElementWidth(inputWidth) {
+        if (isNullOrUndefined(inputWidth)) {
+            return;
+        }
         const ddElement = this.inputWrapper;
-        if (!isNullOrUndefined(inputWidth)) {
-            if (typeof inputWidth === 'number') {
-                ddElement.style.width = formatUnit(inputWidth);
-            }
-            else if (typeof inputWidth === 'string') {
-                ddElement.style.width = (inputWidth.match(/px|%|em/)) ? (inputWidth) : (formatUnit(inputWidth));
-            }
+        if (typeof inputWidth === 'number') {
+            ddElement.style.width = formatUnit(inputWidth);
+        }
+        else if (typeof inputWidth === 'string') {
+            ddElement.style.width = inputWidth.match(/px|%|em/) ? inputWidth : formatUnit(inputWidth);
         }
     }
     setHTMLAttributes() {
-        if (Object.keys(this.htmlAttributes).length) {
-            for (const htmlAttr of Object.keys(this.htmlAttributes)) {
-                if (htmlAttr === 'class') {
-                    this.inputWrapper.classList.add(this.htmlAttributes[`${htmlAttr}`]);
-                }
-                else if (htmlAttr === 'disabled') {
-                    this.setProperties({ enabled: false }, true);
-                    this.setEnable();
-                }
-                else if (htmlAttr === 'readonly') {
-                    this.setProperties({ readonly: true }, true);
-                    this.dataBind();
-                }
-                else if (htmlAttr === 'style') {
-                    this.inputWrapper.setAttribute('style', this.htmlAttributes[`${htmlAttr}`]);
-                }
-                else {
-                    const defaultAttr = ['title', 'id', 'placeholder',
-                        'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
-                    if (defaultAttr.indexOf(htmlAttr) > -1) {
-                        if (htmlAttr === 'placeholder') {
-                            Input.setPlaceholder(this.htmlAttributes[`${htmlAttr}`], this.inputEle);
+        const htmlAttributes = this.htmlAttributes;
+        const inputEle = this.inputEle;
+        if (Object.keys(htmlAttributes).length) {
+            for (const htmlAttr of Object.keys(htmlAttributes)) {
+                switch (htmlAttr) {
+                    case 'class':
+                        this.inputWrapper.classList.add(htmlAttributes[htmlAttr]);
+                        break;
+                    case 'disabled':
+                        this.setProperties({ enabled: false }, true);
+                        this.setEnable();
+                        break;
+                    case 'readonly':
+                        this.setProperties({ readonly: true }, true);
+                        this.dataBind();
+                        break;
+                    case 'style':
+                        this.inputWrapper.setAttribute('style', htmlAttributes[htmlAttr]);
+                        break;
+                    default: {
+                        const defaultAttr = ['title', 'id', 'placeholder', 'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
+                        if (defaultAttr.indexOf(htmlAttr) > -1) {
+                            if (htmlAttr === 'placeholder') {
+                                Input.setPlaceholder(htmlAttributes[htmlAttr], inputEle);
+                            }
+                            else {
+                                inputEle.setAttribute(htmlAttr, htmlAttributes[htmlAttr]);
+                            }
                         }
                         else {
-                            this.inputEle.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
+                            inputEle.setAttribute(htmlAttr, htmlAttributes[htmlAttr]);
                         }
-                    }
-                    else {
-                        this.inputEle.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
+                        break;
                     }
                 }
             }
@@ -548,8 +583,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         Input.setEnabled(!this.disabled, this.inputEle);
         if (!this.disabled) {
             removeClass([this.inputWrapper], DISABLED);
-            this.inputEle.setAttribute('aria-disabled', 'false');
-            this.inputWrapper.setAttribute('aria-disabled', 'false');
+            this.setAriaDisabled('false');
         }
         else {
             if (this.isPopupOpen) {
@@ -559,10 +593,17 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             if (this.inputWrapper && this.inputWrapper.classList.contains(INPUTFOCUS)) {
                 removeClass([this.inputWrapper], [INPUTFOCUS]);
             }
-            this.inputEle.setAttribute('aria-disabled', 'true');
-            this.inputWrapper.setAttribute('aria-disabled', 'true');
+            this.setAriaDisabled('true');
         }
     }
+    setAriaDisabled(value) {
+        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];
@@ -587,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];
@@ -600,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);
             }
@@ -648,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,
@@ -662,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)
             };
         }
@@ -822,7 +868,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     getSize(ispopupWidth) {
         const currentDimension = ispopupWidth ? this.popupWidth : this.popupHeight;
         let size = formatUnit(currentDimension);
-        if (size.indexOf('%') > -1) {
+        if (size.includes('%')) {
             const dimensionValue = ispopupWidth ? this.inputWrapper.offsetWidth : document.documentElement.clientHeight;
             size = (dimensionValue * parseFloat(size) / 100).toString() + 'px';
         }
@@ -841,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
         };
@@ -860,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);
                 }
@@ -873,8 +919,8 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         this.previousItemElement = eventArgs.itemElement;
         const prevOnChange = this.isProtectedOnChange;
         this.isProtectedOnChange = true;
-        this.text = text ? text : this.text;
-        this.value = value ? value : this.value;
+        this.text = text || this.text;
+        this.value = value || this.value;
         this.index = !isNullOrUndefined(index) ? index : this.index;
         this.isProtectedOnChange = prevOnChange;
         if (!isInitial) {
@@ -916,42 +962,47 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         this.updateInputValue(e.target.value);
     }
     updateInputValue(inputValue) {
-        let data;
-        if (this.dataSource instanceof DataManager) {
-            const query = new Query();
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.dataSource.executeQuery(query).then((result) => {
+        return __awaiter(this, void 0, void 0, function* () {
+            let data;
+            let exactData;
+            if (this.dataSource instanceof DataManager) {
+                const query = new Query();
+                /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
+                const result = yield this.dataSource.executeQuery(query);
                 const totaldata = result.result;
-                data = totaldata.filter((item) => {
-                    return item[this.fields.text].toString().toLowerCase().startsWith(inputValue.toLowerCase());
-                });
-                this.selectFilteredRows(data);
-            });
-        }
-        else if (Array.isArray(this.dataSource)) {
-            data = this.dataSource.filter((item) => {
-                return item[this.fields.text].toString().toLowerCase().startsWith(inputValue.toLowerCase());
-            });
-            this.selectFilteredRows(data);
-        }
+                ({ data, exactData } = this.filterDatas(totaldata, inputValue));
+            }
+            else if (Array.isArray(this.dataSource)) {
+                ({ data, exactData } = this.filterDatas(this.dataSource, inputValue));
+            }
+            this.selectFilteredRows(data, exactData);
+        });
     }
-    selectFilteredRows(data) {
-        if (data.length > 0) {
-            this.matchedContent = data[0];
-        }
-        else {
-            this.matchedContent = null;
-        }
-        if (this.matchedContent) {
-            const selectedIndex = this.findIndex(this.gridObj.currentViewData, this.matchedContent);
-            this.matchedRowEle = this.gridObj.getRowByIndex(selectedIndex);
-        }
-        else {
-            this.matchedRowEle = null;
+    filterDatas(dataSource, inputValue) {
+        const data = dataSource.filter((item) => {
+            const fieldText = this.updateFieldValue(this.fields.text, item);
+            return fieldText.toLowerCase().startsWith(inputValue.toLowerCase());
+        });
+        const exactData = dataSource.filter((item) => {
+            const fieldText = this.updateFieldValue(this.fields.text, item);
+            return fieldText === inputValue;
+        });
+        return { data, exactData };
+    }
+    selectFilteredRows(data, exactData) {
+        if (data.length <= 0) {
+            this.matchedRowEle = this.matchedContent = this.exactMatchedContent = null;
+            return;
         }
+        this.matchedContent = data[0];
+        this.exactMatchedContent = exactData[0];
+        const selectedIndex = this.findIndex(this.gridObj.currentViewData, this.matchedContent);
+        this.matchedRowEle = this.gridObj.getRowByIndex(selectedIndex);
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     filterAction(dataSource, inputValue, query, fields) {
+        const isQuery = query || new Query();
+        const filterType = this.filterType.toString().toLowerCase();
         if (isNullOrUndefined(query) && isNullOrUndefined(fields)) {
             this.updateGridDataSource(dataSource);
         }
@@ -968,12 +1019,10 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             }
         }
         else {
-            const isQuery = query || new Query();
             if (dataSource instanceof DataManager) {
                 this.filteringHandler(dataSource, inputValue, isQuery, fields);
             }
             else if (Array.isArray(dataSource)) {
-                const filterType = this.filterType.toString().toLowerCase();
                 const filteredData = dataSource.filter((item) => this.filterData(item, filterType, inputValue, fields));
                 this.updateGridDataSource(filteredData);
             }
@@ -992,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);
@@ -1099,39 +1149,49 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         }
     }
     onDocumentClick(e) {
+        const target = e.target;
         if (this.disabled || this.readonly || !this.isPopupOpen) {
-            if (!(e.target.closest('.e-multicolumn-list'))) {
+            if (!target.closest('.e-multicolumn-list')) {
                 this.focusOut();
             }
             return;
         }
-        const target = e.target;
         if ((target.classList.contains('e-multicolumn-list-icon') || closest(target, '.e-popup'))) {
             e.preventDefault();
         }
         else {
             if (!target.classList.contains('e-multicolumncombobox') && !target.classList.contains('e-clear-icon')) {
-                this.updateValuesOnInput(e);
+                if (!isNullOrUndefined(this.text)) {
+                    this.updateInputValue(this.text);
+                }
+                const isClearVal = this.inputEle.value === '' ? true : false;
+                this.updateValuesOnInput(e, null, isClearVal);
             }
         }
     }
-    updateValuesOnInput(mouseEvent, keyEvent, isClearValues = false) {
+    updateValuesOnInput(mouseEvent, keyEvent, isClearValues, isKeyDown = false) {
         const e = mouseEvent ? mouseEvent : keyEvent;
+        const val = isKeyDown ? this.matchedContent : this.exactMatchedContent;
+        if (!val) {
+            this.inputEle.value = this.value = this.index = this.text = null;
+        }
         this.hidePopup(e);
-        if (this.matchedRowEle && !isClearValues) {
-            const prevOnChange = this.isProtectedOnChange;
-            this.isProtectedOnChange = true;
+        if (this.matchedRowEle && !isClearValues && val) {
             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) {
@@ -1202,7 +1262,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                 this.updateSelectedItem(e, true, true);
                 break;
             case 'enter':
-                this.updateValuesOnInput(null, e);
+                this.updateValuesOnInput(null, e, false, true);
                 this.focusIn(e);
                 break;
             case 'home':
@@ -1212,31 +1272,19 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         }
     }
     gridKeyActionHandler(e, isGroup) {
+        const keyActionMap = {
+            'ArrowDown': 'moveDown',
+            'ArrowUp': 'moveUp',
+            'End': 'end',
+            'Home': 'home',
+            'Tab': 'tab',
+            'Escape': 'escape',
+            'Shift+Tab': 'shiftTab',
+            'Alt+ArrowUp': 'altUp'
+        };
         if (isGroup) {
-            if (e.key === 'ArrowDown') {
-                e.action = 'moveDown';
-            }
-            else if (e.key === 'ArrowUp') {
-                e.action = 'moveUp';
-            }
-            else if (e.key === 'End') {
-                e.action = 'end';
-            }
-            else if (e.key === 'Home') {
-                e.action = 'home';
-            }
-            else if (e.key === 'Tab') {
-                e.action = 'tab';
-            }
-            else if (e.key === 'Escape') {
-                e.action = 'escape';
-            }
-            if (e.shiftKey && e.key === 'Tab') {
-                e.action = 'shiftTab';
-            }
-            if (e.altKey && e.key === 'ArrowUp') {
-                e.action = 'altUp';
-            }
+            const key = `${e.altKey ? 'Alt+' : ''}${e.shiftKey ? 'Shift+' : ''}${e.key}`;
+            e.action = keyActionMap[key] || e.action;
         }
         switch (e.action) {
             case 'escape':
@@ -1301,6 +1349,25 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             clearIconEle.style.display = this.inputEle.value === '' ? 'none' : 'flex';
         }
     }
+    updateDynamicDataSource(newDataSource, oldDataSource) {
+        if (this.gridObj) {
+            let dataLength;
+            this.gridObj.dataSource = newDataSource;
+            const isRemoteData = oldDataSource instanceof DataManager;
+            if (isRemoteData) {
+                oldDataSource.executeQuery(new Query()).then((e) => {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    dataLength = e.result.length;
+                });
+            }
+            else {
+                dataLength = oldDataSource.length;
+            }
+            if (dataLength === 0) {
+                this.popupDiv.appendChild(this.gridEle);
+            }
+        }
+    }
     /**
      * Sets the focus to the component for interaction.component for interaction.
      *
@@ -1381,11 +1448,12 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                 const contentEle = this.gridObj.getContent();
                 if (contentEle) {
                     const activeRow = contentEle.querySelector('.e-rowcell.e-active');
+                    const firstRow = contentEle.querySelector('.e-row');
                     if (activeRow) {
                         this.inputEle.setAttribute('aria-activedescendant', activeRow.parentElement.getAttribute('data-uid'));
                     }
-                    else if (contentEle.querySelector('.e-row')) {
-                        this.inputEle.setAttribute('aria-activedescendant', contentEle.querySelector('.e-row').getAttribute('data-uid'));
+                    else if (firstRow) {
+                        this.inputEle.setAttribute('aria-activedescendant', firstRow.getAttribute('data-uid'));
                     }
                 }
                 if (!isNullOrUndefined(this.dataSource) && this.dataSource instanceof DataManager) {
@@ -1407,24 +1475,21 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     hidePopup(e) {
         const animModel = { name: 'FadeOut', duration: 100 };
         const eventArgs = { popup: this.popupObj, event: e || null, cancel: false, animation: animModel };
+        const target = e ? e.target : null;
         this.trigger('close', eventArgs, (eventArgs) => {
             if (!eventArgs.cancel) {
                 this.isPopupOpen = false;
                 removeClass([this.inputWrapper], [ICONANIMATION]);
                 attributes(this.inputEle, { 'aria-expanded': 'false' });
                 this.popupObj.hide(new Animation(eventArgs.animation));
-                this.inputEle.value = this.text ? this.text.toString() : '';
-                if (e) {
-                    const target = e.target;
-                    if (target && (target.classList.contains('e-multicolumn-list-icon') || target.classList.contains('e-rowcell'))) {
-                        if (!this.value) {
-                            this.gridObj.refreshColumns();
-                        }
-                        setTimeout(() => { this.focusIn(e); });
-                    }
-                    else {
-                        this.focusOut();
+                if (target && (target.classList.contains('e-multicolumn-list-icon') || target.classList.contains('e-rowcell'))) {
+                    if (!this.value) {
+                        this.gridObj.refreshColumns();
                     }
+                    setTimeout(() => { this.focusIn(e); });
+                }
+                else {
+                    this.focusOut();
                 }
                 this.inputEle.removeAttribute('aria-owns');
                 this.inputEle.removeAttribute('aria-activedescendant');
@@ -1471,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) {
@@ -1479,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];
             });
         }
@@ -1630,9 +1697,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                     }
                     break;
                 case 'dataSource':
-                    if (this.gridObj) {
-                        this.gridObj.dataSource = newProp.dataSource;
-                    }
+                    this.updateDynamicDataSource(newProp.dataSource, oldProp.dataSource);
                     break;
                 case 'query':
                     if (this.gridObj) {