diff --git a/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx index 517ea8eb2e41..d3e9a234eca3 100644 --- a/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx +++ b/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx @@ -192,7 +192,7 @@ const GridHeaderFilterCell = React.forwardRef { if (!hasFocus) { - if (inputRef.current) { + if (inputRef.current && inputRef.current.contains(event.target as HTMLElement)) { inputRef.current.focus(); } apiRef.current.setColumnHeaderFilterFocus(colDef.field, event); @@ -255,7 +255,21 @@ const GridHeaderFilterCell = React.forwardRef apiRef.current.startHeaderFilterEditMode(colDef.field)} - onBlur={() => apiRef.current.stopHeaderFilterEditMode()} + onBlur={(event: React.FocusEvent) => { + apiRef.current.stopHeaderFilterEditMode(); + // Blurring an input element should reset focus state only if `relatedTarget` is not the header filter cell + if (!event.relatedTarget?.className.includes('columnHeader')) { + apiRef.current.setState((state) => ({ + ...state, + focus: { + cell: null, + columnHeader: null, + columnHeaderFilter: null, + columnGroupHeader: null, + }, + })); + } + }} label={capitalize(label)} placeholder="" isFilterActive={isFilterActive} diff --git a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx index 6922d091c309..9e878e0a9e37 100644 --- a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx @@ -883,7 +883,7 @@ describe(' - Filter', () => { const filterCell = getColumnHeaderCell(0, 1); const filterCellInput = filterCell.querySelector('input')!; expect(filterCellInput).not.toHaveFocus(); - fireEvent.mouseDown(filterCell); + fireEvent.mouseDown(filterCellInput); expect(filterCellInput).toHaveFocus(); fireEvent.change(filterCellInput, { target: { value: 'ad' } }); clock.tick(SUBMIT_FILTER_STROKE_TIME); diff --git a/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts b/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts index aae50b0ff660..35da2277c49d 100644 --- a/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts +++ b/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts @@ -492,7 +492,6 @@ export const useGridFocus = ( }, [apiRef, handleDocumentClick]); useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur); - useGridApiEventHandler(apiRef, 'headerFilterBlur', handleBlur); useGridApiEventHandler(apiRef, 'cellDoubleClick', handleCellDoubleClick); useGridApiEventHandler(apiRef, 'cellMouseDown', handleCellMouseDown); useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);