Prevent Popover focus trigger Tooltip to open.

[georgecponta]

Hey everyone, hope you are all well!

I have an issue where at the moment I am combining a Tooltip and Popover component in with the same trigger.

What I want is that when I close the Popover by pointerDown outside of the Content to not also trigger the Tooltip to show again, but I don't want to lose this functionality when for example someone is using keyboard navigation and closes the Popover by pressing ESC.

I tried to do this with onCloseAutoFocus, doing e.preventDefault only when the function is triggered by a click event but the event object is custom and won't show what event type triggered it be it click or keydown.

Any ideas how can I do this?

[georgecponta]

Screen.Recording.2023-10-17.at.10.31.14.mov

Here is in practice, the Tooltip is still open after clicking out the Popover. I want the Tooltip to stay closed and only stay open when closing the Popover with the ESC key

[simonrelet]

Hello 👋,

I've just ran into the same issue, and came up with something, but I'm not sure it's the best solution 🤔:

function Component() {
  const isNextOpenPrevented = useRef(false);

  return (
    <Popover.Root modal>
      <Tooltip.Root>
        <Popover.Trigger asChild>
          <Tooltip.Trigger
            onFocus={(event) => {
              if (isNextOpenPrevented.current) {
                isNextOpenPrevented.current = false;
                event.preventDefault();
              }
            }}
          >
            Open
          </Tooltip.Trigger>
        </Popover.Trigger>

        <Tooltip.Content>Content</Tooltip.Content>
      </Tooltip.Root>

      <Popover.Portal>
        <Popover.Content
          onPointerDownOutside={() => {
            // If the popover has `modal` set to `true`, it will focus back
            // the trigger by default.
            isNextOpenPrevented.current = true;
          }}
        >
          <Popover.Close
            onClick={(event) => {
              // Only prevent when the event is triggered by a mouse event.
              // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
              if (event.detail > 0) {
                isNextOpenPrevented.current = true;
              }
            }}
          />
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
}

In our design-system, we put this logic in a context so our tooltip and popovers component can do this by default 👌.

[georgecponta]

Works a charm mate thank you. And nonsense, it's good, would've been better if it was dealt with internally but until Radix patch the issue the solution is perfect 🔥