Fix overlay position (#1201)

Co-authored-by: dgreif <dustin.greif@gmail.com>
primer · Apr 30, 2021 · 3c13d03 · 3c13d03 · vercel · Apr 30, 2021
1 parent 344e35d
commit 3c13d03
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/.changeset/olive-planets-pump.md b/.changeset/olive-planets-pump.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Fix overlay position when using an AnchoredOverlay
diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -90,6 +90,9 @@ export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({renderAnchor, c
     },
     [overlayRef.current]
   )
+  const overlayPosition = useMemo(() => {
+    return position && {top: `${position.top}px`, left: `${position.left}px`}
+  }, [position])
 
   useFocusZone({containerRef: overlayRef, disabled: !open || focusType !== 'list' || !position})
   useFocusTrap({containerRef: overlayRef, disabled: !open || focusType !== 'list' || !position})
@@ -114,7 +117,7 @@ export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({renderAnchor, c
           ref={updateOverlayRef}
           role="listbox"
           visibility={position ? 'visible' : 'hidden'}
-          {...position}
+          {...overlayPosition}
         >
           {children}
         </Overlay>