[Select] Different hover and focus state for Select.Item

[sarthakmalik0810]

Get help

I am trying to get different focus and hover states for Select.Item. Very similar to #2731

I am using data-highlighted and a combination of :hover state. Now when I select an option and the select menu closes, and when I open it again data-highlighted is applied on the selected option (or the last selected option for a multi select).

Screen.Recording.2025-11-20.at.9.18.22.PM.mov

I don't want the marker style on the selected item when I open the select again.

Here is a reproduction link - https://stackblitz.com/edit/19hu8jg4-tkjc2mzr?file=src%2FApp.tsx

Is there a better way to do this?

[atomiks]

I'm not 100% sure what you're trying to achieve and how the marker relates to differentiated hover and focus states.

Does Combobox's highlightItemOnHover prop solve the issue here?

[sarthakmalik0810]

I'm not 100% sure what you're trying to achieve and how the marker relates to differentiated hover and focus states.

Does Combobox's highlightItemOnHover prop solve the issue here?

Hello mate! What I am trying to achieve is different hover and focus states for Select.Item.

In my example, I have added the marker for the simulated focus states, and the appearance without the marker is for the hover state.

[atomiks]

Combobox solves the differentiated states with that prop I mentioned, but Select is missing it. It's straightforward to add it, and can be worth it to sync their APIs at least.