@syncfusion/ej2-multicolumn-combobox 32.2.3 → 33.1.46

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.2.3
+*  version : 33.1.46
 *  Copyright Syncfusion Inc. 2001 - 2025. 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,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-multicolumn-combobox",
-  "version": "32.2.3",
+  "version": "33.1.46",
   "description": "Essential JS 2 Component",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -9,8 +9,8 @@
   "es2015": "./dist/es6/ej2-multicolumn-combobox.es5.js",
   "typings": "index.d.ts",
   "dependencies": {
-    "@syncfusion/ej2-base": "~32.2.3",
-    "@syncfusion/ej2-grids": "~32.2.3"
+    "@syncfusion/ej2-base": "~33.1.45",
+    "@syncfusion/ej2-grids": "~33.1.46"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -792,6 +792,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
     private customFilterQuery;
     private typedString;
     private liveRegion;
+    private isClearing;
     /**
      * *Constructor for creating the component
      *

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

@@ -272,6 +272,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         var _this = _super.call(this, options, element) || this;
         _this.gridInject = new MultiColumnGrid();
         _this.isShowSpinner = true;
+        _this.isClearing = false;
         _this.gridInject.InjectModules();
         return _this;
     }
@@ -863,6 +864,10 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     };
     MultiColumnComboBox.prototype.initValue = function (isRerender, isValue, isInitial) {
         var _this = this;
+        // Prevent re-entry during null value clearing
+        if (this.isClearing) {
+            return;
+        }
         var prevItemData = this.gridObj.getSelectedRecords()[0];
         var prevItemEle = this.gridObj.getSelectedRows()[0];
         var item;
@@ -873,6 +878,21 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         this.isProtectedOnChange = true;
         this.value = this.value ? this.value.toString() : this.value;
         this.isProtectedOnChange = prevOnChange;
+        // Handle explicit null value assignment
+        if (isRerender && isValue && isNOU(this.value)) {
+            this.isClearing = true;
+            // Clear all state when value is explicitly set to null
+            var prevOnChangeProtect = this.isProtectedOnChange;
+            this.isProtectedOnChange = true;
+            Input.setValue('', this.inputEle, this.floatLabelType, this.showClearButton);
+            this.setHiddenValue(); // Clears hidden element when value is null
+            this.gridObj.clearSelection();
+            this.text = null;
+            this.index = null;
+            this.isProtectedOnChange = prevOnChangeProtect;
+            this.isClearing = false;
+            return;
+        }
         var updateValues = function (dataList) {
             var result = _this.updateCurrentValues(item, dataList);
             currentValue = result.currentValue;

package/styles/bds-lite.css

@@ -122,11 +122,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */

package/styles/bds.css

@@ -122,11 +122,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */

package/styles/bootstrap-dark-lite.css

@@ -1,9 +1,11 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 10px 0 0;
+  -webkit-padding-end: 10px;
+          padding-inline-end: 10px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-popup.e-ddl {

package/styles/bootstrap-dark.css

@@ -1,9 +1,11 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 10px 0 0;
+  -webkit-padding-end: 10px;
+          padding-inline-end: 10px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-popup.e-ddl {

package/styles/bootstrap-lite.css

@@ -1,9 +1,11 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 10px 0 0;
+  -webkit-padding-end: 10px;
+          padding-inline-end: 10px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-popup.e-ddl {

package/styles/bootstrap.css

@@ -1,9 +1,11 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 10px 0 0;
+  -webkit-padding-end: 10px;
+          padding-inline-end: 10px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-popup.e-ddl {

package/styles/bootstrap4-lite.css

@@ -1,9 +1,11 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-input-group.e-ddl .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle,

package/styles/bootstrap4.css

@@ -1,9 +1,11 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-input-group.e-ddl .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle,

package/styles/bootstrap5-dark-lite.css

@@ -11,11 +11,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 6px 0 0;
+  -webkit-padding-end: 6px;
+          padding-inline-end: 6px;
 }
 
 .e-popup.e-ddl {

package/styles/bootstrap5-dark.css

@@ -11,11 +11,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 6px 0 0;
+  -webkit-padding-end: 6px;
+          padding-inline-end: 6px;
 }
 
 .e-popup.e-ddl {

package/styles/bootstrap5-lite.css

@@ -11,11 +11,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 6px 0 0;
+  -webkit-padding-end: 6px;
+          padding-inline-end: 6px;
 }
 
 .e-popup.e-ddl {

package/styles/bootstrap5.3-lite.css

@@ -95,11 +95,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 6px 0 0;
+  -webkit-padding-end: 6px;
+          padding-inline-end: 6px;
 }
 
 .e-popup.e-ddl {

package/styles/bootstrap5.3.css

@@ -95,11 +95,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 6px 0 0;
+  -webkit-padding-end: 6px;
+          padding-inline-end: 6px;
 }
 
 .e-popup.e-ddl {

package/styles/bootstrap5.css

@@ -11,11 +11,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 6px 0 0;
+  -webkit-padding-end: 6px;
+          padding-inline-end: 6px;
 }
 
 .e-popup.e-ddl {

package/styles/fabric-dark-lite.css

@@ -1,9 +1,11 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 10px 0 0;
+  -webkit-padding-end: 10px;
+          padding-inline-end: 10px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-ddl.e-popup {

package/styles/fabric-dark.css

@@ -1,9 +1,11 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 10px 0 0;
+  -webkit-padding-end: 10px;
+          padding-inline-end: 10px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-ddl.e-popup {

package/styles/fabric-lite.css

@@ -1,9 +1,11 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 10px 0 0;
+  -webkit-padding-end: 10px;
+          padding-inline-end: 10px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-ddl.e-popup {

package/styles/fabric.css

@@ -1,9 +1,11 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 10px 0 0;
+  -webkit-padding-end: 10px;
+          padding-inline-end: 10px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-ddl.e-popup {

package/styles/fluent-dark-lite.css

@@ -11,11 +11,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-popup.e-ddl {

package/styles/fluent-dark.css

@@ -11,11 +11,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-popup.e-ddl {

package/styles/fluent-lite.css

@@ -11,11 +11,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-popup.e-ddl {

package/styles/fluent.css

@@ -11,11 +11,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-popup.e-ddl {

package/styles/fluent2-lite.css

@@ -103,11 +103,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */

package/styles/fluent2.css

@@ -103,11 +103,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */

package/styles/highcontrast-light-lite.css

@@ -1,5 +1,6 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 10px 0 0;
+  -webkit-padding-end: 10px;
+          padding-inline-end: 10px;
 }
 .e-dropdownbase .e-list-item:not(.e-active).e-hover {
   border: 2px solid #000;
@@ -15,7 +16,8 @@
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-popup.e-ddl .e-dropdownbase {

package/styles/highcontrast-light.css

@@ -1,5 +1,6 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 10px 0 0;
+  -webkit-padding-end: 10px;
+          padding-inline-end: 10px;
 }
 .e-dropdownbase .e-list-item:not(.e-active).e-hover {
   border: 2px solid #000;
@@ -15,7 +16,8 @@
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-popup.e-ddl .e-dropdownbase {

package/styles/highcontrast-lite.css

@@ -1,5 +1,6 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 10px 0 0;
+  -webkit-padding-end: 10px;
+          padding-inline-end: 10px;
 }
 .e-dropdownbase .e-list-item:not(.e-active).e-hover {
   border: 2px solid #fff;
@@ -15,7 +16,8 @@
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-popup.e-ddl .e-dropdownbase {

package/styles/highcontrast.css

@@ -1,5 +1,6 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 10px 0 0;
+  -webkit-padding-end: 10px;
+          padding-inline-end: 10px;
 }
 .e-dropdownbase .e-list-item:not(.e-active).e-hover {
   border: 2px solid #fff;
@@ -15,7 +16,8 @@
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-popup.e-ddl .e-dropdownbase {

package/styles/material-dark-lite.css

@@ -1,9 +1,11 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 16px 0 0;
+  -webkit-padding-end: 16px;
+          padding-inline-end: 16px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 12px 0 0;
+  -webkit-padding-end: 12px;
+          padding-inline-end: 12px;
 }
 
 .e-ddl.e-control-wrapper .e-ddl-icon::before {

package/styles/material-dark.css

@@ -1,9 +1,11 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 16px 0 0;
+  -webkit-padding-end: 16px;
+          padding-inline-end: 16px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 12px 0 0;
+  -webkit-padding-end: 12px;
+          padding-inline-end: 12px;
 }
 
 .e-ddl.e-control-wrapper .e-ddl-icon::before {

package/styles/material-lite.css

@@ -1,9 +1,11 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 16px 0 0;
+  -webkit-padding-end: 16px;
+          padding-inline-end: 16px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 12px 0 0;
+  -webkit-padding-end: 12px;
+          padding-inline-end: 12px;
 }
 
 .e-ddl.e-control-wrapper .e-ddl-icon::before {

package/styles/material.css

@@ -1,9 +1,11 @@
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 16px 0 0;
+  -webkit-padding-end: 16px;
+          padding-inline-end: 16px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 12px 0 0;
+  -webkit-padding-end: 12px;
+          padding-inline-end: 12px;
 }
 
 .e-ddl.e-control-wrapper .e-ddl-icon::before {

package/styles/material3-dark-lite.css

@@ -81,11 +81,13 @@
 /* 15px */
 /* 16px */
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 16px 0 0;
+  -webkit-padding-end: 16px;
+          padding-inline-end: 16px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 12px 0 0;
+  -webkit-padding-end: 12px;
+          padding-inline-end: 12px;
 }
 
 .e-ddl.e-control-wrapper .e-ddl-icon::before {
@@ -631,7 +633,6 @@
 .e-popup.e-multicolumn-list .e-nodata {
   color: var(--color-sf-on-surface-variant);
   border: 1px solid linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-popup.e-multicolumn-list .e-multicolumn-grid .e-rowcell {
@@ -658,7 +659,6 @@
   background: transparent;
 }
 .e-popup.e-multicolumn-list .e-altrow {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
 }
 .e-popup.e-multicolumn-list .e-grid .e-headercell {

package/styles/material3-dark.css

@@ -81,11 +81,13 @@
 /* 15px */
 /* 16px */
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 16px 0 0;
+  -webkit-padding-end: 16px;
+          padding-inline-end: 16px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 12px 0 0;
+  -webkit-padding-end: 12px;
+          padding-inline-end: 12px;
 }
 
 .e-ddl.e-control-wrapper .e-ddl-icon::before {
@@ -631,7 +633,6 @@
 .e-popup.e-multicolumn-list .e-nodata {
   color: var(--color-sf-on-surface-variant);
   border: 1px solid linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-popup.e-multicolumn-list .e-multicolumn-grid .e-rowcell {
@@ -658,7 +659,6 @@
   background: transparent;
 }
 .e-popup.e-multicolumn-list .e-altrow {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
 }
 .e-popup.e-multicolumn-list .e-grid .e-headercell {