Carbon: [Tooltip] tooltips are misbehaving with some Chrome extension

Created on 2 Oct 2020  ·  7Comments  ·  Source: carbon-design-system/carbon

What package(s) are you using?

  • [ ] carbon-components
  • [x] carbon-components-react

Detailed description

When there are multiple tooltip components, tapping on a tooltip while the other is open closes the other, but the one tapped opens and closes very quickly

Is this issue related to a specific component?

Tooltip

What did you expect to happen? What happened instead? What would you like to
see changed?

The first tooltip should close. The second tooltip should remain open.

What browser are you working in?

Browser: [chrome, firefox, safari]

Steps to reproduce the issue

Replicated with this sandbox
https://codesandbox.io/s/magical-fermat-nkowh?file=/index.js

  1. Go to https://codesandbox.io/s/magical-fermat-nkowh?file=/index.js
  2. Click on Tooltip label
  3. Without closing the tooltip for Tooltip label, click on Tooltip label 2

Additional information

Oct-01-2020 16-19-49

tooltip needs more info 🤷‍♀️ bug 🐛

All 7 comments

I believe if you add an id to each, it should work properly, see https://codesandbox.io/s/great-firefly-q8rvw?file=/index.js

Since that isn't explicit, should we make the id prop a required one? cc @carbon-design-system/developers

I believe if you add an id to each, it should work properly, see https://codesandbox.io/s/great-firefly-q8rvw?file=/index.js

Since that isn't explicit, should we make the id prop a required one? cc @carbon-design-system/developers

Yes this did it for me. Thanks! I agree that we should make "id" required. Can we repurpose this issue or create a new one?

@knyto2 updated the title to better address the root problem 👍

we already have logic to autogenerate an id if a user does not provide one IIRC, so this may just be an issue with the component's existing logic (rather than making the id prop required)

@emyarod good point, changed it

@knyto2 I'm actually not able to replicate the issue using your sandbox or our storybook and it seems like our autogenerated ids are working as expected. Can you provide more info about which browser you are using and maybe try testing without browser extensions to see if any of those are interfering with the component behavior?

@emyarod that is strange, I'm using Chrome with extensions enabled and it is no longer reproducible. Can't explain it, but I'm going to close this since it's working for me. Thanks for the help!

Was this page helpful?
0 / 5 - 0 ratings