T
TanStack8mo ago
foreign-sapphire

All list not rendering in shadcn Select component

I have 242 items on my options array. But virtualizer only render 42 items. Can someone help me to fix my issue? You can see the example here: https://stackblitz.com/edit/vitejs-vite-dt6km4bw?file=src%2FApp.tsx
Nurul Islam
StackBlitz
Vitejs - Vite (forked) - StackBlitz
Next generation frontend tooling. It's fast!
6 Replies
flat-fuchsia
flat-fuchsia8mo ago
Hi, you need to use useVirtualizer, set scroller element also position the elements, checkout the fixed example
foreign-sapphire
foreign-sapphireOP8mo ago
useVirtualizer is not render anything. I have tried that before
flat-fuchsia
flat-fuchsia8mo ago
Did you pass the correct scroll element via getScrollElement? Without it virtualiser will not render anything as it dosen't know what to
foreign-sapphire
foreign-sapphireOP8mo ago
because of <SelectContent> component render on a portal, that's why maybe getScrollElement can't find it's element but it's working on useWindowVirtual
flat-fuchsia
flat-fuchsia7mo ago
@Laam simplified bit the example but overall something like this https://stackblitz.com/edit/vitejs-vite-9idak5la?file=src%2Fcomponents%2FUiColorSelect.tsx
Damian Pieczynski
StackBlitz
Vitejs - Vite (forked) - StackBlitz
Next generation frontend tooling. It's fast!
foreign-sapphire
foreign-sapphireOP7mo ago
Thank You So Much @piecyk ❤️

Did you find this page helpful?