Fix positioning of Autocomplete overlay menu when tokens are present

.changeset/new-lamps-doubt.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix positioning of Autocomplete overlay menu when tokens are present

packages/react/src/Autocomplete/Autocomplete.features.stories.module.css

@@ -56,3 +56,14 @@
   overflow: auto;
   flex-grow: 1;
 }
+
+.InputWithStateLabel {
+  display: inline-flex;
+  align-items: flex-end;
+  gap: var(--base-size-24);
+}
+
+.StateLabelInline {
+  white-space: nowrap;
+  margin-bottom: var(--base-size-4);
+}

packages/react/src/Autocomplete/Autocomplete.features.stories.tsx

@@ -379,22 +379,27 @@ export const WithCallbackWhenOverlayOpenStateChanges = () => {
 
   return (
     <Stack as="form" padding="normal">
-      <FormControl>
-        <FormControl.Label id="autocompleteLabel">Default label</FormControl.Label>
-        <Autocomplete>
-          <Autocomplete.Input />
-          <Autocomplete.Overlay>
-            <Autocomplete.Menu
-              items={items}
-              selectedItemIds={[]}
-              onOpenChange={onOpenChange}
-              aria-labelledby="autocompleteLabel"
-            />
-          </Autocomplete.Overlay>
-        </Autocomplete>
-      </FormControl>
-      <div>
-        The menu is <strong>{isMenuOpen ? 'opened' : 'closed'}</strong>
+      <div className={classes.InputWithStateLabel}>
+        <div>
+          <FormControl>
+            <FormControl.Label id="autocompleteLabel">Default label</FormControl.Label>
+            <Autocomplete>
+              <Autocomplete.Input />
+              <Autocomplete.Overlay>
+                <Autocomplete.Menu
+                  items={items}
+                  selectedItemIds={[]}
+                  onOpenChange={onOpenChange}
+                  aria-labelledby="autocompleteLabel"
+                />
+              </Autocomplete.Overlay>
+            </Autocomplete>
+          </FormControl>
+        </div>
+
+        <div className={classes.StateLabelInline}>
+          The menu is <strong>{isMenuOpen ? 'open' : 'closed'}</strong>
+        </div>
       </div>
     </Stack>
   )

packages/react/src/Autocomplete/AutocompleteOverlay.tsx

@@ -1,5 +1,5 @@
 import type React from 'react'
-import {useCallback, useContext} from 'react'
+import {useCallback, useContext, useEffect, useRef} from 'react'
 import {useAnchoredPosition} from '../hooks'
 import type {OverlayProps} from '../Overlay'
 import Overlay from '../Overlay'
@@ -37,11 +37,22 @@ function AutocompleteOverlay({
   }
   const overlayProps = {...oldOverlayProps, ...newOverlayProps}
   const {inputRef, scrollContainerRef, selectedItemLength, setShowMenu, showMenu = false} = autocompleteContext
+
+  const computedAnchorRef = useRef<HTMLElement | null>(null)
+  useEffect(() => {
+    const explicit = menuAnchorRef?.current ?? null
+    const tokensContainer = inputRef.current
+      ? (inputRef.current.closest('[data-prevent-token-wrapping]') as HTMLElement | null)
+      : null
+    const tokensRoot = tokensContainer?.parentElement ?? null
+    computedAnchorRef.current = explicit ?? tokensRoot ?? inputRef.current
+  }, [menuAnchorRef, inputRef])
+
   const {floatingElementRef, position} = useAnchoredPosition(
     {
       side: 'outside-bottom',
       align: 'start',
-      anchorElementRef: menuAnchorRef ? menuAnchorRef : inputRef,
+      anchorElementRef: computedAnchorRef as React.RefObject<HTMLElement>,
     },
     [showMenu, selectedItemLength],
   )