Callback for menuitem being activated?

[SevenOutman]

I wonder if there will be some kind of callback props on <Menu> and <Menu.Item> which fires when a menuitem is being acivated (clicked or pressed Enter/Space on).

// Callback on <Menu>
<Menu onActivateItem={event => console.debug('activate menuitem', event.target)}></Menu>

// Callback on <Menu.Item>
<Menu.Item onActivate={event => console.debug('activate menuitem', event.target)}></Menu.Item>

[RobinMalfait]

Hi!

You can use an onClick on your <Menu.Item/> which wil do the trick for you!

[SevenOutman]

I just found it ambiguous to use onClick as onActivate on <Menu.Item>.

It's not documented that <Menu.Item> has a onClick prop just for the activate callback, nor that it will pass all other props down to the element returned from render prop.

In the example below, users don't know whether and why onClick on the <button> will be overridden.

<Menu.Item onClick={unexpectedlyAddedCallback}>
  {() => (
    <button onClick={runCommand}>Menu item</button>
  )}
</Menu.Item>

IMO it should be documented why onClick can be used like this, otherwise there should be a dedicated callback prop for activation on <Menu.Item> other than native ones.