@syncfusion/ej2-multicolumn-combobox 27.2.5 → 28.1.37

package/src/multicolumn-combobox/multi-column-combo-box.js

@@ -17,7 +17,42 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-import { Component, EventHandler, Property, NotifyPropertyChanges, closest, attributes, append, compile, detach, KeyboardEvents, isNullOrUndefined } from '@syncfusion/ej2-base';
+var __awaiter = (this && this.__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());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { Component, EventHandler, Property, NotifyPropertyChanges, closest, attributes, append, compile, detach, KeyboardEvents, getValue } from '@syncfusion/ej2-base';
 import { ChildProperty, prepend, Collection, getUniqueID, Complex, isNullOrUndefined as isNOU, select, L10n, Browser } from '@syncfusion/ej2-base';
 import { formatUnit, addClass, removeClass, Event, Animation } from '@syncfusion/ej2-base';
 import { Input } from '@syncfusion/ej2-inputs';
@@ -260,7 +295,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             moveDown: 'downarrow',
             moveUp: 'uparrow'
         };
-        this.matchedRowEle = this.matchedContent = null;
+        this.matchedRowEle = this.matchedContent = this.exactMatchedContent = null;
         this.persistData();
     };
     MultiColumnComboBox.prototype.getDirective = function () {
@@ -286,7 +321,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     };
     MultiColumnComboBox.prototype.persistData = function () {
         if (this.enablePersistence) {
-            this.element.id = this.element.id + '_wrapper';
+            this.element.id += '_wrapper';
             var data = window.localStorage.getItem(this.getModuleName() + this.element.id);
             if (!(isNOU(data) || (data === ''))) {
                 this.setProperties(JSON.parse(data), true);
@@ -305,6 +340,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     MultiColumnComboBox.prototype.renderGrid = function () {
         var _this = this;
         var gridColumns = this.getGridColumns();
+        var sortOrder = this.sortOrder.toString().toLowerCase();
         this.gridObj = new Grid({
             dataSource: this.dataSource,
             columns: gridColumns,
@@ -327,22 +363,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             actionFailure: function (args) { _this.onActionFailure(args); },
             actionBegin: function (args) { _this.trigger('actionBegin', args); },
             actionComplete: this.handleActionComplete.bind(this),
-            keyPressed: function (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: function (args) {
                 if (_this.gridSettings.resizing) {
                     _this.gridSettings.resizing.call(_this, args);
@@ -361,7 +382,6 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         });
         this.gridEle = this.createElement('div', { id: getUniqueID('grid'), className: MULTICOLUMNGRID });
         this.updateGroupByField();
-        var 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;
@@ -380,25 +400,54 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         this.popupObj.refreshPosition();
         this.gridObj.element.querySelector('.e-content').scrollTop = 0;
     };
+    MultiColumnComboBox.prototype.handleKeyPressed = function (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 */
     MultiColumnComboBox.prototype.isRowMatching = function (data, selectedValue, selectedText) {
-        var values = Object.values(data).map(String);
-        var isRowPresent = values.includes(selectedValue) && values.includes(selectedText);
-        return isRowPresent;
+        var flattenData = function (data) {
+            var result = [];
+            if (data && typeof data === 'object') {
+                if (Array.isArray(data)) {
+                    data.forEach(function (item) { return result.push.apply(result, flattenData(item)); });
+                }
+                else {
+                    Object.keys(data).forEach(function (key) { return result.push.apply(result, flattenData(data["" + key])); });
+                }
+            }
+            else if (data != null) {
+                result.push(String(data));
+            }
+            return result;
+        };
+        var flattenedValues = flattenData(data);
+        return (flattenedValues.indexOf(selectedValue) !== -1 && flattenedValues.indexOf(selectedText) !== -1);
     };
     MultiColumnComboBox.prototype.updateRowSelection = function (args) {
         var _this = this;
         if (args) {
             var dataRows = args.rows;
             dataRows.forEach(function (row) {
-                var data = row.data;
-                var index = row.index;
-                _this.selectDataRow(data, index);
+                _this.selectDataRow(row.data, row.index);
             });
         }
     };
     MultiColumnComboBox.prototype.selectDataRow = function (data, index) {
-        var isPresent = this.isRowMatching(data, this.value ? this.value.toString() : '', this.text ? this.text.toString() : '');
+        var isPresent = this.isRowMatching(data, this.value ?
+            this.value.toString() : '', this.text ? this.text.toString() : '');
         if (isPresent) {
             this.gridObj.selectRow(index);
             var prevOnChange = this.isProtectedOnChange;
@@ -414,30 +463,28 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             return Object.keys(obj).every(function (key) { return item[key] === obj[key]; });
         });
     };
-    /* eslint-enable @typescript-eslint/no-explicit-any */
     MultiColumnComboBox.prototype.getGridColumns = function () {
         var _this = this;
-        return this.columns.map(function (column) {
-            var 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(function (_a) {
+            var field = _a.field, header = _a.header, width = _a.width, textAlign = _a.textAlign, format = _a.format, displayAsCheckBox = _a.displayAsCheckBox, template = _a.template, headerTemplate = _a.headerTemplate, customAttributes = _a.customAttributes;
+            return ({
+                field: field,
+                headerText: header,
+                width: width,
+                textAlign: textAlign.toString() === '' && _this.enableRtl ? 'Right' : textAlign,
+                format: format,
+                displayAsCheckBox: displayAsCheckBox,
+                template: template,
+                headerTemplate: headerTemplate,
+                customAttributes: customAttributes,
+                type: displayAsCheckBox && !format ? 'boolean' : undefined
+            });
         });
     };
     MultiColumnComboBox.prototype.updateGroupByField = function () {
-        if (this.fields.groupBy !== '' && !isNOU(this.fields.groupBy)) {
+        var groupByField = this.fields.groupBy;
+        var isGroupByValid = groupByField !== '' && !isNOU(groupByField);
+        if (isGroupByValid) {
             if (this.sortType.toString().toLowerCase() !== 'multiplecolumns') {
                 this.gridEle.classList.add('e-multicolumn-group');
             }
@@ -446,10 +493,11 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             this.gridObj.allowGrouping = true;
             this.gridObj.groupSettings = {
                 showDropArea: false,
-                columns: [this.fields.groupBy],
-                captionTemplate: (this.groupTemplate && this.fields.groupBy !== '' && !isNOU(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;
             }
@@ -459,12 +507,13 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     MultiColumnComboBox.prototype.onDataBound = function () {
         var dataCount = this.dataSource.length;
         var popupChild = this.popupDiv.querySelector('.' + MULTICOLUMNGRID);
+        var 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]);
             var noRecordEle = this.popupDiv.querySelector('.e-no-records');
             if (noRecordEle) {
@@ -472,8 +521,9 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             }
         }
         if (this.isInitialRender) {
-            var rowHeight = !this.popupDiv.classList.contains(NODATA) ? this.popupDiv.querySelector('.e-gridcontent tr') ?
-                this.popupDiv.querySelector('.e-gridcontent tr').getBoundingClientRect().height : 0 :
+            var gridContentRow = this.popupDiv.querySelector('.e-gridcontent tr');
+            var rowHeight = !hasNoDataClass ? gridContentRow ?
+                gridContentRow.getBoundingClientRect().height : 0 :
                 this.popupDiv.getBoundingClientRect().height;
             this.popupRowHeight = rowHeight;
             this.popupObj.hide();
@@ -492,6 +542,16 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         addClass([this.popupDiv], [NODATA]);
     };
     MultiColumnComboBox.prototype.renderInput = function () {
+        var allowedAttributes = ['aria-expanded', 'aria-readOnly', 'aria-disabled', 'autocomplete',
+            'autocapitalize', 'spellcheck', 'tabindex'];
+        var setAttributes = function (element, attributes) {
+            for (var key in attributes) {
+                // eslint-disable-next-line no-prototype-builtins
+                if (attributes.hasOwnProperty(key) && allowedAttributes.indexOf(key) !== -1 && isNOU(element.getAttribute(key))) {
+                    element.setAttribute(key, attributes[key]);
+                }
+            }
+        };
         if (this.element.tagName === 'INPUT') {
             this.inputEle = this.element;
             if (isNOU(this.inputEle.getAttribute('role'))) {
@@ -500,13 +560,15 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             if (isNOU(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' } });
@@ -536,49 +598,53 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             this.initValue(null, null, true);
         }
     };
-    /* To calculate the width when change via set model */
     MultiColumnComboBox.prototype.setElementWidth = function (inputWidth) {
+        if (isNOU(inputWidth)) {
+            return;
+        }
         var ddElement = this.inputWrapper;
-        if (!isNOU(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);
         }
     };
     MultiColumnComboBox.prototype.setHTMLAttributes = function () {
-        if (Object.keys(this.htmlAttributes).length) {
-            for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
+        var htmlAttributes = this.htmlAttributes;
+        var inputEle = this.inputEle;
+        if (Object.keys(htmlAttributes).length) {
+            for (var _i = 0, _a = Object.keys(htmlAttributes); _i < _a.length; _i++) {
                 var htmlAttr = _a[_i];
-                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 {
-                    var 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);
+                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: {
+                        var 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;
                     }
                 }
             }
@@ -589,8 +655,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         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) {
@@ -600,10 +665,17 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             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');
         }
     };
+    MultiColumnComboBox.prototype.setAriaDisabled = function (value) {
+        this.inputEle.setAttribute('aria-disabled', value);
+        this.inputWrapper.setAttribute('aria-disabled', value);
+    };
+    MultiColumnComboBox.prototype.updateFieldValue = function (fieldValue, dataObj) {
+        var fieldVal = getValue(fieldValue, dataObj).toString();
+        return fieldVal;
+    };
     MultiColumnComboBox.prototype.initValue = function (isRerender, isValue, isInitial) {
         var _this = this;
         var prevItemData = this.gridObj.getSelectedRecords()[0];
@@ -629,8 +701,9 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var dataLists = e.result;
                     var filteredData = dataLists.filter(function (item) {
-                        return item[isRerender ? (isValue ? _this.fields.value : _this.fields.text) :
-                            !isNOU(_this.value) ? _this.fields.value : _this.fields.text].toString() === value_1;
+                        var fieldVal = _this.updateFieldValue(isRerender ? (isValue ? _this.fields.value : _this.fields.text) :
+                            !isNOU(_this.value) ? _this.fields.value : _this.fields.text, item);
+                        return fieldVal === value_1;
                     });
                     if (filteredData.length > 0) {
                         item = filteredData[0];
@@ -642,8 +715,9 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             }
             else if (!isNOU(this.dataSource) && this.dataSource instanceof Array) {
                 item = this.dataSource.filter(function (data) {
-                    return data[isRerender ? (isValue ? _this.fields.value : _this.fields.text) :
-                        !isNOU(_this.value) ? _this.fields.value : _this.fields.text].toString() === value_1;
+                    var fieldVal = _this.updateFieldValue(isRerender ? (isValue ? _this.fields.value : _this.fields.text) :
+                        !isNOU(_this.value) ? _this.fields.value : _this.fields.text, data);
+                    return fieldVal === value_1;
                 })[0];
                 updateValues(this.dataSource);
             }
@@ -690,8 +764,9 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         }
     };
     MultiColumnComboBox.prototype.updateChangeEvent = function (item, prevItemData, prevItemEle, currentValue, currentText, currentIndex, isRerender, isInitial) {
+        var fieldValue = item ? this.updateFieldValue(this.fields.value, item) : null;
         var 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,
@@ -704,10 +779,12 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     };
     MultiColumnComboBox.prototype.updateCurrentValues = function (item, dataList) {
         if (!isNOU(item)) {
-            Input.setValue(item[this.fields.text].toString(), this.inputEle, this.floatLabelType, this.showClearButton);
+            var fieldText = this.updateFieldValue(this.fields.text, item);
+            var 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)
             };
         }
@@ -865,7 +942,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     MultiColumnComboBox.prototype.getSize = function (ispopupWidth) {
         var currentDimension = ispopupWidth ? this.popupWidth : this.popupHeight;
         var size = formatUnit(currentDimension);
-        if (size.indexOf('%') > -1) {
+        if (size.includes('%')) {
             var dimensionValue = ispopupWidth ? this.inputWrapper.offsetWidth : document.documentElement.clientHeight;
             size = (dimensionValue * parseFloat(size) / 100).toString() + 'px';
         }
@@ -885,16 +962,16 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             cancel: false
         };
         var selectedRecords = this.gridObj.getSelectedRecords()[0];
-        var fieldText = selectedRecords ? selectedRecords[this.fields.text].toString() : '';
-        var fieldValue = selectedRecords ? selectedRecords[this.fields.value].toString() : '';
+        var dataText = selectedRecords ? this.updateFieldValue(this.fields.text, selectedRecords) : '';
+        var dataValue = selectedRecords ? this.updateFieldValue(this.fields.value, selectedRecords) : '';
         var 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
         };
@@ -904,9 +981,9 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 var event_1 = e;
                 var isUpdateVal = event_1.key === 'Enter' || event_1.key === 'Tab' || event_1.shiftKey && event_1.key === 'Tab' || event_1.altKey && event_1.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);
                 }
@@ -917,8 +994,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         this.previousItemElement = eventArgs.itemElement;
         var 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 = !isNOU(index) ? index : this.index;
         this.isProtectedOnChange = prevOnChange;
         if (!isInitial) {
@@ -961,45 +1038,59 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         this.updateInputValue(e.target.value);
     };
     MultiColumnComboBox.prototype.updateInputValue = function (inputValue) {
-        var _this = this;
-        var data;
-        if (this.dataSource instanceof DataManager) {
-            var query = new Query();
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.dataSource.executeQuery(query).then(function (result) {
-                var totaldata = result.result;
-                data = totaldata.filter(function (item) {
-                    return item[_this.fields.text].toString().toLowerCase().startsWith(inputValue.toLowerCase());
-                });
-                _this.selectFilteredRows(data);
-            });
-        }
-        else if (Array.isArray(this.dataSource)) {
-            data = this.dataSource.filter(function (item) {
-                return item[_this.fields.text].toString().toLowerCase().startsWith(inputValue.toLowerCase());
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, _b, data, exactData, query, result, totaldata;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        if (!(this.dataSource instanceof DataManager)) return [3 /*break*/, 2];
+                        query = new Query();
+                        return [4 /*yield*/, this.dataSource.executeQuery(query)];
+                    case 1:
+                        result = _c.sent();
+                        totaldata = result.result;
+                        (_a = this.filterDatas(totaldata, inputValue), data = _a.data, exactData = _a.exactData);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        if (Array.isArray(this.dataSource)) {
+                            (_b = this.filterDatas(this.dataSource, inputValue), data = _b.data, exactData = _b.exactData);
+                        }
+                        _c.label = 3;
+                    case 3:
+                        this.selectFilteredRows(data, exactData);
+                        return [2 /*return*/];
+                }
             });
-            this.selectFilteredRows(data);
-        }
+        });
     };
-    MultiColumnComboBox.prototype.selectFilteredRows = function (data) {
-        if (data.length > 0) {
-            this.matchedContent = data[0];
-        }
-        else {
-            this.matchedContent = null;
-        }
-        if (this.matchedContent) {
-            var selectedIndex = this.findIndex(this.gridObj.currentViewData, this.matchedContent);
-            this.matchedRowEle = this.gridObj.getRowByIndex(selectedIndex);
-        }
-        else {
-            this.matchedRowEle = null;
+    MultiColumnComboBox.prototype.filterDatas = function (dataSource, inputValue) {
+        var _this = this;
+        var data = dataSource.filter(function (item) {
+            var fieldText = _this.updateFieldValue(_this.fields.text, item);
+            return fieldText.toLowerCase().startsWith(inputValue.toLowerCase());
+        });
+        var exactData = dataSource.filter(function (item) {
+            var fieldText = _this.updateFieldValue(_this.fields.text, item);
+            return fieldText === inputValue;
+        });
+        return { data: data, exactData: exactData };
+    };
+    MultiColumnComboBox.prototype.selectFilteredRows = function (data, exactData) {
+        if (data.length <= 0) {
+            this.matchedRowEle = this.matchedContent = this.exactMatchedContent = null;
+            return;
         }
+        this.matchedContent = data[0];
+        this.exactMatchedContent = exactData[0];
+        var selectedIndex = this.findIndex(this.gridObj.currentViewData, this.matchedContent);
+        this.matchedRowEle = this.gridObj.getRowByIndex(selectedIndex);
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     MultiColumnComboBox.prototype.filterAction = function (dataSource, inputValue, query, fields) {
         var _this = this;
-        if (isNullOrUndefined(query) && isNullOrUndefined(fields)) {
+        var isQuery = query || new Query();
+        var filterType = this.filterType.toString().toLowerCase();
+        if (isNOU(query) && isNOU(fields)) {
             this.updateGridDataSource(dataSource);
         }
         else if (query) {
@@ -1015,14 +1106,12 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             }
         }
         else {
-            var isQuery = query || new Query();
             if (dataSource instanceof DataManager) {
                 this.filteringHandler(dataSource, inputValue, isQuery, fields);
             }
             else if (Array.isArray(dataSource)) {
-                var filterType_1 = this.filterType.toString().toLowerCase();
                 var filteredData = dataSource.filter(function (item) {
-                    return _this.filterData(item, filterType_1, inputValue, fields);
+                    return _this.filterData(item, filterType, inputValue, fields);
                 });
                 this.updateGridDataSource(filteredData);
             }
@@ -1042,7 +1131,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         });
     };
     MultiColumnComboBox.prototype.filterData = function (item, filterType, inputValue, fields) {
-        var itemValue = item[fields ? fields.text : this.fields.text].toString().toLowerCase();
+        var dataValue = this.updateFieldValue(fields ? fields.text : this.fields.text, item);
+        var itemValue = dataValue.toLowerCase();
         switch (filterType) {
             case 'startswith':
                 return itemValue.startsWith(inputValue);
@@ -1149,41 +1239,51 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         }
     };
     MultiColumnComboBox.prototype.onDocumentClick = function (e) {
+        var 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;
         }
-        var 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 (!isNOU(this.text)) {
+                    this.updateInputValue(this.text);
+                }
+                var isClearVal = this.inputEle.value === '' ? true : false;
+                this.updateValuesOnInput(e, null, isClearVal);
             }
         }
     };
-    MultiColumnComboBox.prototype.updateValuesOnInput = function (mouseEvent, keyEvent, isClearValues) {
+    MultiColumnComboBox.prototype.updateValuesOnInput = function (mouseEvent, keyEvent, isClearValues, isKeyDown) {
         var _this = this;
-        if (isClearValues === void 0) { isClearValues = false; }
+        if (isKeyDown === void 0) { isKeyDown = false; }
         var e = mouseEvent ? mouseEvent : keyEvent;
+        var 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) {
-            var prevOnChange = this.isProtectedOnChange;
-            this.isProtectedOnChange = true;
+        if (this.matchedRowEle && !isClearValues && val) {
             setTimeout(function () {
-                _this.inputEle.value = _this.matchedContent[_this.fields.text].toString();
-                _this.value = _this.matchedContent[_this.fields.value].toString();
+                var prevOnChange = _this.isProtectedOnChange;
+                _this.isProtectedOnChange = true;
+                var fieldText = _this.updateFieldValue(_this.fields.text, _this.matchedContent);
+                var fieldValue = _this.updateFieldValue(_this.fields.value, _this.matchedContent);
+                _this.inputEle.value = fieldText;
+                _this.value = fieldValue;
                 var 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) {
@@ -1254,7 +1354,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 this.updateSelectedItem(e, true, true);
                 break;
             case 'enter':
-                this.updateValuesOnInput(null, e);
+                this.updateValuesOnInput(null, e, false, true);
                 this.focusIn(e);
                 break;
             case 'home':
@@ -1264,31 +1364,19 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         }
     };
     MultiColumnComboBox.prototype.gridKeyActionHandler = function (e, isGroup) {
+        var 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';
-            }
+            var key = "" + (e.altKey ? 'Alt+' : '') + (e.shiftKey ? 'Shift+' : '') + e.key;
+            e.action = keyActionMap[key] || e.action;
         }
         switch (e.action) {
             case 'escape':
@@ -1356,6 +1444,25 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             clearIconEle.style.display = this.inputEle.value === '' ? 'none' : 'flex';
         }
     };
+    MultiColumnComboBox.prototype.updateDynamicDataSource = function (newDataSource, oldDataSource) {
+        if (this.gridObj) {
+            var dataLength_1;
+            this.gridObj.dataSource = newDataSource;
+            var isRemoteData = oldDataSource instanceof DataManager;
+            if (isRemoteData) {
+                oldDataSource.executeQuery(new Query()).then(function (e) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    dataLength_1 = e.result.length;
+                });
+            }
+            else {
+                dataLength_1 = oldDataSource.length;
+            }
+            if (dataLength_1 === 0) {
+                this.popupDiv.appendChild(this.gridEle);
+            }
+        }
+    };
     /**
      * Sets the focus to the component for interaction.component for interaction.
      *
@@ -1437,11 +1544,12 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 var contentEle = _this.gridObj.getContent();
                 if (contentEle) {
                     var activeRow = contentEle.querySelector('.e-rowcell.e-active');
+                    var 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 (!isNOU(_this.dataSource) && _this.dataSource instanceof DataManager) {
@@ -1464,24 +1572,21 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         var _this = this;
         var animModel = { name: 'FadeOut', duration: 100 };
         var eventArgs = { popup: this.popupObj, event: e || null, cancel: false, animation: animModel };
+        var target = e ? e.target : null;
         this.trigger('close', eventArgs, function (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) {
-                    var target = e.target;
-                    if (target && (target.classList.contains('e-multicolumn-list-icon') || target.classList.contains('e-rowcell'))) {
-                        if (!_this.value) {
-                            _this.gridObj.refreshColumns();
-                        }
-                        setTimeout(function () { _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(function () { _this.focusIn(e); });
+                }
+                else {
+                    _this.focusOut();
                 }
                 _this.inputEle.removeAttribute('aria-owns');
                 _this.inputEle.removeAttribute('aria-activedescendant');
@@ -1529,7 +1634,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         var _this = this;
         if (!isNOU(this.dataSource) && this.dataSource instanceof Array) {
             return this.dataSource.filter(function (item) {
-                return item[_this.fields.value].toString() === value;
+                var fieldValue = _this.updateFieldValue(_this.fields.value, item);
+                return fieldValue === value;
             })[0];
         }
         else if (!isNOU(this.dataSource) && this.dataSource instanceof DataManager) {
@@ -1537,7 +1643,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var dataLists = e.result;
                 return dataLists.filter(function (item) {
-                    return item[_this.fields.value].toString() === value;
+                    var fieldValue = _this.updateFieldValue(_this.fields.value, item);
+                    return fieldValue === value;
                 })[0];
             });
         }
@@ -1689,9 +1796,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                     }
                     break;
                 case 'dataSource':
-                    if (this.gridObj) {
-                        this.gridObj.dataSource = newProp.dataSource;
-                    }
+                    this.updateDynamicDataSource(newProp.dataSource, oldProp.dataSource);
                     break;
                 case 'query':
                     if (this.gridObj) {