diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx index 89d0a2114e33..faf133512296 100644 --- 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) => { 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 index 9fc87274ac2b..50da622479b8 100644 --- 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 index a16cc1a850dd..4391eed4166d 100644 --- 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(() => {