[data grid] Custom Header Keyboard Navigation

[mogrady88]

Steps to reproduce

Link to live example: (required) https://mui.com/x/react-data-grid/column-header/#custom-header-renderer

Steps:

1. duplicate the columns in the Custom Header Renderer
2. Attempt to move left or right via the Arrow keys like you can in normal header cells
3. Nothing happens / focused cell doesn't change?

Current behavior

I have a custom checkbox renderer made up of:

It is housed in a ColDef > renderHeader

Ive been trying everything I can to get this component to both respect the keyboard navigation (Right/Left arrow keys) as well as the keyboard events for the buttons and I cannot get it to work.

I thought it was an implementation issue on my part but then I discovered that this same thing happens in your docs in the Custom Header Renderer demo if you duplicate the columns.

// one of the methods used in TableHeaderCell

 const selectAllRows = () => {
    const rowIds = apiRef.current.getAllRowIds();
    rowIds.forEach(rowId => apiRef.current.selectRow(rowId));
    const newSelectedRows = apiRef.current.getSelectedRows();

    setSelectedRowCount(newSelectedRows.size);
  };
  
// collection of methods being passed to the TableHeaderCell below

 const tableHeaderCellProps = {
    deselectAll: deselectAllRows,
    rowCount: rows.length,
    selectAll: selectAllRows,
    selectPage: selectPageRows,
  };

// ColDef[]

[...otherColumns,
 {
        ...GRID_CHECKBOX_SELECTION_COL_DEF,
        align: 'start',
        field: 'custom',
        minWidth: 80,
        renderHeader: () => <TableHeaderCell {...tableHeaderCellProps} selectedRowCount={selectedRowCount} />,
        width: 80,
  },
 ]

Expected behavior

A custom header using headerRenderer should work by allowing for keyboard navigation across it unless you somehow focus into that cell. It should not get "stuck" in that cell when you're using Right/Left arrows to traverse the table

Context

Im trying to accomplish rendering a custom component in my checkboxSelection DataGrid. Keyboard events work for my custom TableHeaderCell but when it's thrown into the DataGrid I dont get any eventing coming through and the Right/Left arrows no longer work.

My custom component receives focus and I can tab through it but the Enter key doesnt fire any event against the custom component

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: data grid custom header keyboard navigation renderHeader checkbox

[michelengelen]

Hey @mogrady88,
I tried replicating your described behaviour, but wasn't able to do so. It seems there is something more going on in your component that I am not aware of.

Could you please provide a minimal reproduction test case with the latest version. This would help a lot 👷.

A live example would be perfect. You can find a examples and guides on how to find templates in our docs with which you can provide examples for your specific use-case: Support - Bug reproduction.

Thank you! 🙇🏼

[mogrady88]

Hey Michel, you are right. The issue turned out to be my own. We're trying to implement a custom checkAll header with some additional functionality and it looks like there are some limitations around keyboard events. This source code reads like you short circuit keyboard events from custom renderHeader components unless its of type __check__.

Our current solution is to define a column with a field: 'custom' and then subscribe to columnHeaderKeyDown and manually handle the ArrowRight, ArrowLeft, and ArrowDown eventing. I havent seen any clean example of a DataGrid with checkboxSelection that includes a custom renderHeader

Do you have any advice on how to drill keyboard events to a ColDef with a field of __check__ and a renderHeader component? The simplest reproduction would be to add a renderHeader: () => <Button onClick={() => console.log('clicked'}>Click Me</Button>. If I navigate via keyboard to that header and try to activate the button with Space or Enter no event comes through and that onClick doesnt fire.

[michelengelen]

Well ... for the keyboard navigation to work you would need to handle key strokes inside the rendered header on your own. I did test it with a simple button and pressing space or enter did fire the onClick event just fine (screencast below).\

Screen.Recording.2024-04-03.at.12.11.57.mov

The underlying problem why the keyboard navigation is no longer working is that the button receives focus and traps it. The events for arrows need to be bubbled to the parent container, so that they can act upon it.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.