Fix positioning of Autocomplete overlay menu when tokens are present

[llastflowers]

Closes https://github.com/github/primer/issues/5261

Changelog

Changed

• Conditionally position the Autocomplete overlay menu when there are tokens present so that the increased height of the input doesn't cause overlapping elements. Storybook story. Should also fix this primer-docs code example.

Before:

After:

• While working on this I noticed another Storybook issue and cleaned it up: In the With Callback When Overlay Open State Changes story, there is a state label that changes based on menu open/closed status, but it is positioned so that it is covered up by the menu, so the state change can't be observed. I moved the state label to the right of the input instead, only in this story.

Before:

After:

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 077df7f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

Pull request overview

This PR fixes the positioning of the Autocomplete overlay menu when tokens are present and improves two Storybook stories for better demonstration. The main change introduces dynamic anchor computation in AutocompleteOverlay to account for token container height, preventing the menu from overlapping with multi-line token inputs.

Key changes:

• Implements dynamic anchor element selection for Autocomplete overlay positioning based on token presence
• Improves Storybook story layouts to better visualize component behavior
• Enhances SelectPanel MultiSelectModal story with clearer state management for saved vs. pending selections

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/react/src/Autocomplete/AutocompleteOverlay.tsx	Adds logic to compute anchor element dynamically, positioning menu relative to token container parent when tokens are present
packages/react/src/Autocomplete/Autocomplete.features.stories.tsx	Repositions state label in WithCallbackWhenOverlayOpenStateChanges story to be inline with input, preventing menu overlap
packages/react/src/Autocomplete/Autocomplete.features.stories.module.css	Adds CSS classes for inline layout of input with state label
packages/react/src/SelectPanel/SelectPanel.features.stories.tsx	Refactors MultiSelectModal story to maintain separate saved selection state and only update button text on confirmed selections
.changeset/fresh-spiders-push.md	Documents the changes as a patch release

[liuliu-dev]

Looks great! ✨

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/10178

[primer-integration]

🔬 github-ui Integration Test Results

Check	Status	Details
CI	✅ Passed	View run
Projects (Memex)	✅ Passed	View run
VRT	✅ Passed	View run

✨ All checks passed! Your integration PR is ready for review.