From 5185c560501adbcd51b25a7a039e0d386bcb52fb Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Wed, 4 Dec 2019 13:38:59 -0500 Subject: [PATCH 1/3] Added target checking to handleEnter --- packages/material-ui/src/Tooltip/Tooltip.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index 5cbf56f444d280..b3be082dda2833 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); } From 027d20700756524a5158fd4eadc1325f7c7df023 Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Wed, 4 Dec 2019 13:46:31 -0500 Subject: [PATCH 2/3] Fixed prettier issues --- packages/material-ui/src/Tooltip/Tooltip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index b3be082dda2833..d643b7afd7ea85 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -284,7 +284,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) { event.type === 'mouseover' && childrenProps.onMouseOver && event.currentTarget === childNode - ) { + ) { childrenProps.onMouseOver(event); } From ddf53d8348cb9eb04e787c3437a28406ca9cbf5d Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 5 Dec 2019 00:40:37 +0100 Subject: [PATCH 3/3] add a regression test --- packages/material-ui/src/Tooltip/Tooltip.js | 10 +++++--- .../material-ui/src/Tooltip/Tooltip.test.js | 24 +++++++++++++++---- 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index d643b7afd7ea85..1246561c576ddc 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -334,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); } }; @@ -364,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', () => {