anchorOrigin and transformOrigin can create delay on what menuItem is (visually) selected.

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When adding an anchorOrigin OR transformOrigin prop to a Menu so that it pops over the button it can create a visual glitch. If your mouse is on a certain area it can select the wrong menuItem briefly before changing. It is sometimes only a small area where the mouse has to be for it to take effect but I've managed to exaggerate the effect (somehow) in the code-sand-box linked below, so that it often fails to select the correct menuItem straight away.

I've checked the console log on my own project and if I click while the wrong menuItem is selected it does actually select the correct item, so it's purely visual.

https://codesandbox.io/s/positionedmenu-demo-material-ui-forked-j8d0vt?file=/demo.tsx:1070-1180

Expected behavior 🤔

Correct menuItem is visually selected straight away.

Steps to reproduce 🕹

Steps:

1. Use a
2. Add an anchorOrigin or transformOrigin
3. Use these to position the popup over the menu
4. Click the button, try the mouse in different locations to reach the sweet spot (usually when your mouse is overlapping two of the menuItems).

Context 🔦

I'm trying to create a custom menu type where the menu pops over the button with a default item located directly over the button and others in the list above or below.

Your environment 🌎

Brave Browser
Latest OsX on Mac

Start with the linked CodeSandbox reproduction in demo.tsx, especially the Menu configured with anchorOrigin or transformOrigin, and reproduce the visual selection delay while moving the mouse across overlapping MenuItems. Trace how the positioned popup determines the visually selected item. Done means the correct MenuItem is highlighted immediately in the reproduction, including when the menu overlaps the button.