Fix ResizeObserver crash in Virtualizer due to scrollbar flapping (#6508)

devongovett · web-flow · commit 83cb20ddc1af · 2024-06-07T11:54:57.000-07:00
diff --git a/packages/@react-aria/utils/src/useResizeObserver.ts b/packages/@react-aria/utils/src/useResizeObserver.ts
@@ -6,11 +6,12 @@ function hasResizeObserver() {
 
 type useResizeObserverOptionsType<T> = {
   ref: RefObject<T | undefined> | undefined,
+  box?: ResizeObserverBoxOptions,
   onResize: () => void
 }
 
 export function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>) {
-  const {ref, onResize} = options;
+  const {ref, box, onResize} = options;
 
   useEffect(() => {
     let element = ref?.current;
@@ -32,7 +33,7 @@ export function useResizeObserver<T extends Element>(options: useResizeObserverO
 
         onResize();
       });
-      resizeObserverInstance.observe(element);
+      resizeObserverInstance.observe(element, {box});
 
       return () => {
         if (element) {
@@ -41,5 +42,5 @@ export function useResizeObserver<T extends Element>(options: useResizeObserverO
       };
     }
 
-  }, [onResize, ref]);
+  }, [onResize, ref, box]);
 }
diff --git a/packages/@react-aria/virtualizer/src/ScrollView.tsx b/packages/@react-aria/virtualizer/src/ScrollView.tsx
@@ -24,7 +24,7 @@ import React, {
   useState
 } from 'react';
 import {Rect, Size} from '@react-stately/virtualizer';
-import {useLayoutEffect, useResizeObserver} from '@react-aria/utils';
+import {useEffectEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
 
 interface ScrollViewProps extends HTMLAttributes<HTMLElement> {
@@ -38,8 +38,6 @@ interface ScrollViewProps extends HTMLAttributes<HTMLElement> {
   scrollDirection?: 'horizontal' | 'vertical' | 'both'
 }
 
-let isOldReact = React.version.startsWith('16.') || React.version.startsWith('17.');
-
 function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
   let {
     contentSize,
@@ -124,7 +122,7 @@ function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  let updateSize = useCallback(() => {
+  let updateSize = useEffectEvent((flush: typeof flushSync) => {
     let dom = ref.current;
     if (!dom) {
       return;
@@ -133,8 +131,10 @@ function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
     let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;
     let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');
     let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');
-    let w = isTestEnv && !isClientWidthMocked ? Infinity : dom.clientWidth;
-    let h = isTestEnv && !isClientHeightMocked ? Infinity : dom.clientHeight;
+    let clientWidth = dom.clientWidth;
+    let clientHeight = dom.clientHeight;
+    let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;
+    let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;
 
     if (sizeToFit && contentSize.width > 0 && contentSize.height > 0) {
       if (sizeToFit === 'width') {
@@ -147,32 +147,38 @@ function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
     if (state.width !== w || state.height !== h) {
       state.width = w;
       state.height = h;
-      onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));
+      flush(() => {
+        onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));
+      });
+
+      // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as
+      // a result of the layout update. In this case, re-layout again to account for the
+      // adjusted space. In very specific cases this might result in the scrollbars disappearing
+      // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid
+      // an infinite loop. This matches how browsers behavior with native CSS grid layout.
+      if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {
+        state.width = dom.clientWidth;
+        state.height = dom.clientHeight;
+        flush(() => {
+          onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));
+        });
+      }
     }
-  }, [onVisibleRectChange, ref, state, sizeToFit, contentSize]);
+  });
 
   useLayoutEffect(() => {
-    updateSize();
+    // React doesn't allow flushSync inside effects so pass an identity function instead.
+    // This only happens on initial render. The resize observer will also call updateSize
+    // once it initializes, but we need earlier initialization in a layout effect to avoid
+    // a flash of missing content.
+    updateSize(fn => fn());
   }, [updateSize]);
