how to get the focused menu-item of dropdown-menu

[IamFive]

Hi, I am new with radix-ui. I read the document of dropdown-menu, it says that if a menu-item is focused, a data-highlighted attribute will present, but still confused, how can we get this highlighted(focused) menu-item in code?

[joaom00]

Hi @IamFive, welcome in!

The data-highlighted attribute is intended for style purpose only so you will use this in the CSS side. Or you want to know the focused item in the JS side?

[IamFive]

I want to get the current focused(actived/highlighted) menu-item in the JS side. like i find there was a "onSelect" callback on Item, but i did not find a "onFocus/onHighlighted" somewhere. only a data-highlighted which I do not know how to use it for my intent.

And I have a suggestion which maybe wrong that, may we have "onSelect" on some root element like "Root" or "Portal" , and add an attribute like key/data-id on item, so user can handle select action simple one place.

[joaom00]

I want to get the current focused(actived/highlighted) menu-item in the JS side.

What's your use case?

And I have a suggestion which maybe wrong that, may we have "onSelect" on some root element like "Root" or "Portal" , and add an attribute like key/data-id on item, so user can handle select action simple one place.

Hmm, looks like you are after a select? because a dropdown menu doesn't hold a value, so this kind of prop doesn't make much sense

[IamFive]

What's your use case?

• I hope we can add some preview action when a menu-item is focused. for a common example: a dropdown have menu options: red, 'blue, green` which will be apply to an object's skin color. when user focus on the menu, we hope user can get a preview of that.
• we hope when dropdown opens, it may auto active preview selected or first menu-item like a html select
• we hope at anytime, there must have an actived(focused) item that can tell user if press enter button, which menu-item will be selected.
• we hope even mouse move out of the dropdown menu panel, there still has this last focused menu-item actived

basicly, i want to change some behaviors, and if i can control/get current focused menu-item, everything will be easy.

Hmm, looks like you are after a select? because a dropdown menu doesn't hold a value, so this kind of prop doesn't make much sense

yes, my intent is pretty like a combine of select and dropdown, it has state.

[joaom00]

basicly, i want to change some behaviors, and if i can control/get current focused menu-item, everything will be easy.

There is no way to control the selected item but you can pass onFocus to the Item

[IamFive]

do you mean i can add a onfocus event handle to DropdownMenu.Item ? I have try that, but it seems it's not triggered.

[joaom00]

It's working here https://codesandbox.io/p/sandbox/distracted-bardeen-jvdhpq?file=%2FApp.jsx%3A1%2C1

[IamFive]

my bad, i use onfocus.