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

[Incin]

This seems to be an issue with material UI that remains even after their fixes. See https://github.com/mui/material-ui/issues/29508 https://github.com/mui/material-ui/pull/35735 https://github.com/mui/material-ui/issues/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!