fix(AnchoredOverlay): do not overwrite ref from prop spread (#7130)

Author: joshblack

.changeset/quiet-spiders-cough.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update the `AnchoredOverlay` component so that the `ref` value is not overridden when spreading props

packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx

@@ -1,4 +1,4 @@
-import {act, useCallback, useState} from 'react'
+import {act, createRef, useCallback, useRef, useState} from 'react'
 import {describe, expect, it, vi} from 'vitest'
 import {render} from '@testing-library/react'
 import {userEvent} from 'vitest/browser'
@@ -145,4 +145,34 @@ describe('AnchoredOverlay', () => {
       },
     })
   })
+
+  it('should support a `ref` through `overlayProps` on the overlay element', () => {
+    const ref = createRef<HTMLDivElement>()
+
+    function Test() {
+      const anchorRef = useRef(null)
+      return (
+        <AnchoredOverlay
+          overlayProps={{
+            ref,
+            id: 'overlay',
+          }}
+          open
+          renderAnchor={props => {
+            return (
+              <button {...props} ref={anchorRef} type="button">
+                anchor
+              </button>
+            )
+          }}
+        >
+          <div>content</div>
+        </AnchoredOverlay>
+      )
+    }
+
+    render(<Test />)
+
+    expect(document.getElementById('overlay')).toBe(ref.current)
+  })
 })

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -249,7 +249,6 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
           onClickOutside={onClickOutside}
           ignoreClickRefs={[anchorRef]}
           onEscape={onEscape}
-          ref={updateOverlayRef}
           role="none"
           visibility={position ? 'visible' : 'hidden'}
           height={height}
@@ -262,6 +261,12 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
           className={className}
           preventOverflow={preventOverflow}
           {...overlayProps}
+          ref={node => {
+            if (overlayProps?.ref) {
+              assignRef(overlayProps.ref, node)
+            }
+            updateOverlayRef(node)
+          }}
         >
           {showXIcon ? (
             <div className={classes.ResponsiveCloseButtonContainer}>
@@ -288,4 +293,15 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   )
 }
 
+function assignRef<T>(
+  ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined,
+  value: T | null,
+) {
+  if (typeof ref === 'function') {
+    ref(value)
+  } else if (ref) {
+    ref.current = value
+  }
+}
+
 AnchoredOverlay.displayName = 'AnchoredOverlay'