[data grid] Custom Header Keyboard Navigation

[mogrady88]

[data grid] Custom Header Keyboard Navigation

[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.