[data grid] Pasting in data grids with 200+ rows using TextField in renderEditCell jumps rows when getRowHeight={() => 'auto'}

[annawatson-wk]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-yiiuuw?file=Demo.tsx

Steps:

1. scroll down to the middle of the data grid (maybe around row 100)
2. copy a large, multiline piece of text and paste it in the bio section of the row. Note the row number before you exit the TextField.

Every day is taco ipsum tuesday. These tacos are lit. If you were a taco, would you eat yourself? 50 cent tacos! I’ll take 30. Fish tacos: lettuce or cabbage, pico de gallo, avocado and a sour cream or citrus/mayonnaise sauce, all placed on top of a corn or flour tortilla. Let’s do a beef and a chicken, and one with both. Does guac cost extra? Black or pinto beans? Tacos al pastor made with adobada meat. Pico de gallo, on the side please. Tacos for breakfast, lunch and dinner.

3. Click outside of the TextField, note the new row number

Current behavior

When you edit the TextField and exit the Textfield the row in the viewport jumps to show another row which was not being edited.

Expected behavior

When you edit the TextField and exit the Textfield the row in the viewport shows the same row which was being edited.

Context

We had a customer report this jumping behavior when pasting. It's only an issue when using a TextField in renderEditCell in the column definition and getRowHeight={() => 'auto'}. Ideally we'd like the row that was being edited in the viewport in view in some capacity.

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
  Browsers:
    Chrome: 129.0.6668.71

Search keywords: data grid premium pro textfield renderEditCell TextField rows scroll jump getRowHeight={() => 'auto'}
Order ID: 82849

[michelengelen]

Strongly related to #14802 ... The main problem seems to be that the grid needs to recalculate the row height and scrolls to the specific row being edited. If I remember this right we had this discussion somewhere else
The main problem here is the virtualization. The grid has to know all rows heights to precisely scroll to the point where it needs to, but without the rows actually being rendered we cannot do that. Not sure if we can support something like this.

I don't know if this would be a viable solution for you, but you can always disable the virtualization if it fits your use case: Disable virtualization

@romgrk might be able to dive a bit deeper into this topic.

[annawatson-wk]

Given the scale of the number of rows in the Data Grid and the content I don't think disabling virtualization would be viable. But let me check with the team that reported it.

[annawatson-wk]

Unfortunately they will not be able to disable virtualization. It sounds like they're already having performance issues.