[BUG] - Autocomplete is not focused on click

[simPod]

NextUI Version

2.3.6

Describe the bug

When I click on autocomplete, it is not focused. It requires another click. Also click-outside event closes the menu but keeps the focus.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. https://nextui.org/docs/components/autocomplete#usage
2. click "select an animal"
3. menu opens but you can't type
4. click again
5. now you can type

---

1. https://nextui.org/docs/components/autocomplete#usage
2. click "select an animal"
3. menu opens but you can't type
4. click outside to cancel action
5. now you can type (???)

Expected behavior

1. https://nextui.org/docs/components/autocomplete#usage
2. click "select an animal"
3. menu opens, now you can type

Screenshots or Videos

Screen.Recording.2024-05-07.at.23.45.51.mov

Operating System Version

macos

Browser

Chrome

[linear]

ENG-803 [BUG] - Autocomplete is not focused on click

[jwald1]

"When the menuTrigger is set to input, the focus behavior becomes worse. Here's how the flow works:

1. The user clicks on the input field.

2. The user types one character.

3. The menu opens and the focus is lost.

4. The user needs to click on the input field again to continue typing.

This can be very confusing for users as they may continue to type without realizing that the menu has opened and the focus has been lost, resulting in the words not being typed.

[shoaibarif668]

Has anyone come up with a solution for this, its still reproducing on my end. The input looses focus as soon as the menu opens up.

[wingkwong]

@shoaibarif668 I'll wrap up the fix by today and will be released afterwards.

[GDamicoCenta]

@wingkwong Hi, friend. any news on this? I have the same problem :(

[Aryan-mor]

@wingkwong Hi, friend. any news on this? I have the same problem :(

It's already fixed, it will merge
#2854

[kevinvincent]

I am still seeing this issue using a brand new project with
npx nextui-cli@latest init nextuitest

[wingkwong]

@kevinvincent I couldn't reproduce the issue.

autocomplete-focus-demo.webm

[kevinvincent]

Had to upload the video as a zip due to size:
bug.mov.zip

This is from a completely new project with npx nextui-cli@latest init nextuitest using defaults. All I did was add the autocomplete. The first click opens in the dropdown, the second click focuses the input.

I also saw the same behavior in Chrome, the demo uses Safari though.

Interestingly, it works fine on https://nextui.org/docs/components/autocomplete for me!

[kevinvincent]

Hmm this seems to have magically fixed itself? Maybe this was some weird local next js / browser caching or something?