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

[c0d3rm0n]

NextUI Version

2.4.0

Describe the bug

Autocomplete inputs 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. I have this problem since v2.3. It works just fine in v2.2.10.

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-922 [BUG] - Autocomplete modal open action makes the input to loose focus

[c0d3rm0n]

Previous issue: 2849.

[wingkwong]

Can you provide a minimal reproducible example or a video for demonstration? also for "modal", are you referring the nextui modal or the autocomplete combobox?

[c0d3rm0n]

Can you provide a minimal reproducible example or a video for demonstration? also for "modal", are you referring the nextui modal or the autocomplete combobox?

I'm talking about the Autocomplete box where the options are rendered.

[wingkwong]

still please provide some code and a video for demonstration. I was lost in step 6.

[MinChanSike]

Same issue Steps to Reproduce the issue

1. Click in NextUI Autocomplete input
2. The input will not have focus
3. Click on input to get focus
4. Type "Cat" then press Arrow Down to select the item
5. Press Back, so only "Ca" is remain on input then model become active, loose focus

Please take a look in screen capture https://github.com/nextui-org/nextui/assets/2868221/0c3d7a74-ca40-4713-9979-0f447d1e5eaa

No issue in nextui website sample (left window)

[leonkelvan]

ok, i have this issue too. i just noticed that this issue wasn't there in the previous versions. when i click on the autocomplete it should open the list of items and at the same time the cursor should appear in the input box and if i type the items should be filtered. but right now when i click on the autocomplete the list opens but with no cursor. i have to hover the mouse on the list of items or click on the autocomplete for the second time then the cursor will appear. also when i start typing after one character again the cursor will disappear and i have to click on the autocomplete again. to make sure any part of my code isn't causing this issue, i created a new project. with only the necessary dependencies and installed the nextui and copied the exact code provided in the nextui documents but still the same exact issue. i had a backup. version 2.2.9 i checked it and it's working perfectly fine without no drama. i hope the team fix this issue as soon as possible. if you need more information feel free to ask. p.s. the example provided in the nextui documents doesn't have this issue !

[wingkwong]

@MinChanSike @leonkelvan can you guys try with 0.0.0-canary-20240607005641? I couldn't reproduce the issue on my canary branch.

[leonkelvan]

@MinChanSike @leonkelvan can you guys try with 0.0.0-canary-20240607005641? I couldn't reproduce the issue on my canary branch.

i installed this and the situation is the same as with the latest version of the component. until version 2.2.9 everything was ok but after that autocomplete is unusable

[wingkwong]

@leonkelvan can you try it on v2.4.2?

[leonkelvan]

@leonkelvan can you try it on v2.4.2?

sorry for the delay. it still is the same.

[wingkwong]

@leonkelvan can u tell are u using nextjs app or other frameworks? this issue is kinda weird as I couldn't reproduce on our storybook and doc.

[leonkelvan]

@leonkelvan can u tell are u using nextjs app or other frameworks? this issue is kinda weird as I couldn't reproduce on our storybook and doc.

yes i'm using the Next.js. is there a way that i could somehow create a situation that this happens here and then send it to you so you could try and see what's causing it ? let me know how can i be helpful. thanks

p.s. i think something happens at my end. cause like i mentioned before when i try the examples offered at the doc page of the nextui, this won't happen also this won't happen with older versions but here no matter what i do i ran into this issue with the latest versions. maybe i installed something here that cause this rare issue or something. anyway, if you think i can be helpful just let me know.

[cedoromal]

@wingkwong I have the same issue. For some reason, the bug doesn't appear on Storybook but it appears on CodeSandbox and on my dev environment. The links I added here are also the ones used in the docs. I tested this on Chromium Version 126.0.6478.62 (Official Build) (64-bit) downloaded and installed using scoop, but it also appears on my main browser (Brave v1.67.116).

Here are my steps to reproduce assuming you are using the CodeSandbox project that I linked:

1. Once project is running, click the Autocomplete component on the preview.
2. Notice that the selection will open, but input is not focused / no cursor on input. Expected behavior is focus/cursor on input with the selection open upon clicking the component.

Additional steps to see that input loses focus upon selection open:

1. Fork the sandbox.
2. Replace the return of the App function with something like this:

<Autocomplete>
      {["ABCDEFG", "ABC", "ABCDEF"].map((item) => (
          <AutocompleteItem key={item}>{item}</AutocompleteItem>
      ))}
</Autocomplete>

3. Save the changes and wait for it to reflect on the preview
4. Type "ABC" on the Autocomplete input
5. Notice that focus/cursor is still on the input, but selection closes automatically. (I'm not sure if that is expected behavior)
6. Type "D"
7. Notice that the selection will open, but the focus/cursor on input is lost. Expected behavior is focus/cursor on input is retained.

[wingkwong]

++@kuri-sun

[jsonMartin]

I'm 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]

[wingkwong]

@c0d3rm0n I tested on your codesandbox and was able to reproduce the issue. However, after I changed the version of @nextui-org/react from latest to 2.4.2, the issue is gone. Can you double check if you are really using the latest version (you may check the lock file)?

@jsonMartin I couldn't reproduce the issue you mentioned. Can you share a codesandbox?

[wingkwong]

Just FYI. For the missing focus on input after the first click, it is because of React strict mode. It won't happen in production environment. That's why it only happens in dev / local env. We're still investigating.

[jsonMartin]

Just FYI. For the missing focus on input after the first click, it is because of React strict mode. It won't happen in production environment. That's why it only happens in dev / local env. We're still investigating.

Ah that could be why, thanks. I only tested in Dev mode and not production build.

I can confirm that the version I listed above does not have this focus issue in Dev mode, but every version after did for me. Only downside I found rolling back to ealier version is then Autofocus parameter didn't work, but that was less of an issue for me than the focus bug.

I'll try to check the latest version with a prod build and see if it's still happening.

[cedoromal]

@c0d3rm0n I tested on your codesandbox and was able to reproduce the issue. However, after I changed the version of @nextui-org/react from latest to 2.4.2, the issue is gone. Can you double check if you are really using the latest version (you may check the lock file)?

I'm assuming you meant to tag me since I was the one who provided a codesandbox link.

I'm using individual components installed with npx nextui-cli@latest instead of @nextui-org/react on my project. I just checked if there's an update for Autocomplete and there is. I went from Autocomplete 2.1.1 to 2.1.2 just now and the issue disappeared. I might have barely missed the update when I tested this on my project since I started testing a couple of days before I wrote my report. The codesandbox linked on my comment (also the one linked on the docs) appears to be using Autocomplete 2.0.15 which I failed to check.

[wingkwong]

@cedoromal Yes. Sorry. I mixed up the names.

[c0d3rm0n]

Just FYI. For the missing focus on input after the first click, it is because of React strict mode. It won't happen in production environment. That's why it only happens in dev / local env. We're still investigating.

Yes. That is true. The v2.4.2 has that issue in development, but in production mode it works just fine. Thank you for your tip, wingkwong!