@syncfusion/ej2-multicolumn-combobox 28.2.7 → 28.2.9

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 28.2.7
+*  version : 28.2.9
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-multicolumn-combobox@*",
-  "_id": "@syncfusion/ej2-multicolumn-combobox@28.2.3",
+  "_id": "@syncfusion/ej2-multicolumn-combobox@28.2.7",
   "_inBundle": false,
-  "_integrity": "sha512-3PnmBMbBtRPL2/OPlcoDMJuOMq7gDbGUKAsvj5mUBZ4bq7d5FVyf2ZlwLoqNTFuoMh0A7fZlGi5Ui2EhPZ/5lA==",
+  "_integrity": "sha512-fKivE3ta9NK4gf9NXhuoxXHbZLWjS3bO4w/NVliiIXtJlTYpvunyp6JgK6TY9Yp9A0QtTrQn9T/9+Gx83IZHXw==",
   "_location": "/@syncfusion/ej2-multicolumn-combobox",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-multicolumn-combobox",
     "/@syncfusion/ej2-vue-multicolumn-combobox"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-multicolumn-combobox/-/ej2-multicolumn-combobox-28.2.3.tgz",
-  "_shasum": "553b0a69101b525c89ca4b2b516fc3e131af8d0a",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-multicolumn-combobox/-/ej2-multicolumn-combobox-28.2.7.tgz",
+  "_shasum": "db04940028f8456784b85f914aabd5fb68a527ea",
   "_spec": "@syncfusion/ej2-multicolumn-combobox@*",
   "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
@@ -35,8 +35,8 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~28.2.5",
-    "@syncfusion/ej2-grids": "~28.2.7"
+    "@syncfusion/ej2-base": "~28.2.9",
+    "@syncfusion/ej2-grids": "~28.2.9"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -57,6 +57,6 @@
     "url": "git+https://github.com/syncfusion/ej2-multicolumn-combobox-component.git"
   },
   "typings": "index.d.ts",
-  "version": "28.2.7",
+  "version": "28.2.9",
   "sideEffects": false
 }

package/src/multicolumn-combobox/multi-column-combo-box.d.ts

@@ -780,6 +780,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
     private isInitialRender;
     private remoteDataLength;
     private selectedRowIndex;
