Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip doesn't disappear on mouseout when icon-only Button was previously disabled #8961

Closed
2 tasks done
John30013 opened this issue Jun 20, 2021 · 0 comments · Fixed by #9504
Closed
2 tasks done
Assignees
Labels

Comments

@John30013
Copy link

John30013 commented Jun 20, 2021

What package(s) are you using?

  • carbon-components
  • carbon-components-react

Detailed description

I have several icon-only Buttons (rendered by a functional component) that, when clicked, execute a synchronous action (e.g., making a network request—simulated in the minimal test case below with a setTimeout()). While the action is in progress the button is disabled via a local boolean state variable.

Before clicking the button, hovering over it displays its tooltip, which disappears as expected when the mouse pointer moves off the button. However, after clicking the button, waiting for the "synchronous event" to complete and the button to become enabled, the tooltip stops disappearing when moving the mouse pointer off the button. Hovering over another hasIconOnly button causes the "stuck" tooltip to disappear, but hovering over the originally clicked button causes its tooltip to become "stuck" again.

Is this issue related to a specific component?
<Button> with hasIconOnly property and disabled property that is controlled by a boolean state variable.

What did you expect to happen? What happened instead? What would you like to
see changed?
The tooltip should disappear when the button is no longer hovered.

What browser are you working in?
Microsoft Edge, Version 91.0.864.48 (Official build) (64-bit) (Windows 10)
I have confirmed the issue also occurs in Chrome, but does not occur in Firefox (so this might be a Blink rendering engine bug/issue).

What version of the Carbon Design System are you using?
10.37.0 / 7.37.0

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
IBM Call Home Connect Cloud. No pressing dates.

Steps to reproduce the issue

  1. Go to my minimal test case at https://j0h0z.csb.app/.
  2. Mouse over the buttons. Confirm that the tooltip appears when the button is hovered, and disappears when the mouse moves off the button.
  3. Click one of the buttons. The clicked button becomes disabled for some amount of time.
  4. After the button becomes enabled again, mouse over the button to display the tooltip.
  5. Now move the mouse off the button. The tooltip does not disappear.
    • Note: in step 3, if you leave the mouse over the button until it becomes enabled and then move the mouse off the button, the tooltip will disappear. But if you then hover that button again and then move off, the tooltip becomes "stuck".
  6. Now mouse over one of the other buttons on the page. Note that when its tooltip appears the "stuck" tooltip disappears.
  7. If you click another one of the buttons, it will also gain the "stuck" tooltip behavior (that behavior will affect any button that was disabled when it was clicked, and then re-enabled).

Please create a reduced test case in CodeSandbox
https://j0h0z.csb.app/

Additional information

  • Screenshots or code
  • Notes
@John30013 John30013 changed the title Tooltip doesn't disappear on mouseout when button was previously disabled Tooltip doesn't disappear on mouseout when icon-only Button was previously disabled Jun 20, 2021
@joshblack joshblack mentioned this issue Aug 9, 2021
55 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants