[BUG] - Autocomplete modal open action makes the input to loose focus

[c0d3rm0n]

NextUI Version

2.3.5

Describe the bug

Since release 2.3.0 I'm having issues to work with Autocomplete inputs as they loose focus when its modal (options list) opens. This happens by click or using Tab... Even if I click again in the input area to get focus, as soon as I type something that makes my lookup return [ ] as a result of options, the modal closes, and when I delete part of the string so the options returned include my search, when the modal re-opens, the input looses focus once more.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Click in NextUI Autocomplete input
2. The input will not have focus
3. Click again to get focus and type something (let's use animals as example: bird)
4. It returns 1 option
5. Type another 'd' to make it return [ ] from its lookup
6. The modal closes
7. Delete the last 'd'
8. The options returned will be ['bird'], This makes the modal to re-open and the input looses focus

Expected behavior

The user should be able to click and type in Autocomplete while maintaining focus on the input.

Screenshots or Videos

No response

Operating System Version

Ubuntu 22.04.4 LTS

Browser

Firefox

[linear[bot]]

ENG-717 [BUG] - Autocomplete modal open action makes the input to loose focus

[Fjohn666]

I have the same bug and it is very annoying ...I will need to rollback in 2.2.10 ....

[c0d3rm0n]

I installed v2.4.0 but I still have the same problem... If you click on the input it doesn't get focus, or takes quite sometime (it happened 2 or 3 times... strange...) and if you follow the same steps as I described in this issue, it will loose focus every time that the modal opens

[jvmartins]

Ok, annoying hack but it seems to work for me.

Add this to your Autocomplete element

<Autocomplete
...
onClick={(e) => (e.target as HTMLInputElement).focus()}
...

[jsonMartin]

I'm also having this same issue. After typing in 1 character, the popup steals focus from the text box, making the user have to click back into the input box to continue typing.

It's a really bad user experience, so until this is fixed I'm rolling back to the last working version where this doesn't happen: @nextui-org/[email protected]

[D0odi]

I'm also having this same issue. After typing in 1 character, the popup steals focus from the text box, making the user have to click back into the input box to continue typing.

It's a really bad user experience, so until this is fixed I'm rolling back to the last working version where this doesn't happen: @nextui-org/[email protected]

Thank you, fixed my issue

[chrisdueck]

How come this is closed? I came across this problem yesterday in 2.4.2 and having looked at this and related issues (e.g. https://github.com/nextui-org/nextui/issues/2962) I'm not the only one struggling with losing focus on this component.

I've tried various workarounds people have posted which have produced very minimal improvements, but really the only way I've gotten it working perfectly is downgrading as suggested by @jsonMartin.

I may have a go at fixing this myself if no one else is doing it.

[wingkwong]

@chrisdueck you may check out if canary version solves your problem. Some users reported that they can still the issue if they turn on react strict mode (which only affects development mode only). I've made a PR and it will be included in the next bug fix release v2.4.3 which is coming soon. If it still fails, please create a new issue with a minimal reproducible example. Thanks.

[vivekagr]

Having a ref on Autocomplete and this callback solved the issue for me

        onOpenChange={(isOpen) => {
          if (isOpen) {
            setTimeout(() => ref.current.focus(), 50);
          }
        }}