fix(autocomplete): ensure focused item matches selected item after filter, selection #5290

KumJungMin · 2025-05-11T12:52:35Z

Closes #5277

📝 Description

Fixes an issue in the Autocomplete component where the focused item in the dropdown did not respect a selected value (via filtering, defaultValue, or the selectedKey prop).

⛳️ Current behavior (updates)

On first focus (e.g., via Tab), the dropdown always focuses the first non-disabled item, even if another item is already selected.
Immediate keyboard navigation (Tab or arrow keys) can unexpectedly change the user’s selection away from their chosen item.

prev.mov

< video: the dropdown always focuses the first non-disabled item. (tab mode) >

🚀 New behavior

When the component receives focus and a valid item is selected, focus is set to that selected item.
If the selected item is missing or disabled, focus falls back to the first non-disabled item.
Keyboard navigation now begins from the contextually correct item, improving accessibility and usability.

after-1.mov

< video: focus is set to that selected item.(tab mode) >

after-2.mov

< video: focus is set to that selected item. (props change mode) >

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

No
: This change corrects unintended focus behavior and aligns the component with expected accessibility patterns without impacting existing integrations.

📝 Additional Information

The fix updates the useEffect hook dependencies (state.collection, state.disabledKeys, state.selectedKey) and calls state.selectionManager.setFocusedKey(keyToFocus) to apply the correct focus.
Scroll synchronization to the focused item when the popover opens is not included in this PR, as it was deemed out of scope for this issue.

Summary by CodeRabbit

Bug Fixes
- Improved focus behavior in autocomplete so that the currently selected item is focused when available and enabled, enhancing usability and navigation.
Tests
- Added new tests to verify focused item behavior in various selection and interaction scenarios, ensuring consistent user experience.

…lter, selection

changeset-bot · 2025-05-11T12:52:39Z

🦋 Changeset detected

Latest commit: 68e3335

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

This PR includes changesets to release 2 packages

Name	Type
@heroui/autocomplete	Patch
@heroui/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

vercel · 2025-05-11T12:52:40Z

@KumJungMin is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2025-05-11T12:52:42Z

"""

Walkthrough

The code modifies the effect responsible for setting the focused key in the autocomplete component. Now, the focused key prioritizes the currently selected item if it exists, is present, and not disabled. If not, it defaults to the first non-disabled item. The effect also now depends on changes to the selected key.

Changes

File(s)	Change Summary
packages/components/autocomplete/src/use-autocomplete.ts	Updated focus logic to prioritize selected item if valid; adjusted effect dependencies to include selected key.
packages/components/autocomplete/tests/autocomplete.test.tsx	Added tests verifying focused key behavior with selected key under various conditions, including keyboard and form default values.
.changeset/clean-seahorses-cheat.md	Added changeset documenting patch update for autocomplete reflecting focused item matching selected item.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant AutocompleteComponent
    participant State

    User->>AutocompleteComponent: Selects or filters item / sets default value
    AutocompleteComponent->>State: Updates selectedKey
    State-->>AutocompleteComponent: Notifies selectedKey change
    AutocompleteComponent->>AutocompleteComponent: Effect runs on selectedKey change
    alt Selected item exists, present, and not disabled
        AutocompleteComponent->>State: Set focusedKey to selectedKey
    else
        AutocompleteComponent->>State: Set focusedKey to first non-disabled item
    end

Assessment against linked issues

Objective	Addressed	Explanation
Focused item matches selected item after filtering or setting default value (#5277)	✅
"""

Tip

⚡️ Faster reviews with caching

CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.

Enjoy the performance boost—your workflow just got faster.

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f4784db and 68e3335.

📒 Files selected for processing (2)

.changeset/clean-seahorses-cheat.md (1 hunks)
packages/components/autocomplete/src/use-autocomplete.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

.changeset/clean-seahorses-cheat.md
packages/components/autocomplete/src/use-autocomplete.ts

⏰ Context from checks skipped due to timeout of 90000ms (4)

GitHub Check: ESLint
GitHub Check: Continuous Release
GitHub Check: TypeScript
GitHub Check: Build

✨ Finishing Touches

📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

pkg-pr-new · 2025-05-11T12:58:47Z

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5290

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5290

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5290

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5290

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5290

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5290

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5290

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5290

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5290

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5290

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5290

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5290

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5290

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5290

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5290

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5290

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5290

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5290

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5290

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5290

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5290

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5290

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5290

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5290

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5290

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5290

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5290

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5290

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5290

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5290

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5290

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5290

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5290

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5290

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5290

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5290

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5290

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5290

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5290

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5290

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5290

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5290

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5290

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5290

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5290

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5290

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5290

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5290

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5290

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5290

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5290

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5290

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5290

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5290

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5290

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5290

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5290

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5290

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5290

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5290

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5290

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5290

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5290

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5290

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5290

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5290

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5290

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5290

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5290

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5290

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5290

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5290

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5290

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5290

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5290

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5290

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5290

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5290

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5290

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5290

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5290

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5290

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5290

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5290

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5290

