fix(autocomplete): auto-selection on blur when input is empty#5432
Closed
adi-ray wants to merge 7 commits into
Closed
fix(autocomplete): auto-selection on blur when input is empty#5432adi-ray wants to merge 7 commits into
adi-ray wants to merge 7 commits into
Conversation
🦋 Changeset detectedLatest commit: b628b16 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
|
@adi-ray is attempting to deploy a commit to the HeroUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
WalkthroughA patch was applied to the autocomplete component to change its behavior when the input field loses focus. Now, if the input is empty and the dropdown is open, no autocomplete option is selected upon blur, resolving an accessibility bug where tabbing away would previously select the top option. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant InputField
participant AutocompleteDropdown
User->>InputField: Blur (tab away)
InputField->>AutocompleteDropdown: Check if open and input is empty
alt Input is empty and dropdown is open
AutocompleteDropdown-->>InputField: Clear focused and selected key
else Input is not empty or dropdown closed
AutocompleteDropdown-->>InputField: No change to selection
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes identified. Possibly related PRs
Suggested reviewers
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
Documentation and Community
|
adi-ray
changed the title
adi-ray
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
.changeset/clever-bikes-pull.md(1 hunks)packages/components/autocomplete/src/use-autocomplete.ts(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: TypeScript
- GitHub Check: Continuous Release
- GitHub Check: Build
- GitHub Check: ESLint
🔇 Additional comments (3)
packages/components/autocomplete/src/use-autocomplete.ts (3)
354-356: Good optimization to prevent unnecessary focus updates.The early return when the dropdown is closed prevents unnecessary focus management operations, improving performance and avoiding potential side effects.
375-375: Correctly updated dependency array to include state.isOpen.Adding
state.isOpento the dependency array ensures the effect properly responds to dropdown open/close state changes, which is essential for the early return logic added above.
484-516: Excellent fix for the accessibility issue with proper fallback handling.The onBlur override correctly addresses the auto-selection problem by:
- Clearing focused key when input is empty and dropdown is open
- Clearing selected key if one exists
- Preserving and calling the original onBlur handler
This ensures keyboard users can leave optional autocomplete inputs empty without unwanted auto-selection, fixing the accessibility barrier described in issue #5396.
@heroui/accordion
@heroui/alert
@heroui/autocomplete
@heroui/avatar
@heroui/badge
@heroui/breadcrumbs
@heroui/button
@heroui/calendar
@heroui/card
@heroui/checkbox
@heroui/chip
@heroui/code
@heroui/date-input
@heroui/date-picker
@heroui/divider
@heroui/drawer
@heroui/dropdown
@heroui/form
@heroui/image
@heroui/input
@heroui/input-otp
@heroui/kbd
@heroui/link
@heroui/listbox
@heroui/menu
@heroui/modal
@heroui/navbar
@heroui/number-input
@heroui/pagination
@heroui/popover
@heroui/progress
@heroui/radio
@heroui/ripple
@heroui/scroll-shadow
@heroui/select
@heroui/skeleton
@heroui/slider
@heroui/snippet
@heroui/spacer
@heroui/spinner
@heroui/switch
@heroui/table
@heroui/tabs
@heroui/toast
@heroui/tooltip
@heroui/user
@heroui/react
@heroui/system
@heroui/system-rsc
@heroui/theme
@heroui/use-aria-accordion
@heroui/use-aria-accordion-item
@heroui/use-aria-button
@heroui/use-aria-link
@heroui/use-aria-modal-overlay
@heroui/use-aria-multiselect
@heroui/use-aria-overlay
@heroui/use-callback-ref
@heroui/use-clipboard
@heroui/use-data-scroll-overflow
@heroui/use-disclosure
@heroui/use-draggable
@heroui/use-form-reset
@heroui/use-image
@heroui/use-infinite-scroll
@heroui/use-intersection-observer
@heroui/use-is-mobile
@heroui/use-is-mounted
@heroui/use-measure
@heroui/use-pagination
@heroui/use-real-shape
@heroui/use-ref-state
@heroui/use-resize
@heroui/use-safe-layout-effect
@heroui/use-scroll-position
@heroui/use-ssr
@heroui/use-theme
@heroui/use-update-effect
@heroui/use-viewport-size
@heroui/aria-utils
@heroui/dom-animation
@heroui/framer-utils
@heroui/react-rsc-utils
@heroui/react-utils
@heroui/shared-icons
@heroui/shared-utils
@heroui/stories-utils
@heroui/test-utils
commit: |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
wingkwong
requested changes
Jul 5, 2025
Member
wingkwong
left a comment
wingkwong
left a comment
There was a problem hiding this comment.
- Please include a new test to cover the logic you added
- Focus ring is gone in your PR after the first tab (see below screenshot)
- The label and the cursor are overlapping after the first tab (see below screenshot)
Your PR:
Production:
- Address label positioning issues during focus transitions
…away from empty input
|
Sorry to nag, but I'm really looking forward to having this change be shipped. Is there an update on this? |
wingkwong
requested changes
Jul 28, 2025
Member
wingkwong
left a comment
wingkwong
left a comment
There was a problem hiding this comment.
This PR will alter the existing focusing the first non-disabled item behaviour.
Expected:
- press tab
- autocomplete is focused
- listbox is shown with the first non-disabled item highlighted (your PR broke here)
- press tab again
- autocomplete is closed
- no value will be set in autocomplete
Member
|
@adi-ray May I know if there is any update on this PR? |
Member
|
Closing - inactivity |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #5396
📝 Description
Fixed a bug where tabbing away from an empty Autocomplete input would automatically select the top option instead of leaving the input empty. This was causing accessibility issues for keyboard users who couldn't leave optional inputs empty.
⛳️ Current behavior (updates)
🚀 New behavior
💣 Is this a breaking change (Yes/No):
No - This is a bug fix that corrects unintended behavior. The change makes the component behave as users would expect and improves accessibility without breaking existing functionality.
Summary by CodeRabbit