ComboBox Does Not Highlight Selected Option

[designcise]

As you can see in the following example, when the ComboBox is open, it always highlights the first option in the list and not the selected one:

This seems to also be the case with the Command component. Is there a workaround to ensure that the correct/selected item is highlighted by default when the list is visible?

[brunocroh]

Here is an example of mine, as you can see the select one has an icon on the left.

This style that you are talking about is the cursor position, and it's happen because you can use keyboard arrow to select, and it shows the user what item is "hover"

Can you please share a reproducible example to try and help you with this?

[designcise]

I was referring to the "grey" background that highlights the first item always.. it gives the impression that the first item is active .. should the previously active item not be the one to have the grey background by default when the list is expanded?

Also, can you share the code you used to get the checkmark against the selected item? Thanks!

[Cauatn]

I was referring to the "grey" background that highlights the first item always.. it gives the impression that the first item is active .. should the previously active item not be the one to have the grey background by default when the list is expanded?

Also, can you share the code you used to get the checkmark against the selected item? Thanks!

I think he maybe do it something like this:

<CheckIcon className={cn( "ml-auto h-4 w-4", value === framework.value ? "opacity-100" : "opacity-0" )} />

You can also, check the code for the examples they put on shadcn-ui website in : https://ui.shadcn.com/docs/components/combobox

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[h-bijjou-binairy]

Also i'm having the same problem, i'm trying to highlight the selected item but rather when you open the PopoveContent you get the first element highlighted

[brunocroh]

Also i'm having the same problem, i'm trying to highlight the selected item but rather when you open the PopoveContent you get the first element highlighted

Go to your shadcn components folder on dropdown-menu.tsx file, remove these classNames focus:bg-accent focus:text-accent-foreground from DropdownMenuItem component.

If you want style when mouse hover, just change focus: to hover:

[minedun6]

This is not the dropdownMenuItem component issue. This is a specific in the cmdk package, it auto highlight the first item always. there is no specific way for now to highlight the selected item. Unless someone has a better alternative.