Search code examples
javascriptreactjshtml-tablekeyboardmaterial-ui

onKeyDown is non responsive

Using a Material-UI Table I have this:

<Table
 onKeyDown={event => console.log(event)}>
  <TableBody>
    ...
  </TableBody>
</Table>

When I click on the table with my mouse and then begin clicking the up and down arrow keys nothing logs to the console. I've tried putting the onKeyDown on the TableBody as well as the overall parent div of my Application with no luck whatsoever.

help?

Solution

  • This is probably because your table is not focusable. So onKeyDown is never triggered.

    You coud add tabIndex to make it focusable, but make sure you dont have other focusable elements inside or they will take priority.

    <Table
 tabIndex='123'
 onKeyDown={event => console.log(event)}>
  <TableBody>
    ...
  </TableBody>
</Table>