fix(mui): add support for unique id to transformCrudFiltersToFilterModel (#6756)

Author: arndom

.changeset/rare-teachers-drive.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/mui": patch
+---
+
+Add support for unique id to `transformCrudFiltersToFilterModel` when filters have the same field and operator.
+
+[Resolves #6710](https://github.com/refinedev/refine/issues/6710)

packages/mui/src/definitions/dataGrid/index.spec.ts

@@ -437,4 +437,50 @@ describe("transformCrudFiltersToFilterModel", () => {
       logicOperator: "and",
     });
   });
+
+  it("Should have unique IDs for filters with the same field and operator", () => {
+    const crudFilters: CrudFilters = [
+      {
+        operator: "or",
+        value: [
+          {
+            field: "status",
+            operator: "eq",
+            value: "draft",
+          },
+          {
+            field: "status",
+            operator: "eq",
+            value: "published",
+          },
+        ],
+      },
+    ];
+
+    const columnsLookup = {
+      status: "string",
+    };
+
+    const filterModel: GridFilterModel = {
+      items: [
+        {
+          field: "status",
+          operator: "equals",
+          value: "draft",
+          id: "statuseq",
+        },
+        {
+          field: "status",
+          operator: "equals",
+          value: "published",
+          id: "statuseq2",
+        },
+      ],
+      logicOperator: GridLogicOperator.Or,
+    };
+
+    expect(
+      transformCrudFiltersToFilterModel(crudFilters, columnsLookup),
+    ).toEqual(filterModel);
+  });
 });

packages/mui/src/definitions/dataGrid/index.ts

@@ -184,6 +184,7 @@ export const transformCrudFiltersToFilterModel = (
   columnsType?: Record<string, string>,
 ): GridFilterModel | undefined => {
   const gridFilterItems: GridFilterItem[] = [];
+  const fieldOperatorCount: Record<string, number> = {};
 
   const isExistOrFilter = crudFilters.some(
     (filter) => filter.operator === "or",
@@ -197,23 +198,31 @@ export const transformCrudFiltersToFilterModel = (
 
       orLogicalFilters.map(({ field, value, operator }) => {
         const columnType = columnsType[field];
+        const id = field + operator;
+
+        fieldOperatorCount[id] = (fieldOperatorCount[id] || 0) + 1;
+        const uniqueId = id + String(fieldOperatorCount[id]);
 
         gridFilterItems.push({
           field: field,
           operator: transformCrudOperatorToMuiOperator(operator, columnType),
           value: value === "" ? undefined : value,
-          id: field + operator,
+          id: fieldOperatorCount[id] > 1 ? uniqueId : id,
         });
       });
     } else {
       (crudFilters as LogicalFilter[]).map(({ field, value, operator }) => {
         const columnType = columnsType[field];
+        const id = field + operator;
+
+        fieldOperatorCount[id] = (fieldOperatorCount[id] || 0) + 1;
+        const uniqueId = id + String(fieldOperatorCount[id]);
 
         gridFilterItems.push({
           field: field,
           operator: transformCrudOperatorToMuiOperator(operator, columnType),
           value: value === "" ? undefined : value,
-          id: field + operator,
+          id: fieldOperatorCount[id] > 1 ? uniqueId : id,
         });
       });
     }