How to handle right click events

[cd-a]

I want to build some components that react to right click events, and trigger an action menu for example.

Say I have a table, and right clicking on the table row would spawn a contextmenu with additional options.

I haven't seen any use of contextmenu here at all, so how would be the best case of going about it?

[snowystinger]

Hey! We do not yet have support for context menus. You should be able to implement your own using our Menu hooks though.

There are likely some accessibility issues around context menus that you'll need to read up on, https://stackoverflow.com/questions/29145435/are-custom-context-menu-accessible/29145586

A couple things I've quickly noticed are:

• Keyboard users may be excluded from context menus
• Touch screen users actually use a press and hold frequently to open a context menu
• Context menus have some problems because they aren't necessarily attached to anything

It seems to be good practice to include a physical button to cover all the cases which would make a right click a bit of a mouse power user only feature.

[cd-a]

Thanks for the input.

Yes, I agree with the accessibility issues of that, I might just reconsider this.

On the TableView there is the onAction event, which fires on doubleClick on Web, and on single tap on mobile. This seems like a nice way to implement it then.

However, what I try to do is show a Menu on the row on doubleClicking then. In the docs, the MenuTrigger is used, but I can't just wrap the whole Row into a MenuTrigger, as this throws.

I guess there must be a way to programatically open a menu on that row with the onAction callback, but I'm missing it. Is that possible?

[snowystinger]

I'm not sure wrapping the row or making the row or cell responsible for the menu is the best idea. I don't think role gridcell or role row can have the aria attributes aria-controls or aria-haspopup.

We've solved for this issue in React Spectrum by introducing a bulk action bar https://www.npmjs.com/package/@react-spectrum/actionbar it's in alpha right now, but works pretty well. You can check out the storybook examples we have in our repo to see how to use it. https://github.com/adobe/react-spectrum/tree/main/packages/%40react-spectrum/actionbar/stories

We also allow for menu triggers in table cells, you can see an example of this in our storybook as well https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/table/stories/CRUDExample.tsx

The onAction event for table is usually used to do something like navigate or open the item in a dialog, not a menu. See guidelines here https://react-spectrum.adobe.com/react-spectrum/TableView.html#row-actions

After that, I'd evaluate if you still need a context menu. I'm happy to tag one of our accessibility team members here if you have more questions or still must have the context menu.

[cd-a]

Thanks for the detailed rundown.

I will have a look and play a bit with the action bar to see how it works.

For the main, big tables there's no issue, I just have a few very small ones on the main 'dashboard' and will do some testing how this will fit in.

The main reason I was looking at context menu in the first place because those tables there are quite small, and horizontal space is very limited. Currently I'm showing an action button, but removing this would be great for the space issue, hence the thought of using contextmenu.

But I'll test this a bit and see how it goes :)