diff --git a/.changeset/olive-planets-pump.md b/.changeset/olive-planets-pump.md new file mode 100644 index 00000000000..3109dcea9d9 --- /dev/null +++ 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 index c165386ecff..926444c7bb5 100644 --- a/src/AnchoredOverlay/AnchoredOverlay.tsx +++ b/src/AnchoredOverlay/AnchoredOverlay.tsx @@ -90,6 +90,9 @@ export const AnchoredOverlay: React.FC = ({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 = ({renderAnchor, c ref={updateOverlayRef} role="listbox" visibility={position ? 'visible' : 'hidden'} - {...position} + {...overlayPosition} > {children}