-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[BUG] - Autocomplete is not focused on click #2962
Comments
"When the
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. |
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. |
@shoaibarif668 I'll wrap up the fix by today and will be released afterwards. |
@wingkwong Hi, friend. any news on this? I have the same problem :( |
It's already fixed, it will merge |
I am still seeing this issue using a brand new project with |
@kevinvincent I couldn't reproduce the issue. autocomplete-focus-demo.webm |
Had to upload the video as a zip due to size: This is from a completely new project with 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! |
Hmm this seems to have magically fixed itself? Maybe this was some weird local next js / browser caching or something? |
Issue is still reproduceable. I have to click twice to focus input. I tried both installation types: CLI and manual. Windows 10 CLI - autocomplete version: Manual - nextui version: autofocus-issue.mp4 |
@NikitaDen please provide a minimal reproducible example. |
@wingkwong Basically copied example from the docs for Project created via CLI using Vite. Autocomplete has been installed via App.tsx file: import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
{label: "Elephant", value: "elephant", description: "The largest land animal"},
{label: "Lion", value: "lion", description: "The king of the jungle"},
{label: "Tiger", value: "tiger", description: "The largest cat species"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}
];
export default function App() {
return (
<div className="flex w-full flex-wrap md:flex-nowrap gap-4">
<Autocomplete
label="Select an animal"
className="max-w-xs"
>
{animals.map((animal) => (
<AutocompleteItem key={animal.value} value={animal.value}>
{animal.label}
</AutocompleteItem>
))}
</Autocomplete>
<Autocomplete
label="Favorite Animal"
placeholder="Search an animal"
className="max-w-xs"
defaultItems={animals}
>
{(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
</Autocomplete>
</div>
);
} main.tsx file: import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import {NextUIProvider} from '@nextui-org/react'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<NextUIProvider>
<App />
</NextUIProvider>
</React.StrictMode>,
) |
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
Expected behavior
Screenshots or Videos
Screen.Recording.2024-05-07.at.23.45.51.mov
Operating System Version
macos
Browser
Chrome
The text was updated successfully, but these errors were encountered: