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.16k stars 1.3k forks source link

[data grid] Row height is continually adjusted despite stable content #12327

Closed busticated closed 7 months ago

busticated commented 7 months ago

Steps to reproduce

Link to live example: https://app.quilter.ai

Using Chrome v122 on macOS Sonoma 14.1...

Steps:

  1. Use an instance of @mui/x-data-grid on your site
  2. Include multiline content in one of the cells
  3. View your page in your browser

Current behavior

Row height is endlessly adjusted such that the grid appears to "jiggle" with a scrollbar appearing and disappearing with each adjustment.

https://github.com/mui/mui-x/assets/367674/e4e551f9-6e80-4f4f-8c27-6c727746d6e8

Expected behavior

Row height is stable, no scrollbar is shown.

Context

Rendering a <DataGrid /> with multiline content of different line counts

Your environment

npx @mui/envinfo ``` System: OS: macOS 14.1 Binaries: Node: 20.11.0 - ~/Library/Caches/fnm_multishells/763_1709226474610/bin/node npm: 10.2.4 - ~/Library/Caches/fnm_multishells/763_1709226474610/bin/npm pnpm: Not Found Browsers: Chrome: 122.0.6261.94 Edge: Not Found Safari: 17.1 npmPackages: @emotion/react: ^11.11.3 => 11.11.3 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.31 @mui/core-downloads-tracker: 5.15.4 @mui/icons-material: ^5.15.4 => 5.15.4 @mui/lab: ^5.0.0-alpha.162 => 5.0.0-alpha.162 @mui/material: ^5.15.4 => 5.15.4 @mui/private-theming: 5.15.6 @mui/styled-engine: 5.15.6 @mui/system: 5.15.6 @mui/types: 7.2.13 @mui/utils: 5.15.6 @mui/x-data-grid: ^6.19.1 => 6.19.1 @types/react: ^18.2.45 => 18.2.45 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.3.3 => 5.3.3 ```

Search keywords: Grid, Data Grid, Height, x-data-grid Order ID: 75241

MBilalShafi commented 7 months ago

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷.

A live example would be perfect. You can find examples and guides on how to find templates in our docs with which you can provide examples for your specific use-case: Support - Bug reproduction.

Thank you! 🙇🏼

busticated commented 7 months ago

thanks for taking a look 🙏 i appreciate that these sorts of bugs are very difficult to reproduce. the report i shared is about as minimal an example as i can reasonably pull together without re-writing my application for you and having you run in it in exactly the right size browser window to trigger the issue. that said, the video clearly demonstrates the issue is indeed happening and we can reproduce it fairly easily on a co-worker's laptop.

perhaps another way to approach this is to point me / others toward the code that could be causing this and / or share more granular debugging steps that i can perform and share findings back here?

i'm happy to do what i can to run this down but as you can imagine i'm simply not as familiar with the underlying MUI code that could be triggering this. if you can help bridge that knowledge gap, we can work together to run this down.

thanks again 🙏 👍

michelengelen commented 7 months ago

Hey @busticated could you at least tell us a few more details?

  1. props used in this grid instance
  2. column definitions
  3. a minimal data set
  4. maybe the wrapping container implementation?

That would be helpful to identify it a bit better

busticated commented 7 months ago

thanks. here's what i have - apologies in advance for the verbosity. believe it or not, this is a minimal representation compared to the norm in our app:

