T
TanStack•2y ago
like-gold

rowVirtualizer.getVirtualItems() returning values in v3.0.0-beta.61 but not v3.0.1

Hey all - Problem - When updating from beta version to stable version, rowVirtualizer.getVirtualItems() returns []. Reverting version back to beta fixes empty array issue Homework - - Checked Tanstack Virtual issues - Googled/ Stackoverflow'd - Checked offical docs & changelog for any mention of changes Example - 
// useVirtualizer instantiation 
    const rowVirtualizer = useVirtualizer({
      count: hasNextPage ? sortedData.length + 1 : sortedData.length,
      getScrollElement: () => scrollElement.current,
      estimateSize: () => 36,
      overscan: 5,
    });

// rowVirtualizer usage
const options = rowVirtualizer.getVirtualItems().map((virtualItem) => { ... }
// useVirtualizer instantiation 
    const rowVirtualizer = useVirtualizer({
      count: hasNextPage ? sortedData.length + 1 : sortedData.length,
      getScrollElement: () => scrollElement.current,
      estimateSize: () => 36,
      overscan: 5,
    });

// rowVirtualizer usage
const options = rowVirtualizer.getVirtualItems().map((virtualItem) => { ... }
All boilerplate pulled from offical docs (prior to v3 stable release - specifically this example https://tanstack.com/virtual/v3/docs/examples/react/infinite-scroll). Confirmed that the docs and my code look similar besides the styling markup. Happy to provide more context if required. Thanks!
React Virtual Infinite Scroll). Example | TanStack Virtual Docs
An example showing how to implement Infinite Scroll). in React Virtual
7 Replies
optimistic-gold
optimistic-gold•2y ago
Hi, looks like something is wrong with scroll element, are you conditionally rendering it? Right now virtualizer will not return any items if size is 0
like-gold
like-goldOP•2y ago
Yes, we're conditionally showing the scroll element. If there are no options, we show an empty state. The use-case for this is an infinite scrolling multiselect. If it's helpful, we're using the Mantine v7 combobox example - https://mantine.dev/core/combobox/#search-input
Combobox | Mantine
Create custom select, autocomplete or multiselect inputs
like-gold
like-goldOP•2y ago
Our specific code - 
{options.length ? (
            <Checkbox.Group
              value={valueList}
              onChange={(value) => {
                onChange?.(value);
                valueListHandlers.setState(value);
              }}
            >
              <ScrollArea.Autosize
                mah={DROPDOWN_MAX_HEIGHT}
                type="always"
                mx={-8}
                viewportRef={scrollElement}
              >
                <Stack
                  gap={theme.spacing["2"]}
                  px={8}
                  h={rowVirtualizer.getTotalSize()}
                  pos="relative"
                >
// this is the virtualized list
                  {options}
                </Stack>
              </ScrollArea.Autosize>
            </Checkbox.Group>
          ) : (
            <Combobox.Empty my="8">Nothing found</Combobox.Empty>
          )}
{options.length ? (
            <Checkbox.Group
              value={valueList}
              onChange={(value) => {
                onChange?.(value);
                valueListHandlers.setState(value);
              }}
            >
              <ScrollArea.Autosize
                mah={DROPDOWN_MAX_HEIGHT}
                type="always"
                mx={-8}
                viewportRef={scrollElement}
              >
                <Stack
                  gap={theme.spacing["2"]}
                  px={8}
                  h={rowVirtualizer.getTotalSize()}
                  pos="relative"
                >
// this is the virtualized list
                  {options}
                </Stack>
              </ScrollArea.Autosize>
            </Checkbox.Group>
          ) : (
            <Combobox.Empty my="8">Nothing found</Combobox.Empty>
          )}
Thank you for your help!
optimistic-gold
optimistic-gold•2y ago
Then store scroll element on state not on a ref, then when you conditionally render it will trigger after ref is set
like-gold
like-goldOP•2y ago
Ok thanks! Just to confirm, would it look something like this? 
const [scrollElement, setScrollElement] = useState()

const rowVirtualizer = useVirtualizer({
  getScrollElement: () => scrollElement
})

<ScrollElement ref={setScrollElement}
const [scrollElement, setScrollElement] = useState()

const rowVirtualizer = useVirtualizer({
  getScrollElement: () => scrollElement
})

<ScrollElement ref={setScrollElement}
optimistic-gold
optimistic-gold•2y ago
Yes
like-gold
like-goldOP•2y ago
Thank you, @piecyk!

Did you find this page helpful?