Material-ui: Tooltip not disappear after modal opening via router link

[mogadanez]

• [x ] This is not a v0.x issue.
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Tooltip should disappear after modal opening via router link

Current Behavior

Tooltip stay open and jumps to pages top-left corner.
Nothing can close it, except mouseleave event on the wrapped element.

Steps to Reproduce

Link: https://codesandbox.io/s/ox9ro67yk6

1. hover on button
2. wait for tooltip
3. click on button
4. close modal by clicking outside

Context

related issues:

1. https://github.com/mui-org/material-ui/issues/12853

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v3.2.0 |
| React | v16.5.2 |

[JackyW83]

Hi Aleksandr,

update your button to

          <Button
            component={Link}
            to="/someurl"
            variant="contained"
            color="primary"
            aria-label="Verify"
          >
            HOVER ON ME, than click
          </Button>

it will solve your problem.

[kztmk]

I just update to V3.2.1. and I got same issue.

[mogadanez]

@JackyW83, better but still have one issue
https://codesandbox.io/s/yq902rmmrv

1. hover on button
2. wait for tooltip
3. click on button
4. close modal by clicking outside
5. no popup - OK
6. go to another browser tab.
7. go back to this sample tab
8. tooltip appears in moment when tab activated, BUG

[oliviertassinari]

@mogadanez Regarding the first issue with this pattern:

        <Tooltip title="Look at me">
          <Button
            component={props => <Link to={`/someurl`} {...props} />}
            variant="contained"
            color="primary"
            aria-label="Verify"
          >
            HOVER ON ME, than click
          </Button>
        </Tooltip>

You get new DOM <a> element at each render as it's creating a new component.
The tooltip loses it's reference. A possible solution is to do:

--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -121,6 +121,13 @@ class Tooltip extends React.Component {
   }

   onRootRef = ref => {
+    // The children ref has changed. Something is wrong. Let's hide the tooltip.
+    if (ref !== null && this.childrenRef !== null && ref !== this.childrenRef && this.state.open) {
+      this.setState({
+        open: false,
+      })
+    }
+
     this.childrenRef = ref;
   };

I'm even wondering if we shouldn't warn about it.

---

Regarding the second issue. It looks like the "expected" behavior. The link button is the active element, the tooltip listens for the focus event. The tooltip is open when the focus move. It sounds like an acceptable tradeoff for me. Alternatively, you can disable the focus listener on the tooltip with disableFocusListener or disable the focus restore logic on the modal with disableRestoreFocus.

[mbrookes]

This also affects the Tooltip in the RTL button in the docs.

[oliviertassinari]

I have updated the provided sandbox, the first reported problem seems to be solved: https://codesandbox.io/s/tooltip-bug-igs7j.