Link within Tooltip within Modal does not function properly

[lucasmccomb]

[Link/Tooltip/Modal]: Link within Tooltip within Modal does not function properly

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

When a Link within a Tooltip within a Modal is clicked, nothing happens. This seems to only happen with a Link that is nested within a Tooltip nested within a Modal.

Is this issue related to a specific component?

This issue is related to the Link, Tooltip and Modal components.

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

When a Link (nested within a Tooltip within a Modal) is clicked, specifcally a Link with a target="_blank" attribute, I expect a new tab to open in the browser with a URL equal to the href attribute on that Link. Instead, when the Link (nested within a Tooltip within a Modal) is clicked, nothing happens. No new tab is opened. No browser redirection occurs. I would like the Link component to work properly when nested within a Tooltip within a Modal.

What browser are you working in?

Chrome Version 78.0.3904.87 (Official Build) (64-bit)

What version of the Carbon Design System are you using?

"carbon-components": "^9.91.0"
"carbon-components-react": "^6.114.1"

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Watson Assistant

Steps to reproduce the issue

1. Find a Link that's nested within a Tooltip within a Modal
2. Open the Modal
3. Open the Tooltip
4. Click on the Link
5. Observe that nothing happens when the Link is clicked

Reduced Test Case:
https://codesandbox.io/embed/codesandbox-owuet

[jendowns]

Whoa this is an interesting situation! My guess:

• When activated, the Tooltip is inserted as a child of the body, not the necessarily within the container it was called in.
• A Modal traps focus and doesn't allow you to utilize links outside of the Modal.
• Therefore, even though you can see this Tooltip inside the Modal, the contents of the Tooltip (including the link you are trying to click) were inserted further up the DOM tree, within the body. So the Tooltip's content aren't children of the Modal, and the Modal prevents the click event 😲

[asudoh]

Hi 👋 it's a side effect of a third-party module, called focus-trap, which was introduced by the team for presumably better focus wrapping. You can disable it with focusTrap={false} prop. Without focus-trap, it falls back to our own focus wrapping code that takes care of our tooltip (e.g. here).

[lucasmccomb]

@asudoh which component do I put the focusTrap={false} prop on?

[asudoh]

It's <Modal>.