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 (