search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.12k stars 1.27k forks source link

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

Open annawatson-wk opened 16 hours ago

annawatson-wk commented 16 hours ago

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.
  1. 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 commented 3 hours ago

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.