T
TanStack•17mo ago
passive-yellow

Scroll to not working + warning about flushSync

The scrollToIndex doesn't seem to work and I'm getting a warning about flushSync. I'm guessing the scrollTo doesn't work because of whatever triggers the warning. How would I go about this issue? I'm using react-virtual@3.2.1 and latest react 18 version. Reproducible repo: https://github.com/hornta/react-virtual-flushsync-scrollto 
Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
GitHub
GitHub - hornta/react-virtual-flushsync-scrollto
Contribute to hornta/react-virtual-flushsync-scrollto development by creating an account on GitHub.
No description
1 Reply
fascinating-indigo
fascinating-indigo•17mo ago
Hi, there are two issues in your example, * first is the size middleware, here you can't direclty mutate the floating as the virutlizer use the height when resolving scroll to index logic, there is example in floating docs where @atomiks is using flush sync 
size({
  apply({ availableHeight }) {
    // Use state instead of directly mutating so that `react-virtual`
    // scrollToIndex() function works in the layout effect.
    ReactDOM.flushSync(() => {
      setMaxHeight(availableHeight);
    });
  },
  padding: overflowPadding
})
size({
  apply({ availableHeight }) {
    // Use state instead of directly mutating so that `react-virtual`
    // scrollToIndex() function works in the layout effect.
    ReactDOM.flushSync(() => {
      setMaxHeight(availableHeight);
    });
  },
  padding: overflowPadding
})
* second in floating in useLayoutEffect can be null, we can use the elements to wait till next render like 
useLayoutEffect(() => {
  if (!elements.floating) return

  if (selectedIndex && isOpen) {
    rowVirtualizer.scrollToIndex(selectedIndex, { align: "center" });
  }
}, [selectedIndex, isOpen, rowVirtualizer, elements.floating]);
useLayoutEffect(() => {
  if (!elements.floating) return

  if (selectedIndex && isOpen) {
    rowVirtualizer.scrollToIndex(selectedIndex, { align: "center" });
  }
}, [selectedIndex, isOpen, rowVirtualizer, elements.floating]);
https://github.com/floating-ui/floating-ui/issues/2827#issuecomment-2016329901 having this in place scroll to index will work as expected
GitHub
[React] refs.floating.current is null inside useEffect when u...
Describe the bug I'm using the useFloating hook from @floating-ui/react. refs.floating.current is null inside useEffect when the floating element is wrapped in FloatingPortal. To Reproduce Step...

Did you find this page helpful?