rowPinning: deleting a row with focus results in uncaught exceptions

[martinco]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/affectionate-leakey-vpmrzi?file=/demo.js

Example Steps:

1. delete the pinned row using the action

General Steps:

1. set pinnedRows
2. unset pinnedRows using an action contained within the pinned row
3. uncaught exception thrown
4. click on html body, second uncaught exception thrown

Current behavior 😯

useGridParamsApi.js:72 Uncaught Error: No row with id #pinned_row found
    at Object.eval [as getCellParams] (useGridParamsApi.js:72:13)
    at apiRef.current.<computed> [as getCellParams] (useGridApiMethod.js:18:84)
    at Object.eval [as setCellFocus] (useGridFocus.js:71:63)
    at apiRef.current.<computed> [as setCellFocus] (useGridApiMethod.js:18:84)
    at HTMLDocument.eval (useGridFocus.js:168:24)

Upon next click of the html body we get

useGridParamsApi.js:88 Uncaught Error: No row with id #0 found
    at Object.getCellParams (useGridParamsApi.js:88:1)
    at apiRef.current.<computed> [as getCellParams] (useGridApiMethod.js:14:1)
    at useGridFocus.js:35:1
   at HTMLDocument.<anonymous> (useGridFocus.js:223:1)

Expected behavior 🤔

Remove the pinned row without exceptions

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.22621
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 109.0.5414.74 (Official Build) (64-bit)
    Edge: Spartan (44.22621.963.0), Chromium (108.0.1462.76)
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5
    @emotion/styled: ^11.10.5 => 11.10.5
    @mui/base:  5.0.0-alpha.107
    @mui/core-downloads-tracker:  5.10.15
    @mui/icons-material: ^5.10.15 => 5.10.15
    @mui/lab: ^5.0.0-alpha.113 => 5.0.0-alpha.113
    @mui/material: ^5.10.15 => 5.10.15
    @mui/private-theming:  5.11.1
    @mui/styled-engine:  5.11.0
    @mui/system:  5.11.1
    @mui/types:  7.2.3
    @mui/utils:  5.11.1
    @mui/x-data-grid:  5.17.19
    @mui/x-data-grid-pro: ^5.17.19 => 5.17.19
    @mui/x-license-pro:  5.17.12
    @types/react:  18.0.25
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript:  4.9.3

Browser Used:

• Chrome 109.0.5414.74 (64-bit)
• Firefox 108.0.2 (64-bit)

Order ID 💳 (optional)

57845

[yaredtsy]

i think the problem is when you are removing the pinned row it's not completely updating the row state. you need to trigger the update manually by updating the rows like this setRows([...rows]).

if (id === "pinned_row") {
      setPinnedRows({top:[]});
      setRows([...rows]);
}

@cherniavskii apiRef.current.updateRows([{ id: id, _action: "delete" }]); is also not working with pinnedRow.
Demo : https://codesandbox.io/s/sad-waterfall-8dmp7k?file=/demo.js:1084-1143

[cherniavskii]

Closed by #7767