[data grid] disabled rows appear enabled on first render since `v8.19.0`
Steps to reproduce
Steps:
- Open this link to live example: link
- Copied this example from the MUI docs
- Added row selection state
- Disabled selection for row with ID
5
Current behavior
On first render, the checkbox for row with ID 5 appears enabled. It can't be interacted with, but it looks like an enabled button, and tests with libraries such as React Testing Library fail if you expect it toBeDisabled()
After triggering a rerender, such as by deselecting a different row, the disabled checkbox appears correctly
Expected behavior
Disabled checkboxes should appear correctly on first render, and should be correctly identified as disabled by testing libraries
Context
This is preventing us from updating from v8.18.0. The visual incorrectness aside, it also causes unit tests to fail as described above
Your environment
npx @mui/envinfo
System:
OS: Linux 5.0 undefined
Binaries:
Node: 20.19.1 - /usr/local/bin/node
npm: 10.8.2 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
Browsers:
Chrome: Not Found
Firefox: Not Found
Search keywords: data grid, checkbox, selection, disabled, enabled, isRowSelectable, first render
Order ID: 65425
+1 from Pro subscription
Same issue here. Seems like <React.StrictMode> fixes the problem but only in dev mode.
This was caused by https://github.com/mui/mui-x/pull/19959 , we may have to revert it (and live with the bug for awhile)? @michelengelen @MBilalShafi
tests with libraries such as React Testing Library
@DoodleBobBuffPants which version of testing library are you using?
"@testing-library/dom": "10.4.1",
"@testing-library/jest-dom": "6.9.1",
"@testing-library/react": "16.3.0",
"@testing-library/user-event": "14.6.1",
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.
@DoodleBobBuffPants Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.