feat(autocomplete): automatically focus first non-disabled item #2186
Conversation
🦋 Changeset detectedLatest commit: 1bb0a62 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 |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@juliesaia is attempting to deploy a commit to the NextUI Team on Vercel. A member of the Team first needs to authorize it. |
|
Nice, I'd really like this feature implemented! I wrote my own logic to handle this in an app I'm working on, but it's cumbersome and it would be really great to have this working out of the box. Any updates on getting this merged? |
|
How do I implement this locally? Thanks. |
Hi @gumgumalan , since this feature isn't baked in, I personally created a hook to watch for every time the Autocomplete is opened and then manually invoke // AutoFocus on the NextUI search input when the modal opens
useEffect(() => {
if (!isOpen) return
setTimeout(() => {
const element: HTMLElement | null = document.querySelector(*ADD DOM REF HERE*)
if (!element) console.warn('Not available for autofocus')
else element?.focus()
}, 10)
}, [isOpen, label]) |
|
I think this could be and awesome feature @wingkwong |
|
Caution Review failedThe pull request is closed. WalkthroughThe changes introduce functionality in the Changes
Possibly related PRs
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
packages/components/autocomplete/src/use-autocomplete.ts (1)
320-328: LGTM! Consider a minor optimization.The implementation correctly focuses on the first non-disabled item when the collection or disabled keys change. This aligns well with the PR objective of automatically focusing the first selectable item.
Consider using
state.collection.getFirstKey()with a predicate function to simplify the logic:- let key = state.collection.getFirstKey(); - - while (key && state.disabledKeys.has(key)) { - key = state.collection.getKeyAfter(key); - } + let key = state.collection.getFirstKey(key => !state.disabledKeys.has(key)); state.selectionManager.setFocusedKey(key);This approach is more declarative and potentially more efficient, as it leverages the collection's internal structure to find the first non-disabled key in a single pass.
📝 Description
Automatically focus the first selectable item in
<Autocomplete />⛳️ Current behavior (updates)
Autocomplete doesn't really work as an autocomplete because you have to hover/click/press an arrow key to focus and element.
🚀 New behavior
This PR makes the first non-disabled item automatically focus any time the item list changes.
💣 Is this a breaking change (Yes/No):
Not really, honestly feels like more of a bug fix but I still called it a feature
📝 Additional Information
Summary by CodeRabbit
New Features
Bug Fixes