fix(ui): keep overflow tooltips in sync

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useId } from 'react'
+import { type ReactNode, useId, useState } from 'react'
 import { cn, OverflowText } from '@sim/emcn'
 import { ArrowRight } from '@sim/emcn/icons'
 import Link from 'next/link'
@@ -135,8 +135,10 @@ export function SettingsResourceRow({
   flush = false,
   disabled = false,
 }: SettingsResourceRowProps) {
+  const [control, setControl] = useState<HTMLAnchorElement | HTMLButtonElement | null>(null)
   const describedById = useId()
   const isTile = iconVariant === 'tile'
+  const isActivatable = !disabled && Boolean(onClick || href)
   const cluster = (
     <>
       {icon == null ? null : iconVariant === 'custom' ? (
@@ -158,7 +160,11 @@ export function SettingsResourceRow({
       )}
       <div className='relative z-10 flex min-w-0 flex-col justify-center gap-[1px] text-left'>
         {typeof title === 'string' ? (
-          <OverflowText label={title} className='text-[var(--text-body)] text-sm' />
+          <OverflowText
+            label={title}
+            className='text-[var(--text-body)] text-sm'
+            focusTarget={isActivatable ? control : undefined}
+          />
         ) : (
           <span className='truncate text-[var(--text-body)] text-sm'>{title}</span>
         )}
@@ -226,6 +232,7 @@ export function SettingsResourceRow({
     >
       {href ? (
         <Link
+          ref={setControl}
           href={href}
           aria-label={clickLabel}
           aria-describedby={description != null ? describedById : undefined}
@@ -235,6 +242,7 @@ export function SettingsResourceRow({
         </Link>
       ) : (
         <button
+          ref={setControl}
           type='button'
           onClick={onClick}
           aria-label={clickLabel}

packages/emcn/src/components/overflow-text/overflow-text.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @vitest-environment jsdom
  */
-import { act } from 'react'
+import { act, useState } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { OverflowText } from './overflow-text'
@@ -100,6 +100,9 @@ describe('OverflowText', () => {
     expect(document.querySelector('[data-native-surface-overlay]')?.textContent).toBe(
       'A long workflow name'
     )
+
+    setWidths(label, 200, 180)
+    expect(document.querySelector('[data-native-surface-overlay]')).toBeNull()
   })
 
   it('leaves a fitting label unmasked and does not open a tooltip', () => {
@@ -134,6 +137,33 @@ describe('OverflowText', () => {
     expect(document.querySelector('[data-native-surface-overlay]')).toBeNull()
   })
 
+  it('opens from an external composite control keyboard focus', () => {
+    function CompositeLabel() {
+      const [focusTarget, setFocusTarget] = useState<HTMLButtonElement | null>(null)
+      return (
+        <>
+          <button ref={setFocusTarget} type='button'>
+            Open workflow
+          </button>
+          <OverflowText label='A long workflow name' focusTarget={focusTarget} />
+        </>
+      )
+    }
+
+    act(() => root.render(<CompositeLabel />))
+    const button = host.querySelector('button')
+    const label = host.querySelector<HTMLElement>('[data-overflow-text]')
+    if (!button || !label) throw new Error('Composite label did not render')
+
+    setWidths(label, 80, 180)
+    vi.spyOn(button, 'matches').mockReturnValue(true)
+    act(() => button.focus())
+
+    expect(document.querySelector('[data-native-surface-overlay]')?.textContent).toBe(
+      'A long workflow name'
+    )
+  })
+
   it('keeps decorated visible content out of the plain tooltip label', () => {
     act(() =>
       root.render(

packages/emcn/src/components/overflow-text/overflow-text.tsx

@@ -25,6 +25,8 @@ export interface OverflowTextProps {
   showWhen?: boolean
   /** Whether the full-value tooltip may open. Disable for visual mirror layers. */
   tooltipEnabled?: boolean
+  /** External composite control whose keyboard focus should reveal the tooltip. */
+  focusTarget?: HTMLElement | null
 }
 
 /**
@@ -41,13 +43,18 @@ export const OverflowText = memo(function OverflowText({
   className,
   showWhen,
   tooltipEnabled = true,
+  focusTarget,
 }: OverflowTextProps) {
   const { ref: textRef, node, isOverflowing } = useIsOverflowing<HTMLSpanElement>(label)
-  const { state, handlers } = useFloatingTooltip(() => {
-    const element = node.current
-    if (!tooltipEnabled || !element || label.length === 0) return false
-    return Boolean(showWhen) || isTextClipped(element)
-  })
+  const tooltipEligible = tooltipEnabled && label.length > 0 && (Boolean(showWhen) || isOverflowing)
+  const { state, handlers } = useFloatingTooltip(
+    () => {
+      const element = node.current
+      if (!tooltipEnabled || !element || label.length === 0) return false
+      return Boolean(showWhen) || isTextClipped(element)
+    },
+    { focusTarget, revalidateKey: tooltipEligible }
+  )
 
   return (
     <>

packages/emcn/src/components/tooltip/tooltip.tsx

@@ -83,18 +83,21 @@ const HIDDEN_STATE: FloatingTooltipState = {
 }
 
 /**
- * Drives a pointer-reactive floating tooltip. `canShow` is queried on every
- * gesture with the event target, letting the caller gate the tooltip on its own
- * overflow measurement. Returns the current {@link FloatingTooltipState} to feed
- * a {@link FloatingTooltip} and a stable set of {@link FloatingTooltipHandlers}
- * to spread onto the trigger element.
+ * Drives a pointer-reactive floating tooltip. `canShow` is checked on each
+ * gesture and while visible, allowing callers to dismiss the tooltip when its
+ * eligibility changes. Returns the current state and stable pointer/focus
+ * handlers; `focusTarget` may supply a separate keyboard-focus trigger.
  */
 export interface UseFloatingTooltipOptions {
   /**
    * Prefer placing the bubble above the cursor. Still flips below when the
    * pointer is too close to the top of the viewport.
    */
   preferAbove?: boolean
+  /** External control whose keyboard focus should reveal this tooltip. */
+  focusTarget?: HTMLElement | null
+  /** Semantic value whose changes should revalidate a visible tooltip. */
+  revalidateKey?: unknown
 }
 
 export function useFloatingTooltip(
@@ -126,41 +129,49 @@ export function useFloatingTooltip(
     setState((current) => (current.visible ? HIDDEN_STATE : current))
   }, [reset])
 
-  const handlers = React.useMemo<FloatingTooltipHandlers>(() => {
-    const apply = (clientX: number, clientY: number, motion: TooltipMotion) => {
-      const next = { ...getTooltipPosition(clientX, clientY, preferAboveRef.current), ...motion }
-      setState((current) =>
-        current.visible &&
-        current.x === next.x &&
-        current.y === next.y &&
-        current.alignX === next.alignX &&
-        current.alignY === next.alignY &&
-        current.skew === next.skew &&
-        current.scaleX === next.scaleX &&
-        current.scaleY === next.scaleY
-          ? current
-          : { visible: true, ...next }
-      )
-    }
+  const apply = React.useCallback((clientX: number, clientY: number, motion: TooltipMotion) => {
+    const next = { ...getTooltipPosition(clientX, clientY, preferAboveRef.current), ...motion }
+    setState((current) =>
+      current.visible &&
+      current.x === next.x &&
+      current.y === next.y &&
+      current.alignX === next.alignX &&
+      current.alignY === next.alignY &&
+      current.skew === next.skew &&
+      current.scaleX === next.scaleX &&
+      current.scaleY === next.scaleY
+        ? current
+        : { visible: true, ...next }
+    )
+  }, [])
 
-    /** Reveals the tooltip at the pointer, seeding velocity tracking from it. */
-    const showFromPointer = (clientX: number, clientY: number) => {
+  const showFromPointer = React.useCallback(
+    (clientX: number, clientY: number) => {
       reset()
       lastPointerRef.current = { x: clientX, y: clientY, time: performance.now() }
       apply(clientX, clientY, NEUTRAL_MOTION)
-    }
+    },
+    [apply, reset]
+  )
 
-    /**
-     * Reveals the tooltip anchored to an element's box rather than the pointer.
-     * Velocity tracking stays cleared: seeding it from the box would make the next
-     * `pointermove` read the box-to-cursor delta as velocity and spike the flourish
-     * when the pointer already happens to be over the trigger.
-     */
-    const showFromElement = (clientX: number, clientY: number) => {
+  /**
+   * Anchors the tooltip to an element without seeding pointer velocity; using the
+   * box position would make the next pointer move produce a false motion spike.
+   */
+  const showFromElement = React.useCallback(
+    (target: HTMLElement) => {
       reset()
-      apply(clientX, clientY, NEUTRAL_MOTION)
-    }
+      const rect = target.getBoundingClientRect()
+      apply(
+        rect.left + rect.width / 2,
+        preferAboveRef.current ? rect.top : rect.bottom,
+        NEUTRAL_MOTION
+      )
+    },
+    [apply, reset]
+  )
 
+  const handlers = React.useMemo<FloatingTooltipHandlers>(() => {
     return {
       onPointerEnter: (event) => {
         if (!canShowRef.current(event.currentTarget)) return
@@ -200,14 +211,32 @@ export function useFloatingTooltip(
         if (!canShowRef.current(target)) return
         if (!isFocusVisible(target)) return
         triggerRef.current = target
-        const rect = target.getBoundingClientRect()
-        /* Anchor on the edge the bubble grows away from, so a `preferAbove`
-           tooltip measures from the trigger's top rather than its bottom. */
-        showFromElement(rect.left + rect.width / 2, preferAboveRef.current ? rect.top : rect.bottom)
+        showFromElement(target)
       },
       onBlur: hide,
     }
-  }, [hide, reset])
+  }, [apply, hide, showFromElement, showFromPointer])
+
+  React.useEffect(() => {
+    const target = options.focusTarget
+    if (!target) return undefined
+    const show = () => {
+      if (!canShowRef.current(target) || !isFocusVisible(target)) return
+      triggerRef.current = target
+      showFromElement(target)
+    }
+    target.addEventListener('focus', show)
+    target.addEventListener('blur', hide)
+    return () => {
+      target.removeEventListener('focus', show)
+      target.removeEventListener('blur', hide)
+    }
+  }, [hide, options.focusTarget, showFromElement])
+
+  React.useEffect(() => {
+    const trigger = triggerRef.current
+    if (state.visible && (!trigger || !canShowRef.current(trigger))) hide()
+  }, [hide, options.revalidateKey, state.visible])
 
   /**
    * A keyboard- or script-driven UI change can hide the trigger with no pointer or focus event —