[Bug]: DefinitionTooltip is not opening on first click

[preetibansalui]

Package

@carbon/react

Browser

Chrome, Firefox

Package version

1.62.0

React version

No response

Description

Definition Tooltip is not opening on first click. It opens and closes immediately. It is taking two clicks to open the tooltip definition, first click where the text is getting focused, and another click to open it.

Reproduction/example

https://stackblitz.com/edit/github-jmmemz?file=src%2FApp.jsx

Steps to reproduce

https://stackblitz.com/edit/github-jmmemz?file=src%2FApp.jsx

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[Eric-Arellano]

I've gotten a minimal reproduction for this, which you can use at https://github.com/Eric-Arellano/carbon-react-tooltips-playwright and I'll describe here.

Indeed, DefinitionTooltip does not open on the first click, but I've only experienced that with Playwright's .click(). Specifically, I've been investigating when openOnHover={false} is set and I have not investigated other props. These types of clicks both work:

1. Clicking as a user with my mouse
2. Clicking in the dev console with document.querySelector("button.cds--definition-term").click().

This bug was introduced in 1.53, whereas 1.52.0 works. 1.63 does not work. I did not bisect which commit broke things, but you could use Git requirements with https://github.com/Eric-Arellano/carbon-react-tooltips-playwright to bisect it.

See https://github.com/Eric-Arellano/carbon-react-tooltips-playwright for the failing test in tests/, and see the README for instructions on the three ways to get the test passing.