Skip to content

fix(autocomplete): set correct --trigger-width CSS variable on popover#6374

Open
wingkwong wants to merge 1 commit intov3.0.2from
fix/issue-6368
Open

fix(autocomplete): set correct --trigger-width CSS variable on popover#6374
wingkwong wants to merge 1 commit intov3.0.2from
fix/issue-6368

Conversation

@wingkwong
Copy link
Copy Markdown
Member

@wingkwong wingkwong commented Mar 30, 2026

Closes #6368

📝 Description

  • Fixes --trigger-width CSS variable being 0px on the Autocomplete popover, causing it to not match the trigger input width
  • The root cause is that React Aria's Select measures its ButtonPrimitive for --trigger-width, but in Autocomplete the ButtonPrimitive is only the small chevron indicator — not the full trigger. The actual trigger is a GroupPrimitive.
  • Adds a useResizeObserver in AutocompletePopover to measure the correct trigger element and override --trigger-width via an inline style

⛳️ Current behavior (updates)

Using the first example from Autocomplete storybook (width = 256px)

image

🚀 New behavior

Using the first example from Autocomplete storybook (width = 256px)

Image

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information
@wingkwong wingkwong added this to the v3.0.2 milestone Mar 30, 2026
@wingkwong wingkwong requested a review from jrgarciadev as a code owner March 30, 2026 15:13
@wingkwong wingkwong added the ♿ Scope: v3 Related to HeroUI v3 label Mar 30, 2026
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 30, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
heroui Ready Ready Preview, Comment Mar 30, 2026 3:14pm
heroui-sb Ready Ready Preview, Comment Mar 30, 2026 3:14pm

Request Review
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

♿ Scope: v3 Related to HeroUI v3

1 participant

@wingkwong