Repository: mui/material-ui (TypeScript)
Date: 2018-08-12 19:18:36+00:00
Task type: Bug Fix

Issue:
Tooltip still displayed after click on a button (surrounded by a Tooltip)
I notice something when using a tooltip with a button in it.
If tooltip is showed and then I click on the button, tooltip will not disapear until I click somewhere else on screen.

It is reproductible on your documentation.
![image](https://user-images.githubusercontent.com/3499632/43463558-2805bd80-94d9-11e8-8051-e0794e3f111d.png)
I can even after a click on button, show the second tooltip on first button :
![image](https://user-images.githubusercontent.com/3499632/43463587-382e43ee-94d9-11e8-9a54-7f9170d55ea8.png)


Can it be fixed ?


Issue discussion:
@jkeruzec This behavior was specifically introduced to address #12131. You can disable the focus listener if you don't want such behavior.
Different people have now been complaining about this behavior. Let's revert it. 

Solution patch:
diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -85,11 +85,6 @@ class Tooltip extends React.Component {
 
   touchTimer = null;
 
-  internalState = {
-    hover: false,
-    focus: false,
-  };
-
   constructor(props) {
     super();
     this.isControlled = props.open != null;
@@ -151,20 +146,12 @@ class Tooltip extends React.Component {
     const { children, enterDelay } = this.props;
     const childrenProps = children.props;
 
-    if (event.type === 'focus') {
-      this.internalState.focus = true;
-
-      if (childrenProps.onFocus) {
-        childrenProps.onFocus(event);
-      }
+    if (event.type === 'focus' && childrenProps.onFocus) {
+      childrenProps.onFocus(event);
     }
 
-    if (event.type === 'mouseover') {
-      this.internalState.hover = true;
-
-      if (childrenProps.onMouseOver) {
-        childrenProps.onMouseOver(event);
-      }
+    if (event.type === 'mouseover' && childrenProps.onMouseOver) {
+      childrenProps.onMouseOver(event);
     }
 
     if (this.ignoreNonTouchEvents && event.type !== 'touchstart') {
@@ -205,20 +192,12 @@ class Tooltip extends React.Component {
     const { children, leaveDelay } = this.props;
     const childrenProps = children.props;
 
-    if (event.type === 'blur') {
-      this.internalState.focus = false;
-
-      if (childrenProps.onBlur) {
-        childrenProps.onBlur(event);
-      }
+    if (event.type === 'blur' && childrenProps.onBlur) {
+      childrenProps.onBlur(event);
     }
 
-    if (event.type === 'mouseleave') {
-      this.internalState.hover = false;
-
-      if (childrenProps.onMouseLeave) {
-        childrenProps.onMouseLeave(event);
-      }
+    if (event.type === 'mouseleave' && childrenProps.onMouseLeave) {
+      childrenProps.onMouseLeave(event);
     }
 
     clearTimeout(this.enterTimer);
@@ -234,10 +213,6 @@ class Tooltip extends React.Component {
   };
 
   handleClose = event => {
-    if (this.internalState.focus || this.internalState.hover) {
-      return;
-    }
-
     if (!this.isControlled) {
       this.setState({ open: false });
     }


Test patch:
diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
--- a/packages/material-ui/src/Tooltip/Tooltip.test.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -99,7 +99,7 @@ describe('<Tooltip />', () => {
     clock.tick(0);
     assert.strictEqual(wrapper.state().open, true);
     children.simulate('mouseLeave', { type: 'mouseleave' });
-    assert.strictEqual(wrapper.state().open, true);
+    assert.strictEqual(wrapper.state().open, false);
     children.simulate('blur', { type: 'blur' });
     assert.strictEqual(wrapper.state().open, false);
   });