Skip to content
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] Horizontal scrollbar position is not updated after scrollToIndexes #14830

Closed
David548219 opened this issue Oct 4, 2024 · 3 comments · Fixed by #14877 or #14888
Closed

[data grid] Horizontal scrollbar position is not updated after scrollToIndexes #14830

David548219 opened this issue Oct 4, 2024 · 3 comments · Fixed by #14877 or #14888
Assignees
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module!

Comments

@David548219
Copy link

David548219 commented Oct 4, 2024

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/eager-satoshi-zvqygs

Setup:

  1. DataGrid with with horizontal scrollbar & apiRef
  2. Button, onClick call apiRef.current.scrollToIndexes({ colIndex: 1 })

Steps:

  1. Refresh the page
  2. Scroll DataGrid to the rightmost position (or just sufficiently to the right) via mouse click and drag on the scrollbar
  3. Press the scroll button
  4. If horizontal scrollbar behaves as expected repeat steps 2-3 again, sometimes initial scroll behaves correctly

Using gestures to scroll right does not reproduce this issue, only mouse click & drag on the scrollbar does

Current behavior

Horizontal scrollbar position is not updated, leaving it in outdated state. Moving the scrollbar after this result is snapping back to initial scroll position

Expected behavior

Horizontal scrollbar position is adjusted after programmatic scroll

Context

Application requires programmatic scrolling to specific columns (in a wide table). This is achievable with current API, but horizontal scroll behavior is bad UX.

Your environment

npx @mui/envinfo
System:
    OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: 9.9.0 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/icons-material: ^6.1.2 => 6.1.2 
    @mui/material: ^6.1.2 => 6.1.2 
    @mui/x-data-grid: ^7.18.0 => 7.18.0 
    @mui/x-date-pickers: ^7.18.0 => 7.18.0 
    @types/react: ^18.3.11 => 18.3.11 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.6.2 => 5.6.2

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0

Search keywords: scrollbar position scrollToIndexes datagrid

@David548219 David548219 added bug 🐛 Something doesn't work status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 4, 2024
@github-actions github-actions bot added the component: data grid This is the name of the generic UI component, not the React module! label Oct 4, 2024
@michelengelen
Copy link
Member

It is very hard to reproduce and I am not sure which exact steps to take to make this bug appear. I tried logging the scrollPosition of the virtualScroller, but even when the bug appears everything seems to be just fine.
@cherniavskii could you have a look as well?

@michelengelen michelengelen changed the title [DataGrid] Horizontal scrollbar position is not updated after scrollToIndexes [data grid] Horizontal scrollbar position is not updated after scrollToIndexes Oct 7, 2024
@arminmeh
Copy link
Contributor

arminmeh commented Oct 7, 2024

I'll check it out

Copy link

github-actions bot commented Oct 8, 2024

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@David548219 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module!
Projects
None yet
3 participants