[DataGrid] Fix header filters showing clear button while empty (#15829)

Co-authored-by: Armin Mehinovic <[email protected]>

Author: k-rajat19

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 `<GridOverlays />` 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

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx

@@ -165,17 +165,6 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
       ? (currentOperator.InputComponent ?? defaultInputComponents[colDef.type as GridColType])
       : null;
 
-  const applyFilterChanges = React.useCallback(
-    (updatedItem: GridFilterItem) => {
-      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<HTMLDivElement, GridHeaderFilterCellProp
             apiRef={apiRef}
             item={item}
             inputRef={inputRef}
-            applyValue={applyFilterChanges}
+            applyValue={apiRef.current.upsertFilterItem}
             onFocus={() => apiRef.current.startHeaderFilterEditMode(colDef.field)}
             onBlur={(event: React.FocusEvent) => {
               apiRef.current.stopHeaderFilterEditMode();
@@ -387,7 +376,7 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
             item={item}
             field={colDef.field}
             disabled={isFilterReadOnly}
-            applyFilterChanges={applyFilterChanges}
+            applyFilterChanges={apiRef.current.upsertFilterItem}
             headerFilterMenuRef={headerFilterMenuRef}
             buttonRef={buttonRef}
           />

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 |

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<string>(item.value ?? '');
+  const [filterValueState, setFilterValueState] = React.useState<string | number | undefined>(
+    sanitizeFilterItemValue(item.value, type),
+  );
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
   const rootProps = useGridRootProps();
 
   const onFilterChange = React.useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
-      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 (
     <rootProps.slots.baseTextField
       id={id}
       label={apiRef.current.getLocaleText('filterPanelInputLabel')}
       placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
-      value={filterValueState}
+      value={filterValueState === undefined ? '' : String(filterValueState)}
       onChange={onFilterChange}
       variant={variant}
       type={type || 'text'}
@@ -103,6 +106,16 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
   );
 }
 
+function sanitizeFilterItemValue(value: any, type: GridTypeFilterInputValueProps['type']) {
+  if (value == null || value === '') {
+    return undefined;
+  }
+  if (type === 'number') {
+    return Number(value);
+  }
+  return String(value);
+}
+
 GridFilterInputValue.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

packages/x-data-grid/src/components/panel/filterPanel/index.ts

@@ -2,7 +2,8 @@ export * from './GridFilterForm';
 export * from './GridFilterInputValue';
 export * from './GridFilterInputDate';
 export * from './GridFilterInputSingleSelect';
-export * from './GridFilterInputBoolean';
+export { GridFilterInputBoolean } from './GridFilterInputBoolean';
+export type { GridFilterInputBooleanProps } from './GridFilterInputBoolean';
 export * from './GridFilterInputValueProps';
 export { GridFilterPanel } from './GridFilterPanel';
 export type { GetColumnForNewFilterArgs } from './GridFilterPanel';

scripts/x-data-grid-premium.exports.json

@@ -663,7 +663,6 @@
   { "name": "renderEditSingleSelectCell", "kind": "Variable" },
   { "name": "renderRowReorderCell", "kind": "Variable" },
   { "name": "RowPropsOverrides", "kind": "Interface" },
-  { "name": "sanitizeFilterItemValue", "kind": "Variable" },
   { "name": "selectedGridRowsCountSelector", "kind": "Variable" },
   { "name": "selectedGridRowsSelector", "kind": "Variable" },
   { "name": "selectedIdsLookupSelector", "kind": "Variable" },

scripts/x-data-grid-pro.exports.json

@@ -612,7 +612,6 @@
   { "name": "renderEditSingleSelectCell", "kind": "Variable" },
   { "name": "renderRowReorderCell", "kind": "Variable" },
   { "name": "RowPropsOverrides", "kind": "Interface" },
-  { "name": "sanitizeFilterItemValue", "kind": "Variable" },
   { "name": "selectedGridRowsCountSelector", "kind": "Variable" },
   { "name": "selectedGridRowsSelector", "kind": "Variable" },
   { "name": "selectedIdsLookupSelector", "kind": "Variable" },

scripts/x-data-grid.exports.json

@@ -560,7 +560,6 @@
   { "name": "renderEditInputCell", "kind": "Variable" },
   { "name": "renderEditSingleSelectCell", "kind": "Variable" },
   { "name": "RowPropsOverrides", "kind": "Interface" },
-  { "name": "sanitizeFilterItemValue", "kind": "Variable" },
   { "name": "selectedGridRowsCountSelector", "kind": "Variable" },
   { "name": "selectedGridRowsSelector", "kind": "Variable" },
   { "name": "selectedIdsLookupSelector", "kind": "Variable" },