From dc0e387bcdd6b4654f5e7fb472e6fba18c582dee Mon Sep 17 00:00:00 2001
From: Ivan Ng <ivan.ng.chak.ming@gmail.com>
Date: Mon, 11 Jul 2022 18:07:05 +0800
Subject: [PATCH] [Tooltip] Fix children mouse over detection (#32321)

---
 packages/mui-material/src/Tooltip/Tooltip.js    |  8 +++++---
 .../mui-material/src/Tooltip/Tooltip.test.js    | 17 +++++++++++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js
index 86129bd76aebd6..0d92a708e2a318 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.js
+++ b/packages/mui-material/src/Tooltip/Tooltip.js
@@ -372,10 +372,14 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
       return;
     }
 
+    // Workaround for https://github.com/facebook/react/issues/7769
+    if (!childNode) {
+      setChildNode(event.currentTarget);
+    }
     // Remove the title ahead of time.
     // We don't want to wait for the next render commit.
     // We would risk displaying two tooltips at the same time (native + this one).
-    if (childNode) {
+    else {
       childNode.removeAttribute('title');
     }
 
@@ -420,8 +424,6 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
 
   const handleFocus = (event) => {
     // Workaround for https://github.com/facebook/react/issues/7769
-    // The autoFocus of React might trigger the event before the componentDidMount.
-    // We need to account for this eventuality.
     if (!childNode) {
       setChildNode(event.currentTarget);
     }
diff --git a/packages/mui-material/src/Tooltip/Tooltip.test.js b/packages/mui-material/src/Tooltip/Tooltip.test.js
index 420d32cd7e2c88..bb61d1d4d066ee 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.test.js
+++ b/packages/mui-material/src/Tooltip/Tooltip.test.js
@@ -433,6 +433,23 @@ describe('<Tooltip />', () => {
       expect(getByRole('tooltip')).toBeVisible();
       expect(handleFocus.callCount).to.equal(1);
     });
+
+    it('should handle `onMouseOver` forwarding', () => {
+      const handleMouseOver = spy();
+      const { getByRole } = render(
+        <Tooltip enterDelay={100} title="Tooltip">
+          <button id="testChild" type="submit" onMouseOver={handleMouseOver}>
+            Hello World
+          </button>
+        </Tooltip>,
+      );
+
+      fireEvent.mouseOver(getByRole('button'));
+      clock.tick(100);
+
+      expect(getByRole('tooltip')).toBeVisible();
+      expect(handleMouseOver.callCount).to.equal(1);
+    });
   });
 
   describe('prop: delay', () => {