reactjsmaterial-uimui-x-data-grid

MUI DataGrid custom cells and space button

I have a DataGrid with custom cells which are TextFieldcomponents. When I'm typing something inside the TextField it's working well until I push the space button, instead of putting space in TextField it's changing focus to the last row or just doing nothing. Can someone help with it? Here is my example: https://codesandbox.io/s/cocky-currying-7du4sy?file=/src/App.js

Solution

  • add stopPropagation() to onCellKeyDown events prop in DataGrid.

    Like as:

    <DataGrid
    ...
    onCellKeyDown={(params, events) => events.stopPropagation()}
/>

    in your example: https://codesandbox.io/s/elated-dhawan-671nqb?file=/src/App.js