fix(Popover): move position with target when in scroll container

Codecademy · Jun 9, 2023 · bfb1649 · bfb1649
1 parent 4a6ec72
commit bfb1649
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/packages/gamut/src/Popover/Popover.tsx b/packages/gamut/src/Popover/Popover.tsx
@@ -12,6 +12,25 @@ import {
 } from './elements';
 import { PopoverProps } from './types';
 
+const findScrollingParent = ({
+  parentElement,
+}: HTMLElement): HTMLElement | null => {
+  if (parentElement) {
+    const { overflow, overflowY, overflowX } = getComputedStyle(parentElement);
+    if (
+      [overflow, overflowY, overflowX].some((val) =>
+        ['scroll', 'auto'].includes(val)
+      )
+    ) {
+      return parentElement;
+    } else {
+      return findScrollingParent(parentElement);
+    }
+  } else {
+    return null;
+  }
+};
+
 export const Popover: React.FC<PopoverProps> = ({
   animation,
   align = 'left',
@@ -58,6 +77,23 @@ export const Popover: React.FC<PopoverProps> = ({
     setTargetRect(targetRef?.current?.getBoundingClientRect());
   }, [targetRef, isOpen, width, height, x, y]);
 
+  useEffect(() => {
+    if (!targetRef.current) {
+      return;
+    }
+    const scrollingParent = findScrollingParent(
+      targetRef.current as HTMLElement
+    );
+    if (!scrollingParent?.addEventListener) {
+      return;
+    }
+    const handler = () => {
+      setTargetRect(targetRef?.current?.getBoundingClientRect());
+    };
+    scrollingParent.addEventListener('scroll', handler);
+    return () => scrollingParent.removeEventListener('scroll', handler);
+  }, [targetRef]);
+
   useEffect(() => {
     if (targetRect) {
       const inView =