[data grid] Deleting a row on cell Key down triggers an error

[theobrasseurbentley]

Steps to reproduce

Link to live example: (required)
https://codesandbox.io/p/sandbox/mui-x-issue-template-forked-3sfqpv?file=%2Fsrc%2FApp.tsx

Using the live example
Steps:
1.Select a cell
2.Press the delete key

Current behavior

Error
No row with id #1 found

Expected behavior

No error.
Pressing the delete key with a cell selected deletes the row where the cell is.

Context

Delete the row where a cell is selected when the user presses the delete key

Your environment

npx @mui/envinfo

  Browser: Edge
   System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 18.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: 125.0.6422.142
    Edge: Chromium (125.0.2535.79)
  npmPackages:
    @emotion/react:  11.10.6
    @emotion/styled:  11.10.6
    @mui/base:  5.0.0-alpha.96
    @mui/core-downloads-tracker:  5.12.2
    @mui/icons-material:  5.11.16
    @mui/material: ^5.10.15 => 5.12.2
    @mui/private-theming:  5.12.0
    @mui/styled-engine:  5.12.0
    @mui/system:  5.12.1
    @mui/types:  7.2.4
    @mui/utils: ^5.15.14 => 5.15.14
    @mui/x-data-grid:  6.16.3
    @mui/x-data-grid-premium: ^6.16.3 => 6.16.3
    @mui/x-data-grid-pro:  6.16.3
    @mui/x-date-pickers: ^6.11.0 => 6.11.0
    @mui/x-license-pro: ^6.0.0-beta.3 => 6.10.2
    @mui/x-tree-view: ^6.0.0-alpha.1 => 6.0.0-alpha.1
    @types/react: ^18.0.21 => 18.2.0
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^5.3.3 => 5.3.3

Search keywords: delete row cellKeyDown
Order ID: 82553

[michelengelen]

Hey @theobrasseurbentley
You are running into this issue since the default behavior when pressing DEL would be to remove the cells content. Now that you intercepted that with the onCellKeyDown handler you passed you need to prevent that default behavior:

onCellKeyDown={(p, e) => {
  if (e.key !== 'Delete') {
    return;
  }
  e.defaultMuiPrevented = true;
  const rowToDelete = apiRef.current.getRow(p.id)!;
  apiRef.current.updateRows([
    {
      ...rowToDelete,
      _action: 'delete',
    },
  ]);
}}

The important part here is e.defaultMuiPrevented = true;, since this will tell the internal keydown handler that the default chain of operations should not be executed.

Since this will solve your issue I will close it here.
Thanks for taking the time to open an issue here and please don't hesitate when you encounter other problems or have questions. 👍🏼

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@theobrasseurbentley: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.