radix-ui
[ContextMenu] An open ContextMenu does not move after right clicking somewhere else
Bug report
Current Behavior
I am wrapping a table row with a context menu trigger. On the first right-click, the context menu is opened and anchored next to my pointer. If I right-click a second time in a different location, the context menu re-opens anchored to where i first clicked (not where I right-clicked the 2nd time).
This differs from the native context menu behavior- and the behavior I would expect.
Expected behavior
Anytime I right-click, the context menu should be anchored next to the current right-click location.
Reproducible example
In this example: https://codesandbox.io/p/sandbox/xenodochial-minsky-fp4tmf
There is a table with 3 rows. The first row has a radix-ui context menu. The other rows use a native context menu.
Notice that each time you right-click on the 2nd and 3rd row, the native context menu updates to the latest position.
Suggested solution
I haven't looked at the code closely yet, but want to see how these refs are used: https://github.com/radix-ui/primitives/blob/c31c97274ff357aea99afe6c01c1c8c58b6356e0/packages/react/context-menu/src/ContextMenu.tsx#L97-L100
Additional context
I found someone already logged a bug here: https://github.com/radix-ui/themes/issues/147
(so I copied the title when logging this issue)
Your environment
| Software | Name(s) | Version |
|---|---|---|
| Radix Package(s) | @radix-ui/themes | 2.0.3 |
| React | n/a | 18 |
| Browser | firefox | 121.0 |
| Assistive tech | ||
| Node | n/a | 20.1.0 |
| npm/yarn | npm | 9.6.4 |
| Operating System | macos | 14.2.1 |
I experience the exact same issue. I use next js and shadcn-ui context menu. Exactly same bug. I didn't use table. Just normal div can trigger this bug already. Is there anyone can kindly help have a look? Thanks!!
It seems the issue is due to having an exit animation, we have an example without exit animation in our storybook and it behaves fine: https://601857eb614bae0021c9b9dd-evgfcrkbbq.chromatic.com/?path=/story/components-contextmenu--multiple
So you could try that.
I'm also not sure the native UX is great, as when doing another click, it has to wait for the exit fade, thus delaying opening at the new position, it feels worse as a user.
I experience the exact same issue. I use next js and shadcn-ui context menu. Exactly same bug. I didn't use table. Just normal div can trigger this bug already. Is there anyone can kindly help have a look? Thanks!!
Just remove data-[state=closed]:animate-out in your ContextMenuContent component
