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.