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.14k stars 1.29k forks source link

[data grid] Datagrid Seems to Scroll On It's own #14526

Closed lisaWriteJava closed 1 month ago

lisaWriteJava commented 1 month ago

The problem in depth

When scrolling the grid, quickly the page will continue to scroll even when the user stops. If there are enough items, it will jump around. This demo shows the continued scrolling: https://stackblitz.com/edit/react-obcliq?file=Demo.js We used similar configuration with v6 and our testers couldn't reproduce the error but it's showing now that we're on v7.

npmPackages:
"@emotion/react": "latest",
    "@emotion/styled": "latest",

    "@mui/icons-material": "^5.15.15",
    "@mui/lab": "^5.0.0-alpha.170",
    "@mui/material": "^5.15.15",
    "@mui/private-theming": "^5.15.14",
    "@mui/styles": "^5.15.15",
    "@mui/utils": "^5.15.14",
    "@mui/x-charts": "^7.4.0",
    "@mui/x-data-grid-generator": "^7.2.0",
    "@mui/x-data-grid-premium": "^7.2.0",
    "@mui/x-license": "^7.2.0"
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "latest"

Your environment

`npx @mui/envinfo` ``` System: OS: Linux 4.18 Red Hat Enterprise Linux 8.10 (Ootpa) CPU: (16) x64 AMD EPYC 7R13 Processor Memory: 57.08 GB / 61.31 GB Container: Yes Shell: 4.4.20 - /bin/bash Binaries: Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node Yarn: 1.22.22 - ~/.nvm/versions/node/v16.15.1/bin/yarn npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm Managers: pip3: 9.0.3 - /usr/bin/pip3 Yum: 4.7.0 - /usr/bin/yum Utilities: Git: 2.43.5 - /usr/bin/git Curl: 7.61.1 - /usr/bin/curl IDEs: Nano: 2.9.8 - /usr/bin/nano VSCode: 1.85.1 - /home/lmcart4/.vscode-server/bin/0ee08df0cf4527e40edc9aa28f4b5bd38bbff2b2/bin/remote-cli/code Vim: 8.0 - /usr/bin/vim Languages: Bash: 4.4.20 - /usr/bin/bash Perl: 5.26.3 - /usr/bin/perl Python3: 3.6.8 - /usr/bin/python3 Browsers: Chrome: 128.0.6613.84 ```

Search keywords: datagrid scrolling Order ID: 66765

michelengelen commented 1 month ago

Hey @lisaWriteJava I noticed your rows are missing a unique identifier, which can cause some unexpected behavior. You can find more details about this in the documentation here: Row identifier.

To help illustrate this, I went ahead and made a quick fix to your demo (check it out! here).

In the future, just a quick heads-up before opening issues for things that might be implementation details. If you ever get stuck and need a hand with your code, Stack Overflow or our Discord server are great places to get help from the community! They're full of awesome people who love tackling coding challenges.

lisaWriteJava commented 1 month ago

Thanks for the heads up and the assistance. I didn't see the issue on stack overflow. I'll check the other resource next time. Thanks again

On Sat, Sep 7, 2024, 5:04 AM Michel Engelen @.***> wrote:

Hey @lisaWriteJava https://github.com/lisaWriteJava I noticed your rows are missing a unique identifier, which can cause some unexpected behavior. You can find more details about this in the documentation here: Row identifier https://mui.com/x/react-data-grid/row-definition/#row-identifier.

To help illustrate this, I went ahead and made a quick fix to your demo (check it out! here https://stackblitz.com/edit/react-obcliq-pkjj3u?file=Demo.js).

In the future, just a quick heads-up before opening issues for things that might be implementation details. If you ever get stuck and need a hand with your code, Stack Overflow or our Discord server are great places to get help from the community! They're full of awesome people who love tackling coding challenges.

— Reply to this email directly, view it on GitHub https://github.com/mui/mui-x/issues/14526#issuecomment-2335125668, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJMQOIAWPYUDY35ELLFXRDZVK6SXAVCNFSM6AAAAABNZI7DK6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMZVGEZDKNRWHA . You are receiving this because you were mentioned.Message ID: @.***>