Bug - MenuItem - menu items lose mouse functionality when tooltip is applied

[thatblindgeye]

Describe the problem
A MenuItem that has a tooltip doesn't have its tooltip triggered via mouse hover. The tooltip can only be triggered via keyboard focus. Similarly, the MenuItem can't have its onClick handler fired via mouse, only keyboard, when a tooltip is attached.

This is due to the wrapper div with display: contents on the trigger of the tooltip (the button/anchor of the MenuItem). The workaround is to pass a ref to MenuItem and the same ref to triggerRef within the tooltipProps prop. However, consumers may not know to do this or when they need to.

@kmcfaul suggested having internal default refs used to avoid that wrapper div, while still allowing a consumer to provide their own custom ref if they need/want to.

How do you reproduce the problem?

1. Go to a menu example - basic menu example
2. Try hovering over an aria-disabled menu item; notice that the tooltip does not trigger. Repeat this on an enabled MenuItem after copy+pasting the tooltipProps to it
3. Try using keyboard to navigate to the same aria-disabled menu item; notice that the tooltip does trigger. Again repeat this on an enabled MenuItem.

Expected behavior
A tooltip should be able to be triggered by mouse and keyboard.

Is this issue blocking you?
A workaround is to pass a ref and tooltipProps.triggerRef to the MenuItem

Screenshots
If applicable, add screenshots to help explain the issue.

What is your environment?

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

What is your product and what release date are you targeting?

Any other information?

[thatblindgeye]

Closing in favor of #11358