Material-ui: [Autocomplete] Virtualized with grouped items

[Janpot]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I'm trying to add grouping to the virtualized autocomplete example. But it seems like the List that is virtualized is comprised of one child per group instead of one child per option. Would it be possible to implement the grouped autocomplete as a flat list of items+subheaders instead.

I've kind of started looking into it with renderGroup but it's not working well yet. a pair of extra eyes would be helpful as well. It seems to me this should be possible to support out of the box.

Examples 🌈

https://material-ui.com/components/autocomplete/#virtualization
https://material-ui.com/components/autocomplete/#grouped

[oliviertassinari]

@Janpot It seems that we miss the following style in the component:

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index cbf86bdc5..d03350159 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -135,6 +135,7 @@ export const styles = theme => ({
   /* Styles applied to the option elements. */
   option: {
     minHeight: 48,
+    boxSizing: 'border-box',
     display: 'flex',
     justifyContent: 'flex-start',
     alignItems: 'center',

Given that the virtualization is an advanced demo, I think that we might as well showcase the grouped version: https://codesandbox.io/s/virtualized-grouped-attempt-wm0hi.

[Janpot]

Given that the virtualization is an advanced demo, I think that we might as well showcase the grouped version

I agree.

Shouldn't that flat implementation of renderGroup be the default? Or is the current implementation (with the nested uls) there for a specific reason?

[oliviertassinari]

@Janpot Better semantic & accessibility?

[Janpot]

I don't really care about this much personally, but one thing that seems to not work with your demo is the floating subheaders.

[oliviertassinari]

@Janpot We have seen many of our users that don't care about accessibility (the majority actually). However, we have a good position to improve it, I think that we should take it.

Sticky position support is a "won't fix" from my perspective (not worth the hassle):

[Janpot]

Oh no, I care about accessibility, I was talking about the floating subheaders. Hence I agree, not worth the hassle.

[oliviertassinari]

@Janpot Great 👍

[oliviertassinari]

@Janpot Do you want to work on these changes?

[Janpot]

Not in the foreseeable future. but I'm gonna need it at some point so if nobody has picked it up by then, I will.