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

Duplicates

• I have searched the existing issues

Latest version

• I have tested the 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/react: 11.7.1
@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)

[alveloper]

Hi, Is there any progress in here?

[aakash-lohono]

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
}