Tooltips Fix

Author: istarkov

apps/builder/app/builder/features/project-settings/section-marketplace.tsx

@@ -213,8 +213,8 @@ export const SectionMarketplace = () => {
 
       <Grid gap={2} css={sectionSpacing}>
         <Label>Thumbnail</Label>
-        <Grid flow="column" gap={3}>
-          <InputErrorsTooltip errors={errors?.thumbnailAssetId}>
+        <InputErrorsTooltip errors={errors?.thumbnailAssetId}>
+          <Grid flow="column" gap={3}>
             <Box className={thumbnailStyle()}>
               <Image
                 className={thumbnailImageStyle({
@@ -224,18 +224,18 @@ export const SectionMarketplace = () => {
                 loader={imageLoader}
               />
             </Box>
-          </InputErrorsTooltip>
 
-          <Grid gap={2}>
-            <Text color="subtle">
-              The optimal dimensions in marketplace are 600x315 px or larger
-              with a 1.91:1 aspect ratio.
-            </Text>
-            <ImageControl onAssetIdChange={handleSave("thumbnailAssetId")}>
-              <Button css={{ justifySelf: "start" }}>Upload</Button>
-            </ImageControl>
+            <Grid gap={2}>
+              <Text color="subtle">
+                The optimal dimensions in marketplace are 600x315 px or larger
+                with a 1.91:1 aspect ratio.
+              </Text>
+              <ImageControl onAssetIdChange={handleSave("thumbnailAssetId")}>
+                <Button css={{ justifySelf: "start" }}>Upload</Button>
+              </ImageControl>
+            </Grid>
           </Grid>
-        </Grid>
+        </InputErrorsTooltip>
       </Grid>
 
       <Grid gap={1} css={sectionSpacing}>

apps/builder/app/builder/shared/binding-popover.tsx

@@ -271,6 +271,8 @@ const BindingButton = forwardRef<
           left: 0,
           boxSizing: "border-box",
           padding: 2,
+          // Because of the InputErrorsTooltip, we need to set zIndex to 1 (as InputErrorsTooltip needs an additional position relative wrapper)
+          zIndex: 1,
           transform: "translate(-50%, -50%) scale(1)",
           transition: "transform 60ms, opacity 0ms 60ms",
           // https://easings.net/#easeInOutSine

packages/design-system/src/components/tooltip.tsx

@@ -245,25 +245,42 @@ export const InputErrorsTooltip = ({
   // Wrap the error tooltip with its own provider to avoid logic intersection with ordinary tooltips.
   // This is especially important for hover delays.
   // Here we ensure that hovering over the tooltip trigger after any input will not show the tooltip immediately.
+  // --
+  // Additionally, we can't wrap the underlying Input with Tooltip because we are not rendering Tooltips in case of no errors.
+  // This causes a full re-render of the Input and loss of focus.
+  // Because of that, we are wrapping the Tooltip with the relative Box component and providing an invisible trigger for the Tooltip.
   return (
     <TooltipProvider>
       <Box ref={ref as never} css={{ display: "contents" }}></Box>
-      <Tooltip
-        {...rest}
-        collisionBoundary={collisionBoundary as never}
-        collisionPadding={-8}
-        hideWhenDetached={true}
-        content={
-          errors !== undefined && errors.length !== 0
-            ? (content ?? " ")
-            : undefined
-        }
-        open={errors !== undefined && errors.length !== 0}
-        side={side ?? "right"}
-        css={css}
-      >
+      <Box css={{ position: "relative" }}>
+        <Tooltip
+          {...rest}
+          collisionBoundary={collisionBoundary as never}
+          collisionPadding={-8}
+          hideWhenDetached={true}
+          content={
+            errors !== undefined && errors.length !== 0
+              ? (content ?? " ")
+              : undefined
+          }
+          open={errors !== undefined && errors.length !== 0}
+          side={side ?? "right"}
+          css={css}
+        >
+          <Box
+            css={{
+              position: "absolute",
+              inset: 0,
+              visibility: "hidden",
+              // Uncomment for debugging
+              // backgroundColor: "red",
+              // opacity: 0.3,
+              // pointerEvents: "none",
+            }}
+          ></Box>
+        </Tooltip>
         {children}
-      </Tooltip>
+      </Box>
     </TooltipProvider>
   );
 };