-  let raf = useRef<ReturnType<typeof requestAnimationFrame> | null>();
   let onResize = useCallback(() => {
-    if (isOldReact) {
-      raf.current ??= requestAnimationFrame(() => {
-        updateSize();
-        raf.current = null;
-      });
-    } else {
-      updateSize();
-    }
+    updateSize(flushSync);
   }, [updateSize]);
-  useResizeObserver({ref, onResize});
-  useEffect(() => {
-    return () => {
-      if (raf.current) {
-        cancelAnimationFrame(raf.current);
-      }
-    };
-  }, []);
+  // Watch border-box instead of of content-box so that we don't go into
+  // an infinite loop when scrollbars appear or disappear.
+  useResizeObserver({ref, box: 'border-box', onResize});
 
   let style: React.CSSProperties = {
     // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.
diff --git a/packages/@react-spectrum/card/stories/GridCardView.stories.tsx b/packages/@react-spectrum/card/stories/GridCardView.stories.tsx
@@ -14,7 +14,7 @@ import {action} from '@storybook/addon-actions';
 import {ActionButton} from '@react-spectrum/button';
 import {Card, CardView, GridLayout} from '../';
 import {ComponentStoryObj} from '@storybook/react';
-import {Content} from '@react-spectrum/view';
+import {Content, View} from '@react-spectrum/view';
 import {Flex} from '@react-spectrum/layout';
 import {getImageFullData} from './utils';
 import {GridLayoutOptions} from '../src/GridLayout';
@@ -530,3 +530,72 @@ export function CustomLayout(props: SpectrumCardViewProps<object> & LayoutOption
     </div>
   );
 }
+
+export function ResizeObserverCrash() {
+  const shots = [
+    {id: 1, src: 'https://i.imgur.com/Z7AzH2c.jpg', alt: 'foo', label: 'foo'},
+    {id: 2, src: 'https://i.imgur.com/Z7AzH2c.jpg', alt: 'bar', label: 'bar'},
+    {id: 3, src: 'https://i.imgur.com/Z7AzH2c.jpg', alt: 'baz', label: 'baz'},
+    {id: 4, src: 'https://i.imgur.com/Z7AzH2c.jpg', alt: 'qux', label: 'qux'},
+    {id: 5, src: 'https://i.imgur.com/Z7AzH2c.jpg', alt: 'foobar', label: 'foobar'},
+    {id: 6, src: 'https://i.imgur.com/Z7AzH2c.jpg', alt: 'foobaz', label: 'foobaz'}
+  ];
+
+  return (
+    <View backgroundColor="gray-75" width="100vw" height="100vh">
+      <div style={{position: 'relative', height: '100%', width: '100%'}}>
+        <div
+          style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
+          <React.Fragment key="foo">
+            <Flex alignItems="center" gap="size-200" margin="size-350">
+              <Heading level={3} margin="size-0">
+                My Demo Asset
+              </Heading>
+            </Flex>
+            <CardView
+              items={shots}
+              width="100%"
+              flex
+              position="relative"
+              layout={GridLayout}
+              selectionMode="none">
+              {(shot: any) => (
+                <Card key={shot.id}>
+                  <Flex
+                    UNSAFE_style={{
+                      position: 'absolute'
+                    }}
+                    direction="column"
+                    alignItems="center"
+                    justifyContent="center"
+                    gap="size-150"
+                    width="100%"
+                    height="calc(100% - 78px)">
+                    <Image
+                      src={shot.src}
+                      alt={shot.alt}
+                      width="200px"
+                      height="200px" />
+                  </Flex>
+                  <Flex
+                    direction="column"
+                    alignItems="start"
+                    marginTop="size-100">
+                    <Heading
+                      level={4}
+                      alignSelf="auto"
+                      UNSAFE_style={{
+                        fontWeight: 500
+                      }}>
+                      {shot.label}
+                    </Heading>
+                  </Flex>
+                </Card>
+              )}
+            </CardView>
+          </React.Fragment>
+        </div>
+      </div>
+    </View>
+  );
+}
