[BUG] - Autocomplete don't focus on input

[iPagar]

NextUI Version

2.4.1

Describe the bug

When I click on autocomplete it should focus on input

Your Example Website or App

https://codesandbox.io/p/sandbox/objective-nash-lff3pt

Steps to Reproduce the Bug or Issue

1. Copy code from https://nextui.org/docs/components/autocomplete#usage
2. Click on autocomplete
3. Input is not focused

Expected behavior

Input has to be focused as it shown at https://nextui.org/docs/components/autocomplete#usage

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-973 [BUG] - Autocomplete don't focus on input

[wingkwong]

seems it looks fine in local storybook but not in app.

[MarcoRodasW]

Same issue for me, i have autocompletes everywhere in the app 🥲

[MarcoRodasW]

@wingkwong Any temporary solution until it is fixed?

[daniel-esserweb]

This still not fixed in v2.4.2

[MarcoRodasW]

@daniel-esserweb Noup, I switched to version 2.2.9 until they fix it

[daniel-esserweb]

@daniel-esserweb Noup, I switched to version 2.2.9 until they fix it

I dont understand why, in the documentation is working since 2.4.0 i think, but in the application hasn't worked yet

[MarcoRodasW]

@daniel-esserweb Me neither, I tried different versions and only 2.29 and below worked for me.

[cnfw]

I do this temporary workaround to get around the autofocus issue, but it would only work for mouse clicks - keyboard users still need to be considered.

<Autocomplete
    onClick={(event) =>
        // @ts-expect-error the input doesn't automatically focus
        event.target.focus()
    }

>
// ...
</Autocomplete>

[kuri-sun]

@iPagar Thanks for the report!
Speaking of which, I also found a related bug for Autocomplete component so I will put it down here as well.
When an user try to remove chars from the input, the input will freeze 😞 (In the video, it's really hard to tell but I was pressing the key multiple times.)
These issues seem like happening only on local env(dev env) & sandbox env.
I will also try to take a look at these! Thanks again for reporting this issue! 👍

Screen.Recording.2024-06-18.at.1.09.58.AM.mov

[cedoromal]

I think it's the same issue as this one: #3124

It's possible that the focus on input is lost right after the selection is opened. I added a comment there for steps to reproduce the focus loss on input.

[daniel-esserweb]

Just a curiosity, it is very buggy in local development but in production it works fine

[wingkwong]

@daniel-esserweb it is due to react strict mode, which only happens in local development.

[MarcoRodasW]

@daniel-esserweb Does not work in production as well

[wingkwong]

@MarcoRodasW are you using 2.4.2? also can you share a minimal reproducible project?