How to access onKeyDown handler of material-ui-pickers datepicker keyboard icon?

Question

I have a Material table with rows with material-ui-pickers datepicker components in the last column.

I need to add a new row to the table on tab key press when the focus is on datepicker keyboard icon. For this I think it is needed to access onKeyDown handler of datepicker keyboard icon.

How to access onKeyDown handler of datepicker keyboard icon?

I have added an issue to the material-ui-pickers git repo regarding this.

---

I tried to adding the onKeyDown handler to the DatePicker component. But it will cause to add a new row in both occasions, first tab key press while the focus is on date string and second tab key press while the focus is on the icon.

<DatePicker
    id={id}
    keyboard
    ...
    onKeyDown={(e, index) => {
        if (e.keyCode === 9 && this.props.itemData.rows.length - 1 === index) {
            console.log('Tab key pressed');
            this.props.addNewItemDataRow();
        }
    }}
/>

Answer 1

You can use KeyboardIconProps

<DatePicker
  KeyboardIconProps={{
    onKeyDown: () => console.log('hey') 
  }}
/>

Answer 2

For the more recent versions of DatePicker (v6.10.1 in this case) DatePicker API

We can use SlotProps:

<DatePicker
  slotProps={{
    textField: {
      onKeyDown: (event) => console.log('Key pressed', event.key),
    },
  }}
/>