fix(webapp): preserve focus across copy tooltips

Author: carderne

apps/webapp/app/components/code/TSQLResultsTable.tsx

@@ -843,10 +843,11 @@ function CopyableCell({
   const [isHovered, setIsHovered] = useState(false);
   const { copy, copied } = useCopy(value);
 
-  // The button (with its aria-label) stays mounted at all times so keyboard users can always
-  // reach it. The Radix tooltip subtree is comparatively expensive to keep alive for every
-  // visible cell of a virtualized grid, so it's only mounted while the cell is hovered - the
-  // tooltip is a hover affordance, not required for the button's accessible name.
+  // The button (with its aria-label) always sits in the same position in the tree, wrapped by
+  // the same SimpleTooltip, so it is never unmounted/remounted on hover (which would drop
+  // keyboard focus). Only the tooltip's open state, not its mounted tree, follows hover; Radix
+  // still only renders the (comparatively expensive) tooltip content into the DOM of this
+  // virtualized grid while `open` is true.
   const copyButton = (
     <button
       type="button"
@@ -885,17 +886,14 @@ function CopyableCell({
       onMouseLeave={() => setIsHovered(false)}
     >
       <span className="flex items-center truncate">{children}</span>
-      {isHovered ? (
-        <SimpleTooltip
-          asChild
-          tabbable
-          button={copyButton}
-          content={copied ? "Copied!" : "Copy"}
-          disableHoverableContent
-        />
-      ) : (
-        copyButton
-      )}
+      <SimpleTooltip
+        asChild
+        tabbable
+        open={isHovered}
+        button={copyButton}
+        content={copied ? "Copied!" : "Copy"}
+        disableHoverableContent
+      />
     </div>
   );
 }

apps/webapp/app/components/primitives/ClipboardField.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { cn } from "~/utils/cn";
 import { CopyButton } from "./CopyButton";
 
@@ -116,7 +116,7 @@ export function ClipboardField({
   fullWidth = true,
 }: ClipboardFieldProps) {
   const [isSecure, setIsSecure] = useState(secure !== undefined && secure);
-  const inputIcon = useRef<HTMLInputElement>(null);
+  const inputId = useId();
   const { container, input, buttonVariant, button, size } = variants[variant];
 
   useEffect(() => {
@@ -127,10 +127,14 @@ export function ClipboardField({
 
   return (
     <span className={cn(container, fullWidth ? "w-full" : "max-w-fit", className)}>
-      {icon && <span className="flex items-center pl-1">{icon}</span>}
+      {icon && (
+        <label htmlFor={inputId} className="flex items-center pl-1">
+          {icon}
+        </label>
+      )}
       <input
+        id={inputId}
         type="text"
-        ref={inputIcon}
         value={isSecure ? maskedValue : value}
         readOnly={true}
         className={cn(

apps/webapp/app/components/primitives/Table.tsx

@@ -478,9 +478,10 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
     const [isHovered, setIsHovered] = useState(false);
     const { copy, copied } = useCopy(value);
 
-    // The button (with its aria-label) stays mounted at all times so keyboard users can always
-    // reach it. The Radix tooltip subtree is only mounted while the cell is hovered - the
-    // tooltip is a hover affordance, not required for the button's accessible name.
+    // The button (with its aria-label) always sits in the same position in the tree, wrapped by
+    // the same SimpleTooltip, so it is never unmounted/remounted on hover (which would drop
+    // keyboard focus). Only the tooltip's open state, not its mounted tree, follows hover; Radix
+    // still only renders the tooltip content into the DOM while `open` is true.
     const copyButton = (
       <button
         type="button"
@@ -514,17 +515,14 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
           onMouseLeave={() => setIsHovered(false)}
         >
           {children}
-          {isHovered ? (
-            <SimpleTooltip
-              asChild
-              tabbable
-              button={copyButton}
-              content={copied ? "Copied!" : "Copy"}
-              disableHoverableContent
-            />
-          ) : (
-            copyButton
-          )}
+          <SimpleTooltip
+            asChild
+            tabbable
+            open={isHovered}
+            button={copyButton}
+            content={copied ? "Copied!" : "Copy"}
+            disableHoverableContent
+          />
         </div>
       </TableCell>
     );