[material-ui][Autocomplete] Options list scrolls to the top if more options are added after pulling the scroll handle to the bottom

[jake-collibra]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/sandbox/dark-dust-zdlhtj?file=%2Fsrc%2FDemo.tsx%3A29%2C18

Steps:

1. Open an autocomplete that loads more data on scroll.
2. Pull the scroll handle to the bottom of the options list before the data finishes loading.
3. Observe that the options list jumps to the top.

Current behavior 😯

When manually scrolling to the bottom of an infinite-scroll options list, if the user scrolls too fast with the scroll handle the list will jump to the top as soon as data finishes loading.

Expected behavior 🤔

Scroll position should not change, as observed when scrolling with other methods.

Context 🔦

Our QA team discovered this edge case when testing that #30249 was resolved in our product. The effect is a potentially degraded user experience when using infinite-scroll autocompletes.

Your environment 🌎

npx @mui/envinfo

Observed using latest Chrome.

  System:
    OS: macOS 13.6.1
  Binaries:
    Node: 18.14.1 - ~/.nvm/versions/node/v18.14.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.1/bin/yarn
    npm: 8.12.1 - ~/collibra/frontend/node_modules/.bin/npm
  Browsers:
    Chrome: 120.0.6099.109
    Edge: Not Found
    Safari: 17.0
  npmPackages:
    @emotion/react: 11.11.1 => 11.11.1 
    @emotion/styled: 11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.21 
    @mui/core-downloads-tracker:  5.14.16 
    @mui/lab: ^5.0.0-alpha.140 => 5.0.0-alpha.150 
    @mui/material: 5.14.15 => 5.14.15 
    @mui/private-theming:  5.14.15 
    @mui/styled-engine:  5.14.15 
    @mui/system: 5.14.15 => 5.14.15 
    @mui/types:  7.2.7 
    @mui/utils: ^5.14.15 => 5.14.15 
    @mui/x-data-grid:  5.17.23 
    @mui/x-data-grid-pro: ^5.17.23 => 5.17.23 
    @mui/x-date-pickers:  5.0.20 
    @mui/x-date-pickers-pro: ^6.17.0 => 5.0.20 
    @mui/x-license-pro: 6.10.2 => 5.17.12 
    @mui/x-tree-view:  6.0.0-alpha.1 
    @types/react: 18.2.24 => 18.2.24 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.2.2 => 5.2.2 

[ZeeshanTamboli]

I'm experiencing the issue intermittently in your CodeSandbox reproduction:

Autocomplete.scroll.to.top.mp4

It mainly happens when the cursor remains on the scrollbar after dragging the scroll handle to the bottom.

[honia19]

@ZeeshanTamboli I have the same issue. Reproduce link https://codesandbox.io/s/autocomplete-scroll-bug-39wfv

[honia19]

@mj12albert @ZeeshanTamboli I have the same issue. Reproduce link https://codesandbox.io/s/autocomplete-scroll-bug-39wfv I have the last version of the MUI with the same behaviour how in this reproduce link

[NjegosR]

@ZeeshanTamboli Is there any update on this? When can we expect a fix for this?

[ZeeshanTamboli]

@NjegosR Currently, I don't have any updates to share since I am not working on it. However, this issue is open for contributions from the community. Your assistance or insights would be greatly appreciated.

[joshuatshaffer]

This scroll resetting was added intentionally by #23718. It only checks if the currently highlighted option is still in the list. When there is no highlighted option, the scroll will always be reset when the length of filtered options changes.

[joshuatshaffer]

A workaround is to set autoHighlight to true so that an option will always be highlighted. Then the scroll will not be reset by adding options.

[MBelniak]

A workaround is to set autoHighlight to true so that an option will always be highlighted. Then the scroll will not be reset by adding options.

It's not working for me, probably because I'm creating my custom paper component. Is there a different workaround?

[DiegoAndai]

There's another report of this: #43954

I case anyone that stumbles upon this and is trying to achieve virtualization, we have an example for that: https://mui.com/material-ui/react-autocomplete/#virtualization.

I'll add it to the Material UI with Base UI milestone, as I think we can fix it when we refactor on top of Base UI's autocomplete (whenever that is released).