[ScrollArea] Check for :hover on mount (mui#862)

mj12albert · Nov 26, 2024 · 29f47e6 · 29f47e6
1 parent 424a7a2
commit 29f47e6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 36 deletions.
diff --git a/packages/react/src/ScrollArea/Scrollbar/ScrollAreaScrollbar.test.tsx b/packages/react/src/ScrollArea/Scrollbar/ScrollAreaScrollbar.test.tsx
@@ -18,42 +18,6 @@ describe('<ScrollArea.Scrollbar />', () => {
     },
   }));
 
-  it('adds [data-hovering] attribute when viewport is hovered', async function test(t = {}) {
-    // Fails to pass in browser CI, but works locally
-    if (!/jsdom/.test(window.navigator.userAgent)) {
-      // @ts-expect-error to support mocha and vitest
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      this?.skip?.() || t?.skip();
-    }
-
-    await render(
-      <ScrollArea.Root style={{ width: 200, height: 200 }} data-testid="root">
-        <ScrollArea.Viewport style={{ width: '100%', height: '100%' }}>
-          <div style={{ width: 1000, height: 1000 }} />
-        </ScrollArea.Viewport>
-        <ScrollArea.Scrollbar orientation="vertical" data-testid="vertical" keepMounted />
-        <ScrollArea.Scrollbar orientation="horizontal" data-testid="horizontal" keepMounted />
-        <ScrollArea.Corner />
-      </ScrollArea.Root>,
-    );
-
-    const verticalScrollbar = screen.getByTestId('vertical');
-    const horizontalScrollbar = screen.getByTestId('horizontal');
-
-    expect(verticalScrollbar).not.to.have.attribute('data-hovering');
-    expect(horizontalScrollbar).not.to.have.attribute('data-hovering');
-
-    fireEvent.pointerEnter(screen.getByTestId('root'), { pointerType: 'mouse' });
-
-    expect(verticalScrollbar).to.have.attribute('data-hovering', '');
-    expect(horizontalScrollbar).to.have.attribute('data-hovering', '');
-
-    fireEvent.pointerLeave(screen.getByTestId('root'), { pointerType: 'mouse' });
-
-    expect(verticalScrollbar).not.to.have.attribute('data-hovering');
-    expect(horizontalScrollbar).not.to.have.attribute('data-hovering');
-  });
-
   it('adds [data-scrolling] attribute when viewport is scrolled', async () => {
     await render(
       <ScrollArea.Root style={{ width: 200, height: 200 }}>

diff --git a/packages/react/src/ScrollArea/Viewport/useScrollAreaViewport.tsx b/packages/react/src/ScrollArea/Viewport/useScrollAreaViewport.tsx
@@ -23,6 +23,7 @@ export function useScrollAreaViewport(params: useScrollAreaViewport.Parameters)
     setHiddenState,
     hiddenState,
     handleScroll,
+    setHovering,
   } = useScrollAreaRootContext();
 
   const contentWrapperRef = React.useRef<HTMLDivElement | null>(null);
@@ -149,6 +150,14 @@ export function useScrollAreaViewport(params: useScrollAreaViewport.Parameters)
     computeThumb();
   }, [computeThumb, hiddenState, dir]);
 
+  useEnhancedEffect(() => {
+    // `onMouseEnter` doesn't fire upon load, so we need to check if the viewport is already
+    // being hovered.
+    if (viewportRef.current?.matches(':hover')) {
+      setHovering(true);
+    }
+  }, [viewportRef, setHovering]);
+
   React.useEffect(() => {
     if (
       !contentWrapperRef.current ||