diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
index 0ab2d97e6e86a..a16848e577412 100644
--- a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
+++ b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
@@ -52,6 +52,7 @@ Below are described the steps you need to make to migrate from v7 to v8.
- The `rowPositionsDebounceMs` prop was removed.
- The `apiRef.current.resize()` method was removed.
- The `` component is not exported anymore.
+- The `sanitizeFilterItemValue()` utility is not exported anymore.
- `gridRowsDataRowIdToIdLookupSelector` was removed. Use `gridRowsLookupSelector` in combination with `getRowId()` API method instead.
```diff
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
index 6edafa1c1eb66..1d40414b972ec 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -165,17 +165,6 @@ const GridHeaderFilterCell = forwardRef {
- if (item.value && updatedItem.value === undefined) {
- apiRef.current.deleteFilterItem(updatedItem);
- return;
- }
- apiRef.current.upsertFilterItem(updatedItem);
- },
- [apiRef, item],
- );
-
const clearFilterItem = React.useCallback(() => {
apiRef.current.deleteFilterItem(item);
}, [apiRef, item]);
@@ -346,7 +335,7 @@ const GridHeaderFilterCell = forwardRef apiRef.current.startHeaderFilterEditMode(colDef.field)}
onBlur={(event: React.FocusEvent) => {
apiRef.current.stopHeaderFilterEditMode();
@@ -387,7 +376,7 @@ const GridHeaderFilterCell = forwardRef
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 c0f6ae6818ddf..8766f6825039f 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
@@ -16,16 +16,6 @@ export type GridFilterInputBooleanProps = GridFilterInputValueProps &
isFilterActive?: boolean;
};
-export const sanitizeFilterItemValue = (value: any): boolean | undefined => {
- if (String(value).toLowerCase() === 'true') {
- return true;
- }
- if (String(value).toLowerCase() === 'false') {
- return false;
- }
- return undefined;
-};
-
const BooleanOperatorContainer = styled('div')({
display: 'flex',
alignItems: 'center',
@@ -133,6 +123,16 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
);
}
+export function sanitizeFilterItemValue(value: any): boolean | undefined {
+ if (String(value).toLowerCase() === 'true') {
+ return true;
+ }
+ if (String(value).toLowerCase() === 'false') {
+ return false;
+ }
+ return undefined;
+}
+
GridFilterInputBoolean.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
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 4391eed4166d3..32d76d2516114 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
@@ -35,22 +35,25 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
variant = 'standard',
...others
} = props;
+
const filterTimeout = useTimeout();
- const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
+ const [filterValueState, setFilterValueState] = React.useState(
+ sanitizeFilterItemValue(item.value, type),
+ );
const [applying, setIsApplying] = React.useState(false);
const id = useId();
const rootProps = useGridRootProps();
const onFilterChange = React.useCallback(
(event: React.ChangeEvent) => {
- const { value } = event.target;
- setFilterValueState(String(value));
+ const value = sanitizeFilterItemValue(event.target.value, type);
+ setFilterValueState(value);
setIsApplying(true);
filterTimeout.start(rootProps.filterDebounceMs, () => {
const newItem = {
...item,
- value: type === 'number' ? Number(value) : value,
+ value,
fromInput: id!,
};
applyValue(newItem);
@@ -62,17 +65,17 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
React.useEffect(() => {
const itemPlusTag = item as ItemPlusTag;
- if (itemPlusTag.fromInput !== id || item.value === undefined) {
- setFilterValueState(String(item.value ?? ''));
+ if (itemPlusTag.fromInput !== id || item.value == null) {
+ setFilterValueState(sanitizeFilterItemValue(item.value, type));
}
- }, [id, item]);
+ }, [id, item, type]);
return (