How to virtualize a grouped list?
I want to virtualize a MUI Autocomplete component that has groups. The structure is as below. Seems a bit counterintuitive to virtualizing. Any ideas?
1 Reply
unwilling-turquoiseOP•17mo ago
<ul
class="MuiAutocomplete-listbox css-1yn9syo"
role="listbox"
id="grouped-demo-listbox"
aria-labelledby="grouped-demo-label"
>
<li>
<div
class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky MuiAutocomplete-groupLabel css-lgdhop"
>
0-9
</div>
<ul class="MuiAutocomplete-groupUl css-15s1ek9">
<li
tabindex="-1"
role="option"
id="grouped-demo-option-0"
data-option-index="0"
aria-disabled="false"
aria-selected="false"
class="MuiAutocomplete-option"
>
12 Angry Men
</li>
<li
tabindex="-1"
role="option"
id="grouped-demo-option-1"
data-option-index="1"
aria-disabled="false"
aria-selected="false"
class="MuiAutocomplete-option"
>
2001: A Space Odyssey
</li>
</ul>
</li>
<li>
<div
class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky MuiAutocomplete-groupLabel css-lgdhop"
>
A
</div>
<ul class="MuiAutocomplete-groupUl css-15s1ek9">
<li
tabindex="-1"
role="option"
id="grouped-demo-option-3"
data-option-index="3"
aria-disabled="false"
aria-selected="false"
class="MuiAutocomplete-option"
>
American History X
</li>
<li
tabindex="-1"
role="option"
id="grouped-demo-option-4"
data-option-index="4"
aria-disabled="false"
aria-selected="false"
class="MuiAutocomplete-option"
>
Apocalypse Now
</li>
</ul>
</li>
</ul>
<ul
class="MuiAutocomplete-listbox css-1yn9syo"
role="listbox"
id="grouped-demo-listbox"
aria-labelledby="grouped-demo-label"
>
<li>
<div
class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky MuiAutocomplete-groupLabel css-lgdhop"
>
0-9
</div>
<ul class="MuiAutocomplete-groupUl css-15s1ek9">
<li
tabindex="-1"
role="option"
id="grouped-demo-option-0"
data-option-index="0"
aria-disabled="false"
aria-selected="false"
class="MuiAutocomplete-option"
>
12 Angry Men
</li>
<li
tabindex="-1"
role="option"
id="grouped-demo-option-1"
data-option-index="1"
aria-disabled="false"
aria-selected="false"
class="MuiAutocomplete-option"
>
2001: A Space Odyssey
</li>
</ul>
</li>
<li>
<div
class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky MuiAutocomplete-groupLabel css-lgdhop"
>
A
</div>
<ul class="MuiAutocomplete-groupUl css-15s1ek9">
<li
tabindex="-1"
role="option"
id="grouped-demo-option-3"
data-option-index="3"
aria-disabled="false"
aria-selected="false"
class="MuiAutocomplete-option"
>
American History X
</li>
<li
tabindex="-1"
role="option"
id="grouped-demo-option-4"
data-option-index="4"
aria-disabled="false"
aria-selected="false"
class="MuiAutocomplete-option"
>
Apocalypse Now
</li>
</ul>
</li>
</ul>