+    private hiddenElement;
     /**
      * *Constructor for creating the component
      *
@@ -812,6 +813,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
     protected getPersistData(): string;
     private persistData;
     protected render(): void;
+    private setHiddenValue;
     private renderGrid;
     private handleActionComplete;
     private handleKeyPressed;

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

@@ -66,6 +66,7 @@ var NODATA = 'e-nodata';
 var DISABLED = 'e-disabled';
 var INPUTFOCUS = 'e-input-focus';
 var MULTICOLUMNLIST = 'e-multicolumn-list';
+var HIDDENELEMENT = 'e-multicolumn-list-hidden';
 var MULTICOLUMNGRID = 'e-multicolumn-grid';
 var MultiColumnGrid = /** @class */ (function () {
     function MultiColumnGrid() {
@@ -337,6 +338,24 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         this.renderPopup();
         this.wireEvents();
     };
+    MultiColumnComboBox.prototype.setHiddenValue = function () {
+        if (isNOU(this.value)) {
+            this.hiddenElement.innerHTML = '';
+            return;
+        }
+        var existingOption = this.hiddenElement.querySelector('option');
+        if (!isNOU(existingOption)) {
+            existingOption.textContent = this.text;
+            existingOption.setAttribute('value', this.value.toString());
+        }
+        else if (!isNOU(this.hiddenElement)) {
+            var newOption = document.createElement('option');
+            newOption.text = this.text;
+            newOption.setAttribute('value', this.value.toString());
+            newOption.setAttribute('selected', '');
+            this.hiddenElement.appendChild(newOption);
+        }
+    };
     MultiColumnComboBox.prototype.renderGrid = function () {
         var _this = this;
         var gridColumns = this.getGridColumns();
@@ -393,10 +412,23 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         this.gridObj.appendTo(this.gridEle);
     };
     MultiColumnComboBox.prototype.handleActionComplete = function (args) {
+        var _this = this;
         this.trigger('actionComplete', args);
         if (args.requestType === 'sorting') {
             this.updateRowSelection(args);
         }
+        if (Array.isArray(args.rows) && this.isDataFiltered) {
+            var rows = args.rows;
+            var rowHeight_1 = 0;
+            rows.forEach(function (row) {
+                var rowElement = _this.gridObj.getRowElementByUID(row.uid);
+                if (rowElement) {
+                    rowHeight_1 += rowElement.getBoundingClientRect().height;
+                }
+            });
+            this.popupRowHeight = rowHeight_1 || parseFloat(this.popupHeight);
+            this.updateGridHeight(true, true);
+        }
         this.popupObj.refreshPosition();
         this.gridObj.element.querySelector('.e-content').scrollTop = 0;
     };
@@ -590,6 +622,20 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         this.inputWrapper = this.inputObj.container;
         this.inputWrapper.classList.add(MULTICOLUMNLIST);
         this.inputWrapper.setAttribute('spellcheck', 'false');
+        this.hiddenElement = this.createElement('select', {
+            attrs: {
+                'aria-hidden': 'true',
+                'tabindex': '-1',
+                'class': HIDDENELEMENT
+            }
+        });
+        prepend([this.hiddenElement], this.inputWrapper);
+        var name = this.inputEle.getAttribute('name') ? this.inputEle.getAttribute('name') : this.inputEle.getAttribute('id');
+        this.hiddenElement.setAttribute('name', name);
+        this.inputEle.removeAttribute('name');
+        if (!this.hiddenElement.hasAttribute('aria-label')) {
+            this.hiddenElement.setAttribute('aria-label', this.getModuleName());
+        }
         if (this.element.tagName === this.getDirective()) {
             this.element.appendChild(this.inputWrapper);
         }
@@ -633,7 +679,11 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                         break;
                     default: {
                         var defaultAttr = ['title', 'id', 'placeholder', 'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
-                        if (defaultAttr.indexOf(htmlAttr) > -1) {
+                        var validateAttr = ['name', 'required'];
+                        if (validateAttr.indexOf(htmlAttr) > -1 || htmlAttr.indexOf('data') === 0) {
+                            this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
+                        }
+                        else if (defaultAttr.indexOf(htmlAttr) > -1) {
                             if (htmlAttr === 'placeholder') {
                                 Input.setPlaceholder(htmlAttributes[htmlAttr], inputEle);
                             }
@@ -808,7 +858,6 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         var popupHeight = this.getSize(false);
         this.popupEle.style.maxHeight = popupHeight;
         if (this.footerTemplate) {
-            this.footer = this.footer ? this.footer : this.popupEle.querySelector('.e-popup-footer');
             var height = Math.round(this.footer.getBoundingClientRect().height);
             popupHeight = formatUnit(parseInt(popupHeight, 10) - height + 'px');
         }
@@ -817,16 +866,15 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         this.popupEle.style.visibility = 'hidden';
         this.isInitialRender = true;
     };
-    MultiColumnComboBox.prototype.updateGridHeight = function (isFilter, autoHeight, dataSourceCount) {
+    MultiColumnComboBox.prototype.updateGridHeight = function (isFilter, autoHeight) {
         var height;
         if (isFilter) {
             var gridContentEle = this.gridObj.getContent().querySelector('.e-content');
             var scrollBarHeight = gridContentEle.offsetHeight - gridContentEle.clientHeight;
-            var totalRowHeight = dataSourceCount * this.popupRowHeight;
             if (this.fields.groupBy !== '' && !isNOU(this.fields.groupBy)) {
-                totalRowHeight += this.popupRowHeight;
+                this.popupRowHeight += this.popupRowHeight;
             }
-            height = autoHeight ? (totalRowHeight < this.prevGridHeight ? (totalRowHeight + scrollBarHeight) + 'px' : this.prevGridHeight + 'px') : this.prevGridHeight + 'px';
+            height = autoHeight ? (this.popupRowHeight < this.prevGridHeight ? (this.popupRowHeight + scrollBarHeight) + 'px' : this.prevGridHeight + 'px') : this.prevGridHeight + 'px';
         }
         else {
             this.prevGridHeight = this.popupDiv.getBoundingClientRect().height - this.popupDiv.querySelector('.e-gridheader').getBoundingClientRect().height;
@@ -983,6 +1031,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                     _this.updateValues(selectedRecords ? dataValue : '', selectedRecords ? dataText : '', _this.gridObj.selectedRowIndex, ChangeEventArgs);
                 }
                 Input.setValue(selectedRecords ? dataText : '', _this.inputEle, _this.floatLabelType, _this.showClearButton);
+                _this.setHiddenValue();
                 if (!isKeyNav || (isKeyNav && isUpdateVal)) {
                     _this.hidePopup(e);
                 }
@@ -997,6 +1046,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         this.value = value || this.value;
         this.index = this.selectedRowIndex = !isNOU(index) ? index : this.index;
         this.isProtectedOnChange = prevOnChange;
+        this.setHiddenValue();
         if (!isInitial) {
             this.triggerChangeEvent(eventArgs);
         }
@@ -1126,7 +1176,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             var dataLists = e.result;
             var dataLength = dataLists.length;
             filteredData = dataLists.filter(function (item) { return _this.filterData(item, filterType, inputValue, fields); });
-            _this.updateGridDataSource(filteredData, dataLength);
+            _this.updateGridDataSource(filteredData);
         });
     };
     MultiColumnComboBox.prototype.filterData = function (item, filterType, inputValue, fields) {
@@ -1143,12 +1193,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 return false;
         }
     };
-    MultiColumnComboBox.prototype.updateGridDataSource = function (dataSource, dataLength) {
-        var autoHeight = true;
+    MultiColumnComboBox.prototype.updateGridDataSource = function (dataSource) {
         if (dataSource.length > 0) {
-            var length_1 = this.dataSource instanceof DataManager ? dataLength
-                : this.dataSource.length;
-            autoHeight = length_1 !== dataSource.length;
             removeClass([this.popupDiv], [NODATA]);
             var noRecordEle = this.popupDiv.querySelector('.e-no-records');
             if (noRecordEle) {
@@ -1161,7 +1207,6 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             this.l10nUpdate();
             addClass([this.popupDiv], [NODATA]);
         }
-        this.updateGridHeight(true, autoHeight, dataSource.length);
     };
     MultiColumnComboBox.prototype.wireEvents = function () {
         if (!isNOU(this.inputObj.buttons[0])) {
@@ -1681,6 +1726,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         this.popupEle = null;
         this.footer = null;
         this.noRecord = null;
+        this.hiddenElement = null;
         _super.prototype.destroy.call(this);
     };
     /**

package/styles/bds-lite.css

@@ -255,6 +255,14 @@
   border-radius: 0 0 4px 4px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 0;
   border-radius: 4px;

package/styles/bds.css

@@ -255,6 +255,14 @@
   border-radius: 0 0 4px 4px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 0;
   border-radius: 4px;

package/styles/bootstrap-dark-lite.css

@@ -109,6 +109,14 @@
   border-radius: 0 0 4px 4px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 4px;

package/styles/bootstrap-dark.css

@@ -109,6 +109,14 @@
   border-radius: 0 0 4px 4px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 4px;

package/styles/bootstrap-lite.css

@@ -109,6 +109,14 @@
   border-radius: 0 0 4px 4px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 0;
   border-radius: 4px;

package/styles/bootstrap.css

@@ -109,6 +109,14 @@
   border-radius: 0 0 4px 4px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 0;
   border-radius: 4px;

package/styles/bootstrap4-lite.css

@@ -151,6 +151,14 @@
   border-radius: 0 0 2px 2px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 0;
   border-radius: 2px;

package/styles/bootstrap4.css

@@ -151,6 +151,14 @@
   border-radius: 0 0 2px 2px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 0;
   border-radius: 2px;

package/styles/bootstrap5-dark-lite.css

@@ -159,6 +159,14 @@
   border-radius: 0 0 2px 2px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 2px;

package/styles/bootstrap5-dark.css

@@ -159,6 +159,14 @@
   border-radius: 0 0 2px 2px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 2px;

package/styles/bootstrap5-lite.css

@@ -159,6 +159,14 @@
   border-radius: 0 0 2px 2px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 2px;

package/styles/bootstrap5.3-lite.css

@@ -163,6 +163,14 @@
   border-radius: 0 0 4px 4px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 4px;

package/styles/bootstrap5.3.css

@@ -163,6 +163,14 @@
   border-radius: 0 0 4px 4px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 4px;

package/styles/bootstrap5.css

@@ -159,6 +159,14 @@
   border-radius: 0 0 2px 2px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 2px;

package/styles/fabric-dark-lite.css

@@ -85,6 +85,14 @@
   border-radius: 0 0 0 0;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 0;
   border-radius: 0;

package/styles/fabric-dark.css

@@ -85,6 +85,14 @@
   border-radius: 0 0 0 0;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 0;
   border-radius: 0;

package/styles/fabric-lite.css

@@ -85,6 +85,14 @@
   border-radius: 0 0 0 0;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 0;

package/styles/fabric.css

@@ -85,6 +85,14 @@
   border-radius: 0 0 0 0;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 0;

package/styles/fluent-dark-lite.css

@@ -152,6 +152,14 @@
   border-radius: 0 0 2px 2px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 2px;

package/styles/fluent-dark.css

@@ -152,6 +152,14 @@
   border-radius: 0 0 2px 2px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 2px;

package/styles/fluent-lite.css

@@ -152,6 +152,14 @@
   border-radius: 0 0 2px 2px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 2px;

package/styles/fluent.css

@@ -152,6 +152,14 @@
   border-radius: 0 0 2px 2px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 2px;

package/styles/fluent2-lite.css

@@ -156,6 +156,14 @@
   border-radius: 0 0 4px 4px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 4px;

package/styles/fluent2.css

@@ -156,6 +156,14 @@
   border-radius: 0 0 4px 4px;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 4px;

package/styles/highcontrast-light-lite.css

@@ -106,6 +106,14 @@
   border-radius: 0 0 0 0;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 0;

package/styles/highcontrast-light.css

@@ -106,6 +106,14 @@
   border-radius: 0 0 0 0;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 0;

package/styles/highcontrast-lite.css

@@ -110,6 +110,14 @@
   border-radius: 0 0 0 0;
 }
 
+.e-multicolumn-list .e-multicolumn-list-hidden {
+  border: 0;
+  height: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+}
+
 .e-multicolumn-grid.e-grid {
   border-width: 1px;
   border-radius: 0;