[Tooltip] Fix onMouseOver event leak

packages/material-ui/src/Tooltip/Tooltip.js

@@ -280,7 +280,11 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
   const handleEnter = event => {
     const childrenProps = children.props;
 
-    if (event.type === 'mouseover' && childrenProps.onMouseOver) {
+    if (
+      event.type === 'mouseover' &&
+      childrenProps.onMouseOver &&
+      event.currentTarget === childNode
+    ) {
       childrenProps.onMouseOver(event);
     }
 
@@ -330,7 +334,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     }
 
     const childrenProps = children.props;
-    if (childrenProps.onFocus) {
+    if (childrenProps.onFocus && event.currentTarget === childNode) {
       childrenProps.onFocus(event);
     }
   };
@@ -360,13 +364,17 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     const childrenProps = children.props;
 
     if (event.type === 'blur') {
-      if (childrenProps.onBlur) {
+      if (childrenProps.onBlur && event.currentTarget === childNode) {
         childrenProps.onBlur(event);
       }
       handleBlur(event);
     }
 
-    if (event.type === 'mouseleave' && childrenProps.onMouseLeave) {
+    if (
+      event.type === 'mouseleave' &&
+      childrenProps.onMouseLeave &&
+      event.currentTarget === childNode
+    ) {
       childrenProps.onMouseLeave(event);
     }
 

packages/material-ui/src/Tooltip/Tooltip.test.js

@@ -1,5 +1,6 @@
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
 import React from 'react';
-import { assert } from 'chai';
+import { assert, expect } from 'chai';
 import PropTypes from 'prop-types';
 import { spy, useFakeTimers } from 'sinon';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
@@ -227,17 +228,17 @@ describe('<Tooltip />', () => {
       );
       const children = container.querySelector('#testChild');
       focusVisible(children);
-      assert.strictEqual(document.body.querySelectorAll('[role="tooltip"]').length, 0);
+      expect(document.body.querySelectorAll('[role="tooltip"]').length).to.equal(0);
       clock.tick(111);
-      assert.strictEqual(document.body.querySelectorAll('[role="tooltip"]').length, 1);
+      expect(document.body.querySelectorAll('[role="tooltip"]').length).to.equal(1);
       document.activeElement.blur();
       clock.tick(5);
       clock.tick(6);
-      assert.strictEqual(document.body.querySelectorAll('[role="tooltip"]').length, 0);
+      expect(document.body.querySelectorAll('[role="tooltip"]').length).to.equal(0);
 
       focusVisible(children);
       // Bypass `enterDelay` wait, instant display.
-      assert.strictEqual(document.body.querySelectorAll('[role="tooltip"]').length, 1);
+      expect(document.body.querySelectorAll('[role="tooltip"]').length).to.equal(1);
     });
 
     it('should take the leaveDelay into account', () => {
@@ -285,6 +286,19 @@ describe('<Tooltip />', () => {
         assert.strictEqual(handler.callCount, 1);
       });
     });
+
+    it('should ignore event from the tooltip', () => {
+      const handleMouseOver = spy();
+      const { getByRole } = render(
+        <Tooltip {...defaultProps} open interactive>
+          <button type="submit" onMouseOver={handleMouseOver}>
+            Hello World
+          </button>
+        </Tooltip>,
+      );
+      fireEvent.mouseOver(getByRole('tooltip'));
+      expect(handleMouseOver.callCount).to.equal(0);
+    });
   });
 
   describe('disabled button warning', () => {