Fix ScrollView scroll position issues (#501)

ScrollView would not update if the size of the content changed due to
style or window size changes.

ScrollView would get stuck in a state where the arrows would not update
when the user scrolled fast back and forth.

Author: atmelmicro

src/components/ScrollView/ScrollView.jsx

@@ -5,6 +5,7 @@ import React, {
   useLayoutEffect,
   useRef,
   useState,
+  useCallback,
 } from 'react';
 import { TranslationsContext } from '../../providers/translations';
 import { withGlobalProps } from '../../providers/globalProps';
@@ -58,20 +59,26 @@ export const ScrollView = React.forwardRef((props, ref) => {
   const blankRef = useRef(null);
   const scrollViewViewportEl = ref ?? blankRef;
 
-  const handleScrollViewState = (currentPosition) => {
+  const handleScrollViewState = useCallback((currentPosition) => {
     const isScrolledAtStartActive = currentPosition[scrollPositionStart]
       <= -1 * EDGE_DETECTION_INACCURACY_PX;
     const isScrolledAtEndActive = currentPosition[scrollPositionEnd]
       >= EDGE_DETECTION_INACCURACY_PX;
 
-    if (isScrolledAtStartActive !== isScrolledAtStart) {
-      setIsScrolledAtStart(isScrolledAtStartActive);
-    }
+    setIsScrolledAtStart((prevIsScrolledAtStart) => {
+      if (isScrolledAtStartActive !== prevIsScrolledAtStart) {
+        return isScrolledAtStartActive;
+      }
+      return prevIsScrolledAtStart;
+    });
 
-    if (isScrolledAtEndActive !== isScrolledAtEnd) {
-      setIsScrolledAtEnd(isScrolledAtEndActive);
-    }
-  };
+    setIsScrolledAtEnd((prevIsScrolledAtEnd) => {
+      if (isScrolledAtEndActive !== prevIsScrolledAtEnd) {
+        return isScrolledAtEndActive;
+      }
+      return prevIsScrolledAtEnd;
+    });
+  }, [scrollPositionStart, scrollPositionEnd]);
 
   /**
    * It handles scroll event fired on `scrollViewViewportEl` element. If autoScroll is in progress,
@@ -146,7 +153,6 @@ export const ScrollView = React.forwardRef((props, ref) => {
 
   useScrollPosition(
     (currentPosition) => (handleScrollViewState(currentPosition)),
-    [isScrolledAtStart, isScrolledAtEnd],
     scrollViewContentEl,
     scrollViewViewportEl,
     debounce,
@@ -163,6 +169,30 @@ export const ScrollView = React.forwardRef((props, ref) => {
     [autoScroll, autoScrollChildrenKeys, autoScrollChildrenLength],
   );
 
+  // ResizeObserver to detect when content or viewport dimensions change due to style changes
+  useLayoutEffect(() => {
+    const contentElement = scrollViewContentEl.current;
+    const viewportElement = scrollViewViewportEl.current;
+
+    if (!contentElement || !viewportElement) {
+      return () => {};
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      handleScrollViewState(
+        getElementsPositionDifference(scrollViewContentEl, scrollViewViewportEl),
+      );
+    });
+
+    // Observe both content and viewport for dimension changes
+    resizeObserver.observe(contentElement);
+    resizeObserver.observe(viewportElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [scrollViewContentEl, scrollViewViewportEl, handleScrollViewState]);
+
   const arrowHandler = (contentEl, viewportEl, scrollViewDirection, shiftDirection, step) => {
     const offset = shiftDirection === 'next' ? step : -1 * step;
     const differenceX = scrollViewDirection === 'horizontal' ? offset : 0;

src/components/ScrollView/_hooks/useScrollPositionHook.js

@@ -1,10 +1,10 @@
 import {
-  useLayoutEffect,
   useRef,
+  useEffect,
 } from 'react';
 import { getElementsPositionDifference } from '../_helpers/getElementsPositionDifference';
 
-export const useScrollPosition = (effect, dependencies, contentEl, viewportEl, wait) => {
+export const useScrollPosition = (effect, contentEl, viewportEl, wait) => {
   const throttleTimeout = useRef(null);
 
   const callBack = (wasDelayed = false) => {
@@ -15,7 +15,7 @@ export const useScrollPosition = (effect, dependencies, contentEl, viewportEl, w
     }
   };
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const viewport = viewportEl.current;
 
     const handleScroll = () => {
@@ -34,7 +34,7 @@ export const useScrollPosition = (effect, dependencies, contentEl, viewportEl, w
       clearTimeout(throttleTimeout.current);
       viewport.removeEventListener('scroll', handleScroll);
     };
-  }, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 };
 
 export default useScrollPosition;