mui / material-ui Public
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鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Autocomplete] Adding items to options causes scroll to go to the top of the list (paging) #30249
Comments
|
I've been trying to get help with this same issue but have received: no response on one ticket, and closure of another ticket with no explanation. This CSB also illustrates the issue: https://codesandbox.io/s/autocomplete-scroll-bug-39wfv?file=/src/App.js |
|
Don't now if helps, but I have an older project running some v4 version and this kind of use was working. |
|
Indeed this issue didn't exist on v4. Looks like the problem is this logic https://github.com/mui-org/material-ui/blob/3735493e98b0f15390642f4b134eff0212c652a6/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js#L341 when there's no selected item. |
|
i would like to help |
|
Hey @ShivamTyagi12345, are you still working on this issue? I am currently facing the exact same problem and would like to work on it if needed. Thanks! |
yes @glaucoheitor thanks for checking in.yes! I am working on my PR |
|
@ShivamTyagi12345 if you need help, I would also like to help with this. Thanks. |
Sure , if u have done any commits ,I would be happy to look and collaborate |
|
@ShivamTyagi12345 Hey how is your PR going ? I am working on this issue as well right now as well. Would love to help and collaborate. For anyone else also looking into this - https://github.com/mui-org/material-ui/blob/3735493e98b0f15390642f4b134eff0212c652a6/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js#L373 The above line seems to be responsible for scrolling the list to the top and temporarily commenting it out seems to stop this happening. I don't know why this is happening however, but I am looking into it rn. |
|
/unassign |
|
Need a contribution for school, I will also look into this issue |
|
Opened a PR #30719 proposing a fix. Please read the PR message provided with it which includes a question I have regarding the demos/docs part of the PR. |
|
Hi, observe import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef } from "react";
interface ListBoxProps extends React.HTMLAttributes<HTMLUListElement> {
}
const ListBox = forwardRef(
function ListBoxBase (
props: ListBoxProps,
ref: ForwardedRef<HTMLUListElement>,
) {
const { children, ...rest } = props;
const innerRef = useRef<HTMLUListElement>(null);
useImperativeHandle<NullableUlElement, NullableUlElement>(ref, () => innerRef.current);
return (
<ul
{...rest}
ref={innerRef}
role="list-box"
>
{children}
</ul>
);
},
);
export default ListBox;
type NullableUlElement = HTMLUListElement | null;import React from "react";
import { Autocomplete } from "@mui/material";
import ListBox from "./ListBox";
function HelloWorld () {
return (
<Autocomplete
{...someProps}
ListboxComponent={ListBox}
/>
);
}this will also do away with hover and selection styles, to fix that, add the following somewhere globally .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true'] {
background: dodgerblue; // change accordingly
color: white; // change accordingly
}
.MuiAutocomplete-popper .MuiAutocomplete-option[role='option'][aria-selected='false']:hover {
background: rgba(0, 0, 0, 0.1); // change accordingly
} |
|
Hi, Is there any progress in here? |


Duplicates
Latest version
Current behavior馃槸
I'm implementing async load with pagination with the Autocomplete.
When the listbox is open and the user scroll to the bottom, we load the next page and add the new options.
After adding, the position of the scroll on the listbox is reseted and the scroll goes to the top.
Expected behavior馃
The scroll position should not change so the user can continue the search for the option
Steps to reproduce馃暪
I've used the Select Country example in the docs and tweek to load the countries with paging.
I was abe to reproduce the issue without any async request, just loading more items from the fixed array.
https://codesandbox.io/s/confident-kare-5n6i6
Context馃敠
No response
Your environment馃寧
@emotion/styled: 11.6.0
@mui/material: 5.2.4
react: 17.0.2
`npx @mui/envinfo`
System:
OS: Windows 10 10.0.19044
Binaries:
Node: 16.12.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD
npm: 8.3.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.57)
The text was updated successfully, but these errors were encountered: