[DataGrid] Fix value type in filter model for number and boolean colu…

…mn type (#14733)
mui · Oct 21, 2024 · f436fe0 · f436fe0
1 parent afdf04e
commit f436fe0
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
@@ -54,7 +54,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const value = event.target.value;
       setFilterValueState(value);
-      applyValue({ ...item, value });
+      applyValue({ ...item, value: Boolean(value) });
     },
     [applyValue, item],
   );

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
@@ -47,9 +47,17 @@ function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps)
   >(
     (event, value) => {
       setFilterValueState(value.map(String));
-      applyValue({ ...item, value: [...value] });
+
+      applyValue({
+        ...item,
+        value: [
+          ...value.map((filterItemValue) =>
+            type === 'number' ? Number(filterItemValue) : filterItemValue,
+          ),
+        ],
+      });
     },
-    [applyValue, item],
+    [applyValue, item, type],
   );
 
   return (

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
@@ -48,12 +48,16 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
 
       setIsApplying(true);
       filterTimeout.start(rootProps.filterDebounceMs, () => {
-        const newItem = { ...item, value, fromInput: id! };
+        const newItem = {
+          ...item,
+          value: type === 'number' ? Number(value) : value,
+          fromInput: id!,
+        };
         applyValue(newItem);
         setIsApplying(false);
       });
     },
-    [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout],
+    [filterTimeout, rootProps.filterDebounceMs, item, type, id, applyValue],
   );
 
   React.useEffect(() => {