Listen when CommandItem is Highlighted

[orlandodiaz]

I want to conditionally render a different JSX based on whether the CommandItem is highlighted (not clicked). i.e mouse over or selected via using the arrow keys where we see the bg change

I don't see this being possible at the moment

Only thing I was able to find was doing something like this

[cmdk-item][data-selected] { outline: 1px solid black; }

but this only applies CSS. I want to conditionally apply different JSX and do more than just styling

[Lexachoc]

You can track the aria-selected or data-selected boolean values using MutationObserver.

I think the example in here could help. Which is the Model HoverCard showed in the Playground.

Then you may also need to check the [PR] (https://github.com/shadcn-ui/ui/pull/5382), which fixes the bugs of the implementation.

[gbertoncelli]

I need the same thing, there is no official way?