Fix jarring auto scroll on multi select when selecting a variable at the bottom of the list

[Incin]

No description provided.

[Incin]

This seems to be an issue with material UI that remains even after their fixes. See
mui/material-ui#29508
mui/material-ui#35735
mui/material-ui#31073
One suggested fix was to pull it out into its own component for the paper and proper to avoid the re-render as seen here https://stackblitz.com/edit/react-vr2zm1-xhhkth?file=demo.js,index.js however this did not work either.
I attempted the following
stopping the scrolling propagation
Ive tried non pulled in data (hard coded json) to rule out state updating
Ive tried removing and shuffling the dom around
Ive tried removing the dynamic props and conditions in the papers and poppers
Ive tried making everything static and local to the component, state updating etc
ive tried several different mui versions with the above combinations
Spoke to ryan and we decided to pin this for now due to the nature of it most likely being an issue with materials auto complete.

[ezalorsara]

Hi @Incin have you found a solution. Thank you

[ezalorsara]

Hi @Incin my solution is just to add ListBoxComponent

interface CustomListboxComponentProps {
  children?: React.ReactNode;
  [x: string]: any;
}

const CustomListboxComponent = forwardRef<
  HTMLUListElement,
  CustomListboxComponentProps
>((props, ref) => {
  const { children, ...other } = props;

  return (
    <Box maxHeight="200px" overflow="auto">
      <ul ref={ref} {...other}>
        {children}
      </ul>
    </Box>
  );
});

and use it in Autocomplete props ListboxComponent={CustomListboxComponent}

[Incin]

Hey @ezalorsara I quickly attempted your fix and the problem still seems to remain. Due to time constraints right now, I haven't had a chance to investigate this further. If you find another solution, feel free to make a pr, you can use hygen new component to create a new component that follows the other component's design, and @hafen and I can take a look. Thanks!