From 73328b3dbc3c9b8352d371bcf425efbb89ce2e0b Mon Sep 17 00:00:00 2001
From: Ivan Starkov <istarkov@gmail.com>
Date: Mon, 21 Oct 2024 19:08:02 +0300
Subject: [PATCH] fix: Prevent tooltip on focus (#4318)

## Description

closes #4293

One of solution also
```
        onCloseAutoFocus={(event) => {
          event.preventDefault();
        }}
```

on dialog and popover content, but it's lost element focus.

This solution doesn't lost focus. Just prevent tooltip from being shown
on focus.


## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---
 .../design-system/src/components/tooltip.tsx  | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/design-system/src/components/tooltip.tsx b/packages/design-system/src/components/tooltip.tsx
index ae916f2aa95c..7f1e72e6c5e1 100644
--- a/packages/design-system/src/components/tooltip.tsx
+++ b/packages/design-system/src/components/tooltip.tsx
@@ -13,7 +13,6 @@ import { Box } from "./box";
 import { Text } from "./text";
 import type { CSS } from "../stitches.config";
 import { theme } from "../stitches.config";
-import { disableCanvasPointerEvents } from "../utilities";
 
 export const TooltipProvider = TooltipPrimitive.TooltipProvider;
 
@@ -78,18 +77,24 @@ export const Tooltip = forwardRef(
     });
 
     /**
-     * When the mouse leaves Tooltip.Content and moves over an iframe, the Radix Tooltip stays open.
-     * This happens because Radix's internal grace area relies on the pointermove event, which isn't triggered over iframes.
-     * The current workaround is to set pointer-events: none on the canvas when the tooltip is open.
-     **/
-    useEffect(() => {
-      if (open) {
-        const enableCanvasPointerEvents = disableCanvasPointerEvents();
-        return () => {
-          enableCanvasPointerEvents?.();
-        };
-      }
-    }, [open]);
+     * When the mouse leaves Tooltip.Content and hovers over an iframe, the Radix Tooltip stays open.
+     * This occurs because Radix's grace area depends on the pointermove event, which iframes don't trigger.
+     *
+     * Two possible workarounds:
+     * 1. Set pointer-events: none on the canvas when the tooltip is open and content is hovered.
+     *    (This doesn't work well in Chrome, as scrolling stops working on elements hovered with pointer-events: none,
+     *    even after removing pointer-events.)
+     * 2. Close the tooltip on onMouseLeave.
+     *    (This breaks some grace area behavior, such as closing the tooltip when moving the mouse from the content to the trigger.)
+     *
+     * The simpler solution with fewer side effects is to close the tooltip on mouse leave.
+     */
+    const handleMouseEnterComposed: React.MouseEventHandler<HTMLDivElement> = (
+      event
+    ) => {
+      setOpen(false);
+      props.onMouseLeave?.(event);
+    };
 
     return (
       <TooltipPrimitive.Root
@@ -112,6 +117,7 @@ export const Tooltip = forwardRef(
               collisionPadding={8}
               arrowPadding={8}
               {...props}
+              onMouseLeave={handleMouseEnterComposed}
             >
               {typeof content === "string" ? <Text>{content}</Text> : content}
               <Box css={{ color: theme.colors.transparentExtreme }}>