Add onClick/onPress to MenuItem

[jhowell-droit]

Hi,

I am using React Aria's Menu component to build a popover style menu in my design system. When using it in an application, we need to be able to trigger Javascript when certain menu items are clicked. I notice that there is an onAction method for the Menu component itself but that suggests an event which fires when any of the items are clicked. I would like to be able to effectively add an onClick or onPress event to the individual MenuItems in order to apply different actions to each one. Is this possible? I am wrapping the MenuItem component in my own React component so I have tried spreading an onClick event into the props but this didn't work.

Any help would be much appreciated,

Thanks

[snowystinger]

Please see discussion here #5058 (reply in thread)

[jhowell-droit]

So is this not possible at the moment? It sounds like (from reading the above) the suggested method is to use onAction. If I'm going to do this could you recommend the best way of getting access to the item that has been clicked? I'm thinking I'll need to do something along the lines of:

<Menu onAction={(key) => {
    const clickedItem = ????
    if (clickedItem.onClick){
        clickedItem.onClick();
    }
}}>...
</Menu>

[snowystinger]

not as you're describing, but you could pretty easily do something like this
https://codesandbox.io/p/sandbox/friendly-rubin-399p9n?file=%2Fsrc%2FApp.js%3A31%2C27
and to speed it up, you could store the ids with the callback in a map instead of having to iterate over the whole collection each time

[joshsalverda]

Approaching it this way you end up losing the original event info.

Maybe it's not a huge deal in most cases, but our team ran into this issue recently where it would be super useful to support onPress. We want to show a "ripple" effect, so we need to know the x/y coordinates of the event to display it correctly.

Would it be reasonable to add onPress for that use case? Or could the original event be passed to onAction somehow?

[LFDanLu]

So we discussed this a bit today and we believe the event can't be passed to onAction because onAction will fire at different points (press start vs press end) depending on your interaction modality (touch vs mouse vs keyboard). We could consider adding onPressStart/onPressEnd to the MenuItem but we were worried that it would be confusing to users why those existed alongside onAction. It definitely feels like we need a separate event here though and we definitely agree that this is a use case we'd want to support, just trying to figure out how best to do so.

[schurchleycci]

I'm wondering if there's any updates here? The specific use case I'm looking at is adding event tracking to a MenuItem that has an href passed to it. With a Link, I can add the event tracking function to onPress and it gets called correctly, but when I try adding it to onAction in a MenuItem with an href it doesn't get called.

[snowystinger]

No updates, this is not a priority for us at this time. If it's important to you, the fastest way to get priority is to make a contribution. https://react-spectrum.adobe.com/contribute.html#pull-requests
Note, this would count as a major contribution and so we'd want to see an RFC detailing how this would work alongside onAction

we were worried that it would be confusing to users why those existed alongside onAction

[schurchleycci]

Thanks for the update! Totally get the concern around the confusion, it's definitely a tricky problem.

[LisaRyrholm]

I can see an onAction on the MenuItem. And it also gets triggered when the href is navigated.
Sadly for me it is not triggered when a submenu is opened. And thats what I am looking for for adding a javascript. So I think your problem may work now.

[snowystinger]

linking #8254 about submenu's, for now we'll keep the two discussions separate

[devongovett]

Update: this was added in React Aria Components v1.11.0. MenuItem now supports press events (e.g. onPress), as well as other DOM events like onClick etc.

[schurchleycci]

Awesome, thank you for the update @devongovett!