virtual items are accordion

I'm struggling with this issue

the problem is:
I have a huge list of accordions. I need to virtualise them otherwise the browser struggle to handle that.

My problem is that whenever I open an accordion this happens.

I have also tried to

virtualItem.measureElement(ref);

virtualItem.measureElement(ref);

virtualItem.measureElement(ref);

virtualItem.measureElement(ref);
whenever the accordion is open or cloesed but nothing change.
any idea?

here is how i instanciate the list

  const virtualizer = useVirtualizer({
    getScrollElement: () => containerRef.current,
    estimateSize: () => 40,
    count: filteredOptions.length,
    overscan: 5
  });

  const virtualizer = useVirtualizer({
    getScrollElement: () => containerRef.current,
    estimateSize: () => 40,
    count: filteredOptions.length,
    overscan: 5
  });

  const virtualizer = useVirtualizer({
    getScrollElement: () => containerRef.current,
    estimateSize: () => 40,
    count: filteredOptions.length,
    overscan: 5
  });

  const virtualizer = useVirtualizer({
    getScrollElement: () => containerRef.current,
    estimateSize: () => 40,
    count: filteredOptions.length,
    overscan: 5
  });

virtual items are accordion

Similar Threads

Similar Threads

Similar Threads