Material-ui: [Tooltip] Unexpected tooltip behavior

[ayubov]

• [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 dialog opening.

Current Behavior

Tooltip stay open and nothing can close it, except mouseleave event on the wrapped element.

Steps to Reproduce

https://codesandbox.io/s/18z30978jj

1. Click MoreVert icon on the appbar
2. Click first menu item Settings

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 3.0.3 |
| React | 16.5.0 |

[JoshuaLicense]

It is because when the modal closes, it restores focus on the last element, in this case the tooltip'd button.

To disable this you have (at least) two options:

• Add disableRestoreFocus prop to the Modal component.
• Add disableFocusListener prop to the Tooltip component.

[oliviertassinari]

@ayubov Thank you for providing this reproduction example. It took some time to look into it. I can confirm the bug. A onFocus event is triggered but no onBlur event is triggered. There is a simple workaround. We can check that we still have the active focus here:
https://github.com/mui-org/material-ui/blob/851e847764ea3a7640c7aca7b8a72f089521d0f3/packages/material-ui/src/Tooltip/Tooltip.js#L136-L143
Something like:

  handleFocus = event => {
    event.persist();
    // The autoFocus of React might trigger the event before the componentDidMount.
    // We need to account for this eventuality.
    this.focusTimer = setTimeout(() => {
-      this.handleEnter(event);
+      if (this.childrenRef === document.activeElement) {
+        this.handleEnter(event);
+      }
    });
  };

[oliviertassinari]

@ayubov Do you want to give it a shot?

[ayubov]

@oliviertassinari Yes, I'll try.

[ayubov]

@oliviertassinari Can you please help me little bit? It’s my first time with yarn, maybe I misunderstood something. After I cloned repository and installed dependencies with ‘yarn install’ I’m trying to build it with ‘yarn build’ and getting Syntax error on the first spread operator in the first file AppBar. Looks like Babel plugin doesn’t work, or something like this. What is my mistake?

[shcherbyakdev]

@ayubov try yarn instead to install packages

[ayubov]

@shcherbyakdev it's not the reason. yarn install works exactly the same as yarn.

[eps1lon]

@ayubov Do you have the same issue as #12886? If so please continue the conversation over there by stating your OS and shell you used.

[ayubov]

@oliviertassinari Your solution works perfect, I created PR with it.

[mogadanez]

still have problem if modal opens via react-router
https://codesandbox.io/s/ox9ro67yk6

and it looks more critical since it is jumping to other place and break up layout.

[oliviertassinari]

@mogadanez Interesting. Thank you for making this codesandbox! I have made #12953 recently to improve this case. Looks like it's not enough. I also want to add a warning to the console when this happens. Would you mind opening a new issue? I will share the workaround there.