Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[data grid] using treeData and onRowSelectionModelChange with controlled rowSelectionModel causing infinite render loop #15217

Closed
annawatson-wk opened this issue Oct 31, 2024 · 1 comment · Fixed by #15184
Assignees
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/

Comments

@annawatson-wk
Copy link

annawatson-wk commented Oct 31, 2024

Steps to reproduce

Link to live example: (required)

Steps:

  1. Click the row selection checkbox on Sarah, Thomas, or Mary

Here's a video of the behavior:
https://github.com/user-attachments/assets/253ec8c4-b2ed-4154-a3af-4c5d59bea555

Current behavior

In the case when we're using treeData and onRowSelectionModelChange with controlled rowSelectionModel - the selected row toggles between selected and unselected when the row selection checkbox is used.

Expected behavior

In the case when we're using treeData and onRowSelectionModelChange with controlled rowSelectionModel - the selected row reflects it's selected state when remains selected when using the row selection checkbox.

Context

When you click a row to select row selection, the component goes into an infinite loop of calling onRowSelectionModelChange. The first time it calls it, it contains the id of the row you just selected and then it is called again with an empty list in the case of this example, causing the flashing behavior. In general, onRowSelectionModelChange gets called again with whatever the rowSelectionModel was before the click occurred. For example, if there's an initially selected row when it first mounts - it will go back to that.

It appears as though this issue was introduced in 7.19.0.

I'm not sure if it's related to other onRowSelectionModelChange open issues. This could potentially be related: #14859

Your environment

npx @mui/envinfo
System:
    OS: macOS 13.6.2
  Binaries:
    Node: 20.8.1 - ~/.asdf/installs/nodejs/20.8.1/bin/node
    npm: 10.1.0 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: Not Found
  Browsers:
    Chrome: 130.0.6723.71
    Edge: Not Found
    Safari: 17.1

Search keywords: data grid premium pro treeData onRowSelectionModelChange rowSelectionModel rowSelection
Order ID: 82849

@annawatson-wk annawatson-wk added bug 🐛 Something doesn't work status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 31, 2024
@github-actions github-actions bot added component: data grid This is the name of the generic UI component, not the React module! support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/ labels Oct 31, 2024
@MBilalShafi MBilalShafi self-assigned this Nov 1, 2024
@MBilalShafi MBilalShafi removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 1, 2024
Copy link

github-actions bot commented Nov 4, 2024

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.

Note

@annawatson-wk 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants