Tooltip within popover opens automatically due to trigger receiving focus

[SomeHats]

Bug report

Current Behavior

Hi radix-ui folks <3

Currently, if you create a popover with a tooltip inside, opening the popover automatically opens the tooltip. This is because the popover auto-focuses it's contents, and if the tooltip trigger is the first focusable element it receives that focus, which causes it to open.

This may not really be all that much of an issue - you can work around it by .preventDefault()ing the popover onOpenAutoFocus, but it tripped me up for a little while so I figured I'd let you know - feel free to close!

Expected behavior

When opening a popover containing a tooltip, the tooltip should remain closed by default until its trigger is hovered

Reproducible example

https://stackblitz.com/edit/stackblitz-starters-qgptek?file=src%2FApp.tsx

Suggested solution

Possibly nothing! Although I'd guess the .preventDefault() approach has it's tradeoffs for accessibility.

Your environment

Software	Name(s)	Version
Radix Package(s)	react-popover, react-tooltip	1.0.6
React	n/a	18.2
Browser	Chrome	114.0.5735.133

[ryantbrown]

I spent the last hour of my life trying to figure out why this was happening. Thank you for posting this.

[pureliumy]

Same issue when the trigger is in Dialog.

[jacksonblankenship]

Thanks for this. I'm using a tooltip with a dropdown trigger and the dropdown menu kept triggering the tooltip. By putting onCloseAutoFocus={e => e.preventDefault()} on DropdownMenu.Content the issue went away.

[rgorai-cc]

Thanks for this. I'm using a tooltip with a dropdown trigger and the dropdown menu kept triggering the tooltip. By putting onCloseAutoFocus={e => e.preventDefault()} on DropdownMenu.Content the issue went away.

Omg this was the answer. thank you

[RakeshPotnuru]

@jacksonblankenship The issue mentioned above is tooltip inside popover getting triggered when popover is clicked. Your solution is for when tooltip outside getting triggered when popover is closed.

This fixes this issue:

<Popover.Content
  onOpenAutoFocus={(event) => {
    event.preventDefault();
  }}
>
  ...
</Popover.Content>

[youneszahzouh]

@jacksonblankenship The issue mentioned above is tooltip inside popover getting triggered when popover is clicked. Your solution is for when tooltip outside getting triggered when popover is closed.

This fixes this issue:

<Popover.Content
  onOpenAutoFocus={(event) => {
    event.preventDefault();
  }}
>
  ...
</Popover.Content>

This works well with me .. thanks

[hallucinogenizer]

In my case, I was mounting a non-popover scrolling div into the DOM and as soon as it mounted, the tooltip would get triggered.

I fixed this by preventing the onFocusCapture event from propagating on the div

<div
  onFocusCapture={(e) => {
    e.stopPropagation();
  }}
>
 // tooltip is somewhere in here
</div>