From ce3dffb84debbf22e2177742c8772eeebead6a6a Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 4 Jul 2022 02:14:32 +0800
Subject: [PATCH] fix: set DOM scrollTop when programmatically scroll to item

---
 src/components/FileExplorer/useVirtualScroll.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/FileExplorer/useVirtualScroll.tsx b/src/components/FileExplorer/useVirtualScroll.tsx
index 1883ab3..dad2973 100644
--- a/src/components/FileExplorer/useVirtualScroll.tsx
+++ b/src/components/FileExplorer/useVirtualScroll.tsx
@@ -31,7 +31,6 @@ export function useVirtualScroll<E extends HTMLElement>({
 
   const ref = React.useRef<E | null>(null) // TODO: compare DOM native event listener
   const [scrollTop, setScrollTop] = React.useState(0)
-  const [controlledScrollTop, setControlledScrollTop] = React.useState(0)
 
   const onScroll = React.useCallback((e: React.UIEvent<E, UIEvent>) => {
     setScrollTop(e.currentTarget.scrollTop)
@@ -75,12 +74,6 @@ export function useVirtualScroll<E extends HTMLElement>({
     [indexes, memoizedStyler],
   )
 
-  React.useLayoutEffect(() => {
-    if (ref.current) {
-      ref.current.scrollTop = controlledScrollTop
-    }
-  }, [controlledScrollTop])
-
   const containerStyle: React.CSSProperties = React.useMemo(
     () => ({
       height: totalHeight,
@@ -95,7 +88,11 @@ export function useVirtualScroll<E extends HTMLElement>({
 
     const updateScrollPosition = (scrollTop: number) => {
       setScrollTop(scrollTop)
-      setControlledScrollTop(scrollTop)
+
+      // Note: storing the scrollTop into a state and update DOM element scrollTop inside a layout effect would not work.
+      if (ref.current) {
+        ref.current.scrollTop = scrollTop
+      }
     }
 
     switch (mode) {