[ContextMenu] Native context menu incorrectly appears after second click

[davidkpiano]

Bug report

Current Behavior

Right-clicking a trigger twice will cause inconsistent behavior:

1. On first right click, the custom context menu appears 👍
2. On second right click, the native context menu appears instead ❌

https://user-images.githubusercontent.com/1093738/160920104-22efa939-7225-4c5f-9f9e-5945554ea377.mp4

Expected behavior

For the custom context menu to appear just like it does in the Radix documentation on every right click:

https://user-images.githubusercontent.com/1093738/160921175-fe448df1-b3fc-43c2-8a87-7f4b60dd1a5b.mp4

Reproducible example

https://codesandbox.io/s/quizzical-gwen-y1vsly?file=/src/App.tsx

Suggested solution

I'm not sure; is there a fundamental difference between the CodeSandbox repro (very minimal custom styling) and what Radix has in the example?

Additional context

We've seen this surface in https://stately.ai/editor (try right-clicking a state multiple times)

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-context-menu	0.1.6
React	n/a	18.0.0
Browser	Chrome	100
Assistive tech
Node	n/a
npm/yarn
Operating System

[benoitgrelard]

Hey @davidkpiano 👋

Thanks for reporting this, it seems like this is a new bug since React 18. If I downgrade to React 17 in your sandbox, it all works like in our docs too.

Can you confirm if you have upgraded to React 18 for stately.ai?

[davidkpiano]

Yes, we are on React 18.

[benoitgrelard]

Thanks for confirming, I've created a new label for react-18 related issues. We'll try and get to it as quickly as we can.

🙏

[benoitgrelard]

Now that we've updated the entire project to React 18, our cypress test actually caught it, so for now we've had to skip that specific test, but we should aim to re-enable it once fixed: https://github.com/radix-ui/primitives/pull/1048/files#diff-e2c4e750ca3d92eba090c7fafa585dc6c3d8063c3f5818dc94b99a8b73dffed4