Replace useRefObjectAsForwardedRef with useMergedRefs internally

.changeset/curvy-frogs-like.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update internal implementations of combined refs to improve performance and add support for React 19 callback refs

packages/react/src/ActionBar/ActionBar.tsx

@@ -352,7 +352,7 @@ function useActionBarItem(ref: React.RefObject<HTMLElement | null>, registryProp
 export const ActionBarIconButton = forwardRef(
   ({disabled, onClick, ...props}: ActionBarIconButtonProps, forwardedRef) => {
     const ref = useRef<HTMLButtonElement>(null)
-    const mergedRef = useMergedRefs(forwardedRef, ref)
+    const mergedRef = useMergedRefs(ref, forwardedRef)
 
     const {size} = React.useContext(ActionBarContext)
 

packages/react/src/Autocomplete/Autocomplete.test.tsx

@@ -162,20 +162,25 @@ describe('Autocomplete', () => {
     })
 
     it('closes the menu when the input is blurred', async () => {
+      const user = userEvent.setup()
       const {getByLabelText} = render(
-        <LabelledAutocomplete menuProps={{items: [], selectedItemIds: [], ['aria-labelledby']: 'autocompleteLabel'}} />,
+        <>
+          <LabelledAutocomplete
+            menuProps={{items: [], selectedItemIds: [], ['aria-labelledby']: 'autocompleteLabel'}}
+          />
+          <button type="button">outside</button>
+        </>,
       )
       const inputNode = getByLabelText(AUTOCOMPLETE_LABEL)
+      const outsideButton = screen.getByRole('button', {name: 'outside'})
 
       expect(inputNode.getAttribute('aria-expanded')).not.toBe('true')
-      fireEvent.click(inputNode)
+      await user.click(inputNode)
       fireEvent.keyDown(inputNode, {key: 'ArrowDown'})
 
       expect(inputNode.getAttribute('aria-expanded')).toBe('true')
 
-      // `userEvent.tab()` is unreliable in browser-mode Vitest for this case; blur is deterministic.
-      // eslint-disable-next-line github/no-blur
-      fireEvent.blur(inputNode)
+      await user.click(outsideButton)
 
       await waitFor(() => expect(inputNode.getAttribute('aria-expanded')).not.toBe('true'))
     })

packages/react/src/Autocomplete/AutocompleteInput.tsx

@@ -58,11 +58,17 @@ const AutocompleteInput = React.forwardRef(
       event => {
         onBlur && onBlur(event)
 
-        // HACK: wait a tick and check the focused element before hiding the autocomplete menu
-        // this prevents the menu from hiding when the user is clicking an option in the Autoselect.Menu,
-        // but still hides the menu when the user blurs the input by tabbing out or clicking somewhere else on the page
+        // HACK: wait a tick before hiding the menu so click interactions can complete.
+        // Use the blur event's relatedTarget to determine whether focus is moving into the
+        // autocomplete menu; if not, hide the menu when focus leaves the input.
         safeSetTimeout(() => {
-          if (document.activeElement !== inputRef.current) {
+          const nextFocusedElement = event.relatedTarget as Node | null
+          const menuElement = document.getElementById(`${id}-listbox`)
+
+          if (
+            !nextFocusedElement ||
+            (nextFocusedElement !== menuElement && !menuElement?.contains(nextFocusedElement))
+          ) {
             setShowMenu(false)
 
             // Reset the input's value to the text the user actually typed rather than leaving the
@@ -75,7 +81,7 @@ const AutocompleteInput = React.forwardRef(
           }
         }, 0)
       },
-      [onBlur, setShowMenu, inputRef, safeSetTimeout, autocompleteSuggestion, inputValue],
+      [onBlur, setShowMenu, inputRef, safeSetTimeout, autocompleteSuggestion, inputValue, id],
     )
 
     const handleInputChange: ChangeEventHandler<HTMLInputElement> = event => {