material-ui: [Autocomplete] Adding items to options causes scroll to go to the top of the list (paging)

Hi, as an intermediate solution

observe role="list-box", useAutocomplete expects it to be role="listbox"

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?

Thanks @aakash-lohono the problem was solved Actually, to solve this problem we just need to pass role: "list-box" as to ListboxProps

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.

Thanks @aakash-lohono the problem was solved Actually, to solve this problem we just need to pass role: "list-box" as to ListboxProps

@MostafaKMilly by changing the role to “list-box”, can you still access to the list elements with the keyboard?. I tried but breaks accesibility for me.

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

Hi , everybody! @LuigiMaestrelli , until the bug is fixed, you can try my solution. I hope it gives a result similar to what you expected

https://codesandbox.io/s/clever-noether-5b93i2?file=/Autocomplete.js

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

@Saul-Garcia Yes it breaks accessing options elements using keyboard 😃

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.

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

@ShivamTyagi12345 if you need help, I would also like to help with this. Thanks.