diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index 5cbf56f444d280..1246561c576ddc 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/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); } diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js index 870e1ac9d699ea..502b22568ea946 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.test.js +++ b/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('', () => { ); 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('', () => { assert.strictEqual(handler.callCount, 1); }); }); + + it('should ignore event from the tooltip', () => { + const handleMouseOver = spy(); + const { getByRole } = render( + + + , + ); + fireEvent.mouseOver(getByRole('tooltip')); + expect(handleMouseOver.callCount).to.equal(0); + }); }); describe('disabled button warning', () => {