[data grid] Header filters do not clear properly when losing focus

[TheOneTheOnlyJJ]

Steps to reproduce

Steps:

1. Open this link to the live example: https://mui.com/x/react-data-grid/demo/ - navigate to the "Header filters" demo
2. Start typing anything in a filter, then delete the text (I only tried using backspace). Even when all text is deleted, the "X" icon button at the end of the input field is still rendered.
3. Click away from the input field, inside or outside the Data Grid, so it loses focus. Notice how the input field label moves back to its initial position, but the "X" icon button is still there, displaying over the input field label.

Current behavior

I snipped this image from the MUI X Data Grid Demo linked above. The "X" icon button is rendered above the input field label.

If you follow the steps above, the result is visible.

Expected behavior

I expect the "X" icon button to either not show when the input value is empty, or at least get hidden when the input field loses focus. or to be

Context

I was playing around with the demos and noticed this issue.

Your environment

Chrome browser, Windows 10 machine.

Search keywords: data grid header filter losing focus click away

[michelengelen]

Hey @TheOneTheOnlyJJ ... this is due to a faulty condition in the GridHeaderFilterCell component. This diff fixes it, but is likely not ideal.

--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -314,7 +314,8 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe

     const isNoInputOperator = currentOperator.requiresFilterValue === false;

-    const isApplied = item?.value !== undefined || isNoInputOperator;
+    const isApplied = item?.value != null || isNoInputOperator;
+    const isEmpty = item?.value === '';

     const label =
       currentOperator.headerLabel ??
@@ -367,7 +368,7 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
               placeholder=""
               isFilterActive={isFilterActive}
               clearButton={
-                showClearIcon && isApplied ? (
+                showClearIcon && !isEmpty && isApplied ? (
                   <GridHeaderFilterClearButton
                     onClick={clearFilterItem}
                     disabled={isFilterReadOnly}

I'll add it to the board! 👍🏼

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@TheOneTheOnlyJJ How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.