Material-ui: [Autocomplete] properties multiple, disableCloseOnSelect and filterSelectedOptions make virtualized list of autocomplete scroll up

[galkadaw]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

For my virtualized Autocomplete I use your example from your documentation
When I try to do virtual Autocomplete component with properties: multiple, filterSelectedOptions, disableCloseOnSelect and choose an element in the middle of list, after choosing list scrolls up to the top.

Expected Behavior 🤔

Virtual List stays at the same place and don't scrolls up after choosing

Steps to Reproduce 🕹

Example is here: Example

Context 🔦

It's not comfortable, when there are about 100 elements in list

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | latest |
| React | latest |
| TypeScript | latest |

[oliviertassinari]

@galkadaw Thanks for opening this issue, this is interesting. The origin is in

https://github.com/mui-org/material-ui/blob/861498c05fc27d794b10803928b8164709772409/docs/src/pages/components/autocomplete/Virtualize.tsx#L60

At some point, it would be great to abstract this demo, it starts to be too complex. In the meantime. What do you think of this patch of the demo? Do you want to work on a pull request? :)

diff --git a/docs/src/pages/components/autocomplete/Virtualize.tsx b/docs/src/pages/components/autocomplete/Virtualize.tsx
index fc731622f..09c419739 100644
--- a/docs/src/pages/components/autocomplete/Virtualize.tsx
+++ b/docs/src/pages/components/autocomplete/Virtualize.tsx
@@ -26,6 +26,16 @@ const OuterElementType = React.forwardRef<HTMLDivElement>((props, ref) => {
   return <div ref={ref} {...props} {...outerProps} />;
 });

+const useResetCache = (data) => {
+  const ref = React.useRef();
+  React.useEffect(() => {
+    if (ref.current) {
+      ref.current.resetAfterIndex(0);
+    }
+  }, [data]);
+  return ref;
+};
+
 // Adapter for react-window
 const ListboxComponent = React.forwardRef<HTMLDivElement>(function ListboxComponent(props, ref) {
   const { children, ...other } = props;
@@ -35,6 +45,8 @@ const ListboxComponent = React.forwardRef<HTMLDivElement>(function ListboxCompon
   const itemCount = itemData.length;
   const itemSize = smUp ? 36 : 48;

+  const gridRef = useResetCache(itemCount);
+
   const getChildSize = (child: React.ReactNode) => {
     if (React.isValidElement(child) && child.type === ListSubheader) {
       return 48;
@@ -57,7 +69,7 @@ const ListboxComponent = React.forwardRef<HTMLDivElement>(function ListboxCompon
           itemData={itemData}
           height={getHeight() + 2 * LISTBOX_PADDING}
           width="100%"
-          key={itemCount}
+          ref={gridRef}
           outerElementType={OuterElementType}
           innerElementType="ul"
           itemSize={(index) => getChildSize(itemData[index])}
@@ -84,6 +96,7 @@ function random(length: number) {

 const useStyles = makeStyles({
   listbox: {
+    boxSizing: 'border-box',
     '& ul': {
       padding: 0,
       margin: 0,

More details in https://github.com/bvaughn/react-window/issues/147.

[galkadaw]

Thank you very much, it helped me

What do you think of this patch of the demo?

I think that it may be helpful in some cases, but I agree with bvaughn. in case, when we don't need to recalculate size on every data change, it will be just hard and expensive operation and not useful. For my case it is not useful.
but I'll check it more closely later

Do you want to work on a pull request?

what should pull request change? an example of documentation?

[maksimgm]

@galkadaw I hope this helps:
https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md