feat(autocomplete): automatically focus first non-disabled item

[juliesaia]

📝 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

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: b618ac497161ada420a45b8073d26ed1f551c99b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
nextui-storybook-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 31, 2023 8:32am

[vercel[bot]]

@juliesaia is attempting to deploy a commit to the NextUI Team on Vercel.

A member of the Team first needs to authorize it.

[jsonMartin]

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?

[gumgumalan]

How do I implement this locally? Thanks.

[jsonMartin]

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 focus on the DOM element to achieve this. Here's an example:

// 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])

[dg-essertech]

I think this could be and awesome feature @wingkwong