@syncfusion/ej2-multicolumn-combobox 28.2.6 → 28.2.9

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

@@ -1,4 +1,4 @@
-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 { ChildProperty, Property, Event, Component, getUniqueID, isNullOrUndefined, addClass, removeClass, prepend, formatUnit, getValue, attributes, 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';
@@ -25,6 +25,7 @@ const NODATA = 'e-nodata';
 const DISABLED = 'e-disabled';
 const INPUTFOCUS = 'e-input-focus';
 const MULTICOLUMNLIST = 'e-multicolumn-list';
+const HIDDENELEMENT = 'e-multicolumn-list-hidden';
 const MULTICOLUMNGRID = 'e-multicolumn-grid';
 class MultiColumnGrid {
     /**
@@ -272,6 +273,24 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         this.renderPopup();
         this.wireEvents();
     }
+    setHiddenValue() {
+        if (isNullOrUndefined(this.value)) {
+            this.hiddenElement.innerHTML = '';
+            return;
+        }
+        const existingOption = this.hiddenElement.querySelector('option');
+        if (!isNullOrUndefined(existingOption)) {
+            existingOption.textContent = this.text;
+            existingOption.setAttribute('value', this.value.toString());
+        }
+        else if (!isNullOrUndefined(this.hiddenElement)) {
+            const newOption = document.createElement('option');
+            newOption.text = this.text;
+            newOption.setAttribute('value', this.value.toString());
+            newOption.setAttribute('selected', '');
+            this.hiddenElement.appendChild(newOption);
+        }
+    }
     renderGrid() {
         const gridColumns = this.getGridColumns();
         const sortOrder = this.sortOrder.toString().toLowerCase();
@@ -331,6 +350,18 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         if (args.requestType === 'sorting') {
             this.updateRowSelection(args);
         }
+        if (Array.isArray(args.rows) && this.isDataFiltered) {
+            const rows = args.rows;
+            let rowHeight = 0;
+            rows.forEach((row) => {
+                const rowElement = this.gridObj.getRowElementByUID(row.uid);
+                if (rowElement) {
+                    rowHeight += rowElement.getBoundingClientRect().height;
+                }
+            });
+            this.popupRowHeight = rowHeight || parseFloat(this.popupHeight);
+            this.updateGridHeight(true, true);
+        }
         this.popupObj.refreshPosition();
         this.gridObj.element.querySelector('.e-content').scrollTop = 0;
     }
@@ -519,6 +550,20 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         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);
+        const 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);
         }
@@ -561,7 +606,11 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                         break;
                     default: {
                         const defaultAttr = ['title', 'id', 'placeholder', 'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
-                        if (defaultAttr.indexOf(htmlAttr) > -1) {
+                        const 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);
                             }
@@ -735,7 +784,6 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         let popupHeight = this.getSize(false);
         this.popupEle.style.maxHeight = popupHeight;
         if (this.footerTemplate) {
-            this.footer = this.footer ? this.footer : this.popupEle.querySelector('.e-popup-footer');
             const height = Math.round(this.footer.getBoundingClientRect().height);
             popupHeight = formatUnit(parseInt(popupHeight, 10) - height + 'px');
         }
@@ -744,16 +792,15 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         this.popupEle.style.visibility = 'hidden';
         this.isInitialRender = true;
     }
-    updateGridHeight(isFilter, autoHeight, dataSourceCount) {
+    updateGridHeight(isFilter, autoHeight) {
         let height;
         if (isFilter) {
             const gridContentEle = this.gridObj.getContent().querySelector('.e-content');
             const scrollBarHeight = gridContentEle.offsetHeight - gridContentEle.clientHeight;
-            let totalRowHeight = dataSourceCount * this.popupRowHeight;
             if (this.fields.groupBy !== '' && !isNullOrUndefined(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;
@@ -908,6 +955,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                     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);
                 }
@@ -922,6 +970,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         this.value = value || this.value;
         this.index = this.selectedRowIndex = !isNullOrUndefined(index) ? index : this.index;
         this.isProtectedOnChange = prevOnChange;
+        this.setHiddenValue();
         if (!isInitial) {
             this.triggerChangeEvent(eventArgs);
         }
@@ -1036,7 +1085,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             const dataLists = e.result;
             const dataLength = dataLists.length;
             filteredData = dataLists.filter((item) => this.filterData(item, filterType, inputValue, fields));
-            this.updateGridDataSource(filteredData, dataLength);
+            this.updateGridDataSource(filteredData);
         });
     }
     filterData(item, filterType, inputValue, fields) {
@@ -1053,12 +1102,8 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                 return false;
         }
     }
-    updateGridDataSource(dataSource, dataLength) {
-        let autoHeight = true;
+    updateGridDataSource(dataSource) {
         if (dataSource.length > 0) {
-            const length = this.dataSource instanceof DataManager ? dataLength
-                : this.dataSource.length;
-            autoHeight = length !== dataSource.length;
             removeClass([this.popupDiv], [NODATA]);
             const noRecordEle = this.popupDiv.querySelector('.e-no-records');
             if (noRecordEle) {
@@ -1071,7 +1116,6 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             this.l10nUpdate();
             addClass([this.popupDiv], [NODATA]);
         }
-        this.updateGridHeight(true, autoHeight, dataSource.length);
     }
     wireEvents() {
         if (!isNullOrUndefined(this.inputObj.buttons[0])) {
@@ -1584,6 +1628,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         this.popupEle = null;
         this.footer = null;
         this.noRecord = null;
+        this.hiddenElement = null;
         super.destroy();
     }
     /**