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] (shadcn-ui/ui#5382), which fixes the bugs of the implementation.