Replies: 2 comments
-
Did you ever get this working? |
Beta Was this translation helpful? Give feedback.
0 replies
-
I hope this helps: VirtualizedList component:import { Children, type HTMLAttributes, type ReactElement } from 'react'
const ListboxComponent = forwardRef<
HTMLDivElement,
HTMLAttributes<HTMLElement>
>((props, ref) => {
const { children, role, ...other } = props
const items = Children.toArray(children) as ReactElement[]
const itemCount = items.length
const scrollRef = useRef<HTMLDivElement>(null)
const virtualizer = useVirtualizer({
count: itemCount,
estimateSize: () => 55, //* NOTE: You may have to play around with this value.
getScrollElement: () => scrollRef.current,
})
return (
<div ref={ref}>
<List
{...other}
role={role}
ref={scrollRef}
component="div"
sx={{
position: 'relative',
height: virtualizer.getTotalSize(),
}}
>
{virtualizer.getVirtualItems().map(item => (
<Box
key={item.key}
sx={{
py: 0.5,
width: '100%',
position: 'absolute',
transform: `translateY(${item.start}px)`,
}}
>
{items[item.index]}
</Box>
))}
</List>
</div>
)
}) Autocomplete component with your virtualized list:<Autocomplete
ListboxComponent={ListboxComponent} // <-- Your component goes here.
// You can even use custom components for your options!
renderOption={(props, option, { selected }) => (
<ListItem {...props} disablePadding>
<ListItemIcon>
<Checkbox edge="start" checked={selected} />
</ListItemIcon>
<ListItemText primary={option.label} />
</ListItem>
)}
/> |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi - trying to integrate with Material UI's Autocomplete component, but having issues with virtualization (i.e. all options are being rendered) or with keyboard navigation not working.
Here is a WIP demo, which is mostly broken. How can I get this to work?
FWIW, MUI has a working demo with a different library, might be useful as a reference
Beta Was this translation helpful? Give feedback.
All reactions