-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
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] adding a new row with the autoHeight prop causes first row flicker #13270
Comments
Hey @Luis-Ramirez21x it works if you make the click handler asynchronous: const handleClick = async () => {
const id = randomId();
await apiRef.current.updateRows([{ id, isNew: true, name: "" }]);
apiRef.current.startRowEditMode({ id, fieldToFocus: "name" });
}; Does that solve your problem? |
Hey @michelengelen ! Thanks for the quick reply. |
just use if (isNew) {
apiRef.current.updateRows([{ ...res }]);
await handleAddRow();
return { ...oldRow, _action: "delete" };
} |
The first row continues to re-render despite your suggestion. See the demo and attached recording. first_row_flicker.mp4 |
It doesn't happen for me on the first 2-3 rows I add ... but then it does. Maybe @romgrk or @cherniavskii know if this might be possible. |
Maybe we could even handle this as a feature request to allow for an additional empty row that sits at the bottom (or top)? Thoughts @mui/xgrid ? |
Hello @michelengelen @romgrk @cherniavskii , I wanted to know if you guys had any more insight on this? |
Thanks @Luis-Ramirez21x for reporting. I can confirm the issue. I can reproduce the problem with the CRUD example in the docs (after adding On initial investigation, the cells in the first row seem to be unnecessarily re-rendering. I'll move it to the board for prioritization. |
Thank you for looking into it @MBilalShafi ! 🙏 |
I can't reproduce it using the |
Hey @cherniavskii Grid_Flicker.mp4 |
I am also seeing this behaviour when the grid is overflowing. I think there is enough information for us to reproduce and take a look at this issue after prioritisation |
Hey guys, just wanted to follow up and see if there are any updates on this. 🙂 |
The issue seems to be related to switching focus to an editable cell. I have narrowed it down to this effect: But still unsure why this would create a flicker (which is also only occuring with autoHeight enabled). flicker.mp4 |
@Luis-Ramirez21x: 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. |
The problem in depth
I have a DataGrid component that lets you add a new row and auto-adds a new row after being saved.
The issue is a re-render on the first row is triggered when adding a row and it causes a flicker. Ths only occurs when the
autoHeight
prop is added.See this demo. Simply add a row and notice the flicker on the first row.
Your environment
`npx @mui/envinfo`
Search keywords: autoHeight, DataGrid, flicker
Order ID: 67382
The text was updated successfully, but these errors were encountered: