Material-ui: [Autocomplete] Virtualization codesandbox broken

[Janpot]

• [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 😯

Checking out the demo of the Autocomplete Virtualization docs on (codesandbox](https://codesandbox.io/s/97t29). When I click the autocomplete it crashes with an error

Material-UI: the `query` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider. 
    in ListboxComponent (created by Autocomplete)
    in Autocomplete (created by WithStyles(ForwardRef(Autocomplete)))
    in WithStyles(ForwardRef(Autocomplete)) (at demo.tsx:81)
    in Virtualize (at index.tsx:6)

Expected Behavior 🤔

It works

Steps to Reproduce 🕹

Steps:

1. go to https://codesandbox.io/s/97t29
2. click on the autocomplete
3. check the console

Context 🔦

Just trying out the new component

Your Environment 🌎

https://codesandbox.io/s/97t29

| Tech | Version |
| ----------- | ------- |
| Material-UI | latest |
| React | |
| Browser | |
| TypeScript | |
| etc. | |

[oliviertassinari]

@Janpot Thanks for the bug report. The problem comes from: #16859. We can workaround the problem with:

diff --git a/docs/src/pages/components/autocomplete/Virtualize.tsx b/docs/src/pages/components/autocomplete/Virtualize.tsx
index 69e808b3a..125198f0d 100644
--- a/docs/src/pages/components/autocomplete/Virtualize.tsx
+++ b/docs/src/pages/components/autocomplete/Virtualize.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { useTheme, makeStyles, Theme } from '@material-ui/core/styles';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';

 function renderRow(props: ListChildComponentProps) {
@@ -23,7 +23,8 @@ function renderRow(props: ListChildComponentProps) {
 const ListboxComponent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement>>(
   function ListboxComponent(props, ref) {
     const { children, ...other } = props;
-    const smUp = useMediaQuery((theme: Theme) => theme.breakpoints.up('sm'));
+    const theme = useTheme();
+    const smUp = useMediaQuery(theme.breakpoints.up('sm'));
     const itemCount = Array.isArray(children) ? children.length : 0;
     const itemSize = smUp ? 36 : 48;

If you want to work on it, we would be happy to accept a pull request :)

[rbrishabh]

@mandrin17299 This is a good bug to start contributing to open-source with!

If @Janpot doesn't mind, you should work on this one!

[Janpot]

If @Janpot doesn't mind, you should work on this one!

Not at all, go ahead @mandrin17299 👍

[PranshuPanwar]

Thanks lot @rbrishabh and @Janpot for giving me this opportunity , I would love to start my open source contribution journey through this bug . Thanks alot guys.

[oliviertassinari]

It seems that @rbrishabh asked first.

@mandrin17299 if you are still interested to contribute, we have dozens of "good first issue"s like this one on our issue tracker.

[rbrishabh]

Haha @oliviertassinari, no worries!

As you can see my earlier comment, I actually asked for @mandrin17299 only.

He's a dear friend and I'm helping him get started with open source!

[oliviertassinari]

Oh great :dancer: