[Tooltip] Fix children mouse over detection

[ivan-ngchakming]

I believe this bug is also caused by facebook/react#7769, where Ref effects are called after Update, therefore childNode (set by ref passed to child) is undefined. The issue is fixed for onFocus events in #14496, this PR applies the same fix for onMouseOver events.

fixes #31198

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 18ffb5f

[michaldudak]

This seems to be working well. Thanks, @ivan-ngchakming!

[oliviertassinari]

Do we miss a test case for this bug fix?

[michaldudak]

@ivan-ngchakming would you mind adding a test?

[hbjORbj]

I added a test. @michaldudak

Codesandbox Before The Fix
Codesandbox After The Fix

[oliviertassinari]

I wonder if we don't have two problems with these changes, It's not clear to me that it's a step forward (might be better without):

1. on the surface, the test added is not failing on master, it's identical to not having a test case.
2. the bug reproduction in [Tooltip] Tooltip (as slider ValueLabel) won't show up until I click the slider thumb #31198 (comment) seems to surface that the root problem is not with the Tooltip:

So what I would propose is to:

1. We close [Tooltip] Tooltip (as slider ValueLabel) won't show up until I click the slider thumb #31198 as a question with https://codesandbox.io/s/customizedslider-demo-material-ui-forked-yn4d9n?file=/demo.tsx:1276-1296 as the solution. AirbnbThumbComponent should forward the ref.

 interface AirbnbThumbComponentProps extends React.HTMLAttributes<unknown> {}

-function AirbnbThumbComponent(props: AirbnbThumbComponentProps) {
-  const { children, ...other } = props;
-  return (
-    <SliderThumb {...other}>
-      {children}
-      <span className="airbnb-bar" />
-      <span className="airbnb-bar" />
-      <span className="airbnb-bar" />
-    </SliderThumb>
-  );
-}
+const AirbnbThumbComponent = React.forwardRef(
+  (props: AirbnbThumbComponentProps, ref) => {
+    const { children, ...other } = props;
+    return (
+      <SliderThumb {...other} ref={ref}>
+        {children}
+        <span className="airbnb-bar" />
+        <span className="airbnb-bar" />
+        <span className="airbnb-bar" />
+      </SliderThumb>
+    );
+  }
+);

 export default function CustomizedSlider() {
   return (

2. We revert this PR, under the argument that it's not helping since the root cause is userland and already has a relatively clear warning.

The alternative is to go a bit above and beyond:

1. We explicitly add the support for tooltip children that don't forward the ref, as a fallback mechanism. But in this case, this PR is not a "bug" fix, it's a "new feature", the PR label would need to change. We also need a follow-up to replace the added test case to cover the use case.
2. We update the demos in the docs to forward the ref.

What do you think about it? cc @hbjORbj @michaldudak (as co-owners of the tooltip)

[oliviertassinari]

I have reverted this PR and moved the conversation to the issue: #31198 (comment).