[DataGridPro] Fix header filters rendering issue for isEmpty and isNotEmpty filter operators

[k-rajat19]

Fixes #14490

• I have followed (at least) the PR section of the contributing guide.

[MBilalShafi]

Thank you for picking this up. 🙏

[MBilalShafi]

Instead of having to update the behavior in the filter panel:

Before

After

I'd rather keep the disabled input components in the header filter cell.

How about something like:

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 1d22e8793..80ff6dfa2 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -18,6 +18,11 @@ import {
   gridFilterModelSelector,
   gridFilterableColumnLookupSelector,
   GridPinnedColumnPosition,
+  GridFilterInputValue,
+  GridFilterInputDate,
+  GridFilterInputBoolean,
+  GridColType,
+  GridFilterInputSingleSelect,
 } from '@mui/x-data-grid';
 import {
   GridStateColDef,
@@ -32,7 +37,6 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProProcessedProps } from '../../models/dataGridProProps';
 import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer';
 import { GridHeaderFilterClearButton } from './GridHeaderFilterClearButton';
-
 export interface GridRenderHeaderFilterProps extends GridHeaderFilterCellProps {
   inputRef: React.RefObject<unknown>;
 }
@@ -87,6 +91,19 @@ const dateSx = {
   [`& input[value=""]:not(:focus)`]: { color: 'transparent' },
 };
 
+const defaultInputComponents: {
+  [key in GridColType]: React.JSXElementConstructor<any> | null;
+} = {
+  string: GridFilterInputValue,
+  number: GridFilterInputValue,
+  date: GridFilterInputDate,
+  dateTime: GridFilterInputDate,
+  boolean: GridFilterInputBoolean,
+  singleSelect: GridFilterInputSingleSelect,
+  actions: null,
+  custom: null,
+};
+
 const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCellProps>(
   (props, ref) => {
     const {
@@ -147,7 +164,9 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
     );
 
     const InputComponent =
-      colDef.filterable || isFilterReadOnly ? currentOperator!.InputComponent : null;
+      colDef.filterable || isFilterReadOnly
+        ? (currentOperator.InputComponent ?? defaultInputComponents[colDef.type as GridColType])
+        : null;
 
     const applyFilterChanges = React.useCallback(
       (updatedItem: GridFilterItem) => {

[k-rajat19]

Shukriya for the review
this solution is much better than that I have proposed earlier
I missed checking that it is already working in v6
thanks again :)

[MBilalShafi]

Hey @k-rajat19
Thank you again for this pull request!

Your changes seem to impact the commercially licensed code. For any changes of this nature, we require contributors to sign the MUI’s Contributor License Agreement (CLA). However, I can’t find a CLA signed that could cover these changes. Please follow the steps at https://mui-org.notion.site/CLA-Contributor-License-Agreement-92ece655b1584b10b00e4de9e67eedb0 to sign the document.

[k-rajat19]

I've sent the email to [email protected]

[zannager]

@MBilalShafi, CLA signed, thanks.

[mui-bot]

Deploy preview: https://deploy-preview-14493--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 74d04b2

[MBilalShafi]

LGTM