Props **rows** ```js [ { "id": "file-0", "index": 0, "type": "Schematic", "name": "Sheet_1-copy_2024-02-22.schdoc", "platform": "Altium", "issues": [] }, { "id": "file-1", "index": 1, "type": "Board", "name": "NEW_PCB_2024-02-22.pcbdoc", "platform": "Altium", "issues": [ { "severity": "error", "displayMessage": "File format not supported. Quilter supports Altium 19 files and above.", "details": "File format not supported. Quilter supports Altium 19 files and above.", "classification": "version" } ] } ] ``` **columns** ```js [ { "field": "name", "headerName": "File name", "flex": 1 }, { "field": "type", "headerName": "Type", "flex": 1 }, { "field": "platform", "headerName": "ECAD Tool", "flex": 1 }, { field: 'status', headerName: 'Status', flex: 1, renderCell: (params) => { const { row: { issues } } = params; return ( ); }, } ] ```
Component ```typescript export interface LayoutFileInfo { id: string; index: number; type: string; name: string; platform: string; issues: APIJobError[]; } export interface JobFileTableProps { files: File[] | APIFile[]; onRowDelete?: (row: LayoutFileInfo) => void; } export const JobFileTable = ({ files, onRowDelete, }: JobFileTableProps) => { const columns = getJobFileTableColumnDefs({ onRowDelete }); const rows = files.map((file, index) => { return { id: `file-${index}`, index: index, type: getFileType(file), name: file.name, platform: getFilePlatform(file), issues: file instanceof File ? [] : file.errors, }; }); const theme = useTheme(); const borderColor = theme.palette.divider; return (
{ if (params.model.issues.length) { return 'auto'; } return null; }} initialState={{ pagination: { paginationModel: { pageSize: 100, }, }, }} disableColumnMenu disableRowSelectionOnClick />
); }; interface getJobFileTableColumnDefsArgs { onRowDelete?: JobFileTableProps['onRowDelete']; } function getJobFileTableColumnDefs({ onRowDelete, }: getJobFileTableColumnDefsArgs): GridColDef[] { const columns: GridColDef[] = [ { field: 'name', headerName: 'File name', flex: 1, }, { field: 'type', headerName: 'Type', flex: 1, }, { field: 'platform', headerName: 'ECAD Tool', flex: 1, }, ]; if (typeof onRowDelete === 'function') { columns.push({ field: 'remove', headerName: '', sortable: false, renderCell: (params) => { const onClick = (event: MouseEvent) => { event.stopPropagation(); onRowDelete(params.row); }; return ; }, }); } else { columns.push({ field: 'status', headerName: 'Status', flex: 1, renderCell: (params) => { const { row: { issues } } = params; return ( ); }, }); } return columns; } ```
Raw HTML output ```html

Rows per page:

1–2 of 2

```
michelengelen commented 7 months ago

Ok, even with this info I still cannot get it reproduced. One thing that strikes me is the way the scrollbar is being rendered in your video. Is there any global scrollbar styling in place in your app? afaik we do some magic with the scrollbars as well, right @romgrk ?

romgrk commented 7 months ago

Some magic.

@busticated Is there a way you can put your code in a runnable code example like this template? I understand the the bug may be hard to reproduce but having a copy of the code you're using to trigger the bug is important so we can see which props & customization you're using. Having it in a runnable format makes it easier to work with.

I also see that you're on 6.19.1, is it possible to upgrade to 7.0.0-beta.5? We're about to release the v7 and we try to avoid bug fixes on the v6 branch as much as possible.

busticated commented 7 months ago

Is there any global scrollbar styling in place in your app?

no, definitely not. i've messed with those in the past and quickly learned not to 🤗

Is there a way you can put your code in a runnable code example like this template?

i understand why you'd want that but i don't see a practical way to make it happen. at least not with the level of fidelity that you would likely need to repro the issue given the component hierarchy in play. would it be useful to provide a runnable version of what i've already shared but without the nested components? fwiw, i'd be happy to host a live debugging pairing session if think that would be helpful.

I also see that you're on 6.19.1, is it possible to upgrade to 7.0.0-beta.5? We're about to release the v7 and we try to avoid bug fixes on the v6 branch as much as possible.

i'll give that a shot - were there specific changes in that new version that could impact the buggy behavior we're seeing?

I appreciate the help on this one. FWIW, we hit a similar issue a while back with a similarly difficult repro scenario. Perhaps between those two there's some common underlying code in play that we can focus on?

romgrk commented 7 months ago

were there specific changes in that new version that could impact the buggy behavior we're seeing?

We've reworked extensively our layout to use sticky elements and virtual scrollbars, and we've updated the layout code to figure out grid dimensions with pixel accuracy. It's very possible that this issue could be fixed in v7.

In that case I'll let you get back to us before doing more analysis.

github-actions[bot] commented 7 months ago

The issue has been inactive for 7 days and has been automatically closed.