Material-ui: Tooltips stick if button opens new modal

Created on 30 Nov 2017  路  6Comments  路  Source: mui-org/material-ui

Been having a small issue where an IconButton's tooltip will stick and not go away if the button opened a dialog. It won't go away even after closing dialog. You have to hover over button once to make it go.

Expected Behavior

Tooltip should go away if overlay dialog is opened. In general, the tooltip should go away if the mouse does not hover over the button.

Browser Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 0.17.4 |
| React | 15.6.2 |
| browser | Google Chrome 62 (Mac OS High Sierra) |

Tooltip question

Most helpful comment

@tilastokeskus Thank you for the reproduction example: https://codesandbox.io/s/4w1m5y7nk4.
There are two workarounds:

  1. Make the tooltip not listening to the focus event: disableFocusListener.
  2. Disable the restore focus accessibility feature for the modal: disableRestoreFocus.

All 6 comments

Same behavior for me on v1.0.0-beta.35

Same here.

Do you have a reproduction example?

Kind of happening to me too on v1.0.0-beta.37

  1. Hover over button: tooltip appears.
  2. Click button: tooltip disappears, modal opens.
  3. Close modal: tooltip re-appears even though I'm not hovering the button.

Reproduction example: https://codesandbox.io/s/54j1v7okrl

I'm having a similar issue and can even reproduce it on http://www.material-ui.com/ in the IconButton tooltip section:

  1. Hover over button: tooltip appears.
  2. Click button: tooltip disappears.
  3. Minimize screen and then restore screen: tooltip re-appears even though I'm not hovering the button.

Also reproducible this way:

  1. Hover over button: tooltip appears.
  2. Click button: tooltip disappears.
  3. Change tabs and then return to original tab: tooltip re-appears even though I'm not hovering the button.

tried it on Safari, Firefox and Chrome and it only happens on Chrome. I'm currently using Chrome v65.0.3325.181

I know this doesn't happen with a modal, but it seems this issue isn't specifically dependent on the button opening a modal.

@tilastokeskus Thank you for the reproduction example: https://codesandbox.io/s/4w1m5y7nk4.
There are two workarounds:

  1. Make the tooltip not listening to the focus event: disableFocusListener.
  2. Disable the restore focus accessibility feature for the modal: disableRestoreFocus.
Was this page helpful?
0 / 5 - 0 ratings

Related issues

finaiized picture finaiized  路  3Comments

revskill10 picture revskill10  路  3Comments

activatedgeek picture activatedgeek  路  3Comments

ghost picture ghost  路  3Comments

rbozan picture rbozan  路  3Comments