`Tooltip`: `TooltipContent` children content is being mounted to the DOM twice

hallucinogenizer commented 3 months ago

Bug report

Current Behavior

Here's a codesandbox I've prepared for this bug report.

Open the console in the sandbox and reload the preview. Once the page has loaded, clear the console using console.clear(). Now hover over the tooltip trigger button.

You'll see the following logs:

Console was cleared
Render count: 1 
test: 1 

Render count: 1 
test: 2 

Render count: 2 
test: 3 

Render count: 2 
test: 4

Notice how console.count('test') gets called twice even though the render count is still 1. A useEffect does not get called twice in the same render. This means there are two instances of the TooltipContent children in the DOM. Note that we're not using react strict mode.

If you set <Tooltip open={true}> allowing you to inspect the DOM, you'll even see the content mounted twice:

There's a second mount with parent having width:1px, height:1px that is invisible.

Expected behavior

Content should be mounted once to the DOM.

The problem with mounting it twice is that by mounting twice, some useEffect() hooks that developers may be expecting would only get called once on mount would get called twice. For example, analytics calls, fetch requests, mutations.

Reproducible example

CodeSandbox

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	`react-tooltip`	1.1.2
React	n/a	18.0.0
Browser	Chrome	126.0.6478.185 arm64
Assistive tech
Node	n/a
npm/yarn
Operating System	MacOS

finallyblueskies commented 1 month ago

+1

amelie-schlueter commented 1 month ago

Having the same issue 👍🏼

ivensgustavo commented 1 month ago

I'm using @radix-ui/react-tooltip as the basis for my tooltips and when I was writing some tests for it using @testing-library/react I noticed the same behavior. When searching for the text I defined as the content of the tooltip using the findByText function, my test failed because multiple instances of the same text were found. This way, when inspecting the tooltip component you can confirm that there is a duplication of the TooltipContent children. This forces me to write a wrong test or leave the component untested