From b5256f4be19a089e2d073ca22cd6c4b253705805 Mon Sep 17 00:00:00 2001
From: Rajat <robertdoweny2301@gmail.com>
Date: Wed, 18 Sep 2024 01:25:52 +0530
Subject: [PATCH] [DataGridPro] Fix header filters rendering issue for
 `isEmpty` and `isNotEmpty` filter operators (#14493)

---
 .../headerFiltering/GridHeaderFilterCell.tsx  | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

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 1d22e87939585..58ba0623f1bd2 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -15,6 +15,11 @@ import {
   gridVisibleColumnFieldsSelector,
   getDataGridUtilityClass,
   useGridSelector,
+  GridFilterInputValue,
+  GridFilterInputDate,
+  GridFilterInputBoolean,
+  GridColType,
+  GridFilterInputSingleSelect,
   gridFilterModelSelector,
   gridFilterableColumnLookupSelector,
   GridPinnedColumnPosition,
@@ -86,7 +91,16 @@ const useUtilityClasses = (ownerState: OwnerState) => {
 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 +161,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) => {