Component Menu, trigger event handler on MenuItem when MenuItem is activated

[dohaicuong]

With the current behavior, when user press enter or space on highlight menu item (keyboard navigation), the item will be activated and the menu is close hence onSelect is called on Menu.Root

Is there any way for me to trigger event on Menu.Item itself?

At the moment, passing onClick to Menu.Item works if user actually click on it,
but it's not trigger with keyboard enter or space.
I also tried onChange, onSelect and onKeyDown on Menu.Item but nothing got triggered.

[segunadebayo]

I suppose you can use the onSelectcallback to trigger and event on the item yourself.

function onSelect(details){
  const item = document.querySelector(`[data-value=${details.value}]`)
  item.click() // or item.dispatchEvent(new CustomEvent('itemselect', { details }))
}

[dohaicuong]

that's what I'm using at the moment, just wonder if there will be a fix to make this more straight forward to use