commit: 68e3335

vercel · 2025-05-11T13:51:41Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
heroui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 13, 2025 1:08pm
heroui-sb	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 13, 2025 1:08pm

wingkwong

please add a changeset
please include a test

packages/components/autocomplete/src/use-autocomplete.ts

KumJungMin · 2025-05-13T03:29:05Z

please add a changeset

please include a test

@wingkwong

1I've added a changeset: (f4784db)
2.I've also included a test :) : (e50f1ec)

.changeset/clean-seahorses-cheat.md

packages/components/autocomplete/src/use-autocomplete.ts

fix(autocomplete): ensure focused item matches selected item after fi…

5db1825

…lter, selection

KumJungMin requested a review from jrgarciadev as a code owner May 11, 2025 12:52

wingkwong added this to the v2.7.9 milestone May 11, 2025

wingkwong assigned wingkwong and unassigned wingkwong May 11, 2025

wingkwong self-requested a review May 11, 2025 13:52

vercel bot deployed to Preview – heroui-sb May 11, 2025 13:53 View deployment

wingkwong requested changes May 11, 2025

View reviewed changes

packages/components/autocomplete/src/use-autocomplete.ts Outdated Show resolved Hide resolved

packages/components/autocomplete/src/use-autocomplete.ts Outdated Show resolved Hide resolved

wingkwong assigned KumJungMin May 11, 2025

wingkwong added the 🚧 Status: Changes Requested label May 11, 2025

vercel bot deployed to Preview – heroui May 11, 2025 13:55 View deployment

KumJungMin added 4 commits May 12, 2025 11:43

chore: apply type and default value

eacecb7

chore: add perpose coment in updated code

04c317b

test: add focuskey management testcode

e50f1ec

docs: add changeset

f4784db

KumJungMin requested a review from wingkwong May 13, 2025 03:29

wingkwong requested changes May 13, 2025

View reviewed changes

.changeset/clean-seahorses-cheat.md Outdated Show resolved Hide resolved

.changeset/clean-seahorses-cheat.md Outdated Show resolved Hide resolved

packages/components/autocomplete/src/use-autocomplete.ts Outdated Show resolved Hide resolved

KumJungMin added 2 commits May 13, 2025 20:54

docs: update changeset

1fa4119

chore: remove comment

68e3335

KumJungMin requested a review from wingkwong May 13, 2025 11:56

wingkwong removed the 🚧 Status: Changes Requested label May 13, 2025

wingkwong unassigned KumJungMin May 13, 2025

vercel bot deployed to Preview – heroui May 13, 2025 13:06 View deployment

wingkwong approved these changes May 13, 2025

View reviewed changes

wingkwong assigned jrgarciadev May 13, 2025

vercel bot deployed to Preview – heroui-sb May 13, 2025 13:08 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(autocomplete): ensure focused item matches selected item after filter, selection #5290

fix(autocomplete): ensure focused item matches selected item after filter, selection #5290

Uh oh!

KumJungMin commented May 11, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented May 11, 2025 •

edited

Loading

Uh oh!

vercel bot commented May 11, 2025

Uh oh!

coderabbitai bot commented May 11, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

Uh oh!

pkg-pr-new bot commented May 11, 2025 •

edited

Loading

Uh oh!

vercel bot commented May 11, 2025 •

edited

Loading

Uh oh!

wingkwong left a comment

Uh oh!

Uh oh!

Uh oh!

KumJungMin commented May 13, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fix(autocomplete): ensure focused item matches selected item after filter, selection #5290

Are you sure you want to change the base?

fix(autocomplete): ensure focused item matches selected item after filter, selection #5290

Uh oh!

Conversation

KumJungMin commented May 11, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

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

📝 Additional Information

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented May 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented May 11, 2025

Uh oh!

coderabbitai bot commented May 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Assessment against linked issues

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

Uh oh!

pkg-pr-new bot commented May 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented May 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wingkwong left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

KumJungMin commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

KumJungMin commented May 11, 2025 •

edited by coderabbitai bot

Loading

changeset-bot bot commented May 11, 2025 •

edited

Loading

coderabbitai bot commented May 11, 2025 •

edited

Loading

pkg-pr-new bot commented May 11, 2025 •

edited

Loading

vercel bot commented May 11, 2025 •

edited

Loading

KumJungMin commented May 13, 2025 •

edited

Loading