[Menu] Fix context menu open position

[oliviertassinari]

Solve one part of https://twitter.com/rsms/status/1522583516265029633 "is the first item perfectly aligned 1px adjacent to the pointer hit pixel?" a point made by rsms. At least, it's how macOS 12, Windows 11, and Figma behave.

Before

https://mui.com/material-ui/react-menu/#context-menu

After

https://deploy-preview-32661--material-ui.netlify.app/material-ui/react-menu/#context-menu

---

Does click-drag-release work properly? Nop, but it's pretty hard, maybe overkill for us 🙃. I have also seen https://react-spectrum.adobe.com/react-spectrum/Menu.html support this correctly.

---

Off-topic. @michaldudak in https://mui.com/base/react-menu/#basic-usage, I think that we will want to reconsider the demo, there are regressions from https://mui.com/material-ui/react-menu/ that would likely not fly in production:

1. Clicking the menu when open doesn't click it, it blinks

May-06-2022.22-19-04.mp4

2. We display a language picker, but it's a menu component, this doesn't match (it would match with a select docs page)
3. The menu items are always mounted, even when closed:

4. We should prevent users to select text, either by using button or user-select: none

---

I have asked for review the owners of this component

[mui-bot]

No bundle size changes

Generated by 🚫 dangerJS against 9645d47

[brookssolveig]

Continuous improvement

[michaldudak]

@oliviertassinari Thanks for reporting these issues.

Clicking the menu when open doesn't click it, it blinks

I'll create an issue for it and fix it when creating the MenuButton component as adding more code to the demo will make it too complex.

We display a language picker, but it's a menu component, this doesn't match (it would match with a select docs page)

Why do you think it's important to have matching demos in different products? The content doesn't really matter, does it? I have no problem with changing it to anything else - just curious about the rationale.

The menu items are always mounted, even when closed
We should prevent users to select text, either by using button or user-select: none

👍 I'll create a PR for this

[oliviertassinari]

I'll create an issue for it and fix it when creating the MenuButton component as adding more code to the demo will make it too complex.

@michaldudak Depending on the estimated time to introduce this component, I think that it could still make sense to do a fix on the demo. This would help sell the idea that we do need a <MenuButton> component, with all the code that it removes. For example, if we wait 6 months to introduce a MenuButton, then in the meantime the menu component is not usable as-is.

Why do you think it's important to have matching demos in different products? The content doesn't really matter, does it? I have no problem with changing it to anything else - just curious about the rationale.

To be clear, the pain point I wanted to raise is not about https://mui.com/material-ui/react-menu/#basic-menu matching with https://mui.com/base/react-menu/#basic-usage but that the demo in https://mui.com/base/react-menu/#basic-usage is confusing on its own, I feel that we showcase as select like use case inside a page dedicated to the menu. I would expect a menu use case. For example, I think that Headless UI approach the demos correctly.