Skip to content
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 - highlight item on key events #3713

Closed
galaxytemple opened this issue Sep 4, 2024 · 2 comments · Fixed by #3726
Closed

[BUG] - Autocomplete - highlight item on key events #3713

galaxytemple opened this issue Sep 4, 2024 · 2 comments · Fixed by #3726
Labels
📦 Scope : Components Related to the components 🐛 Type: Bug Something isn't working

Comments

@galaxytemple
Copy link

galaxytemple commented Sep 4, 2024

NextUI Version

@nextui-org/autocomplete@2.1.5

Describe the bug

When using ,AutocompleteSection it doesn't highlight an item on key event (up, down)

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

  1. Use AutocompleteSection on Autocomplete
  2. Click Autocomplete and open list
  3. enter down key
  4. enter down key
  5. doesn't highlight neither the first and second item
  6. however when entering 'enter' key, it select the second item

Expected behavior

highlight item on key event

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

Copy link

linear bot commented Sep 4, 2024

@galaxytemple
Copy link
Author

data-hover="true" is not set, when using AutocompleteSection.
temporarily can use

ul[role="listbox"] li[role="option"][data-focus="true"] {
  --tw-text-opacity: 1;
  color: hsl(
    var(--nextui-default-foreground) /
      var(--nextui-default-foreground-opacity, var(--tw-text-opacity))
  );
}

ul[role="listbox"] li[role="option"][data-focus="true"] {
  --tw-bg-opacity: 1;
  background-color: hsl(
    var(--nextui-default) / var(--nextui-default-opacity, var(--tw-bg-opacity))
  );
}

@wingkwong wingkwong changed the title [BUG] - Autocomplete [BUG] - Autocomplete - highlight item on key events Sep 5, 2024
@wingkwong wingkwong added 🐛 Type: Bug Something isn't working 📦 Scope : Components Related to the components labels Sep 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📦 Scope : Components Related to the components 🐛 Type: Bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants