fix(user-input): stop @mention/skill menu from reopening after dismiss

- Fixes a bug where the @mention (and /skill) autocomplete menu couldn't
  be dismissed: clicking away or pressing Escape closed it, but the very
  next click/selection change reopened it because the caret was still
  inside the unfinished @token
- Adds a one-shot "dismissed" marker per token, set only on a real
  outside-click/Escape dismiss, cleared the instant the user types again
- Shared fix in use-prompt-editor.ts covers every consumer: home chat
  input, scheduled-task modal, task-details modal

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.test.tsx

@@ -0,0 +1,226 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/hooks/queries/skills', () => ({ useSkills: () => ({ data: [] }) }))
+vi.mock('@/hooks/queries/workflows', () => ({ useWorkflows: () => ({ data: [] }) }))
+vi.mock('@/hooks/queries/tables', () => ({ useTablesList: () => ({ data: [] }) }))
+vi.mock('@/hooks/queries/workspace-files', () => ({ useWorkspaceFiles: () => ({ data: [] }) }))
+vi.mock('@/hooks/queries/kb/knowledge', () => ({ useKnowledgeBasesQuery: () => ({ data: [] }) }))
+vi.mock('@/hooks/queries/folders', () => ({ useFolders: () => ({ data: [] }) }))
+vi.mock('@/hooks/queries/workspace-file-folders', () => ({
+  useWorkspaceFileFolders: () => ({ data: [] }),
+}))
+vi.mock('@/hooks/queries/mothership-chats', () => ({ useMothershipChats: () => ({ data: [] }) }))
+vi.mock('@/hooks/queries/schedules', () => ({ useWorkspaceSchedules: () => ({ data: [] }) }))
+vi.mock('@/hooks/queries/logs', () => ({ useLogsList: () => ({ data: undefined }) }))
+vi.mock('@/blocks/integration-matcher', () => ({
+  getIntegrationMatcher: () => ({ regex: null, byName: new Map() }),
+  listIntegrations: () => [],
+}))
+
+import type { PlusMenuHandle } from '@/app/workspace/[workspaceId]/home/components/user-input/components/constants'
+import {
+  type UsePromptEditorProps,
+  usePromptEditor,
+} from '@/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor'
+
+/**
+ * Mounts `usePromptEditor` in a real React 19 root under jsdom (no
+ * `@testing-library/react` in this repo — see `hooks/queries/unsubscribe.test.tsx`
+ * for the established pattern) and wires a real `<textarea>` into its
+ * `textareaRef` so selection/caret-driven behavior (`handleSelectAdjust`,
+ * `syncMentionState`) runs exactly as it does in the rendered `PromptEditor`.
+ */
+function renderPromptEditor(props: UsePromptEditorProps) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const root: Root = createRoot(container)
+  let latest: ReturnType<typeof usePromptEditor>
+
+  function Probe() {
+    latest = usePromptEditor(props)
+    return null
+  }
+
+  function Wrapper({ children }: { children: ReactNode }) {
+    return <>{children}</>
+  }
+
+  act(() => {
+    root.render(
+      <Wrapper>
+        <Probe />
+      </Wrapper>
+    )
+  })
+
+  const textarea = document.createElement('textarea')
+  document.body.appendChild(textarea)
+  latest!.textareaRef.current = textarea
+
+  return {
+    result: () => latest,
+    textarea,
+    unmount: () => {
+      act(() => root.unmount())
+      container.remove()
+      textarea.remove()
+    },
+  }
+}
+
+/** Fires a native `input` event carrying the new value, as the textarea would on a keystroke. */
+function typeInto(textarea: HTMLTextAreaElement, value: string, caret = value.length) {
+  textarea.value = value
+  textarea.setSelectionRange(caret, caret)
+  textarea.dispatchEvent(new Event('input', { bubbles: true }))
+}
+
+describe('usePromptEditor mention menu dismissal', () => {
+  let openMenu: PlusMenuHandle
+
+  beforeEach(() => {
+    openMenu = {
+      open: vi.fn(),
+      close: vi.fn(),
+      moveActive: vi.fn(),
+      selectActive: vi.fn(() => false),
+    }
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('reopens the menu while the user keeps typing an unmatched mention', () => {
+    const { result, textarea, unmount } = renderPromptEditor({ workspaceId: 'ws-1' })
+    result().plusMenuRef.current = openMenu
+
+    act(() => {
+      typeInto(textarea, '@f')
+      // `onChange` in the real component is wired to `handleInputChange`; the
+      // hook only exposes it through the returned object, so invoke it the
+      // same way `<textarea onChange={editor.handleInputChange} />` would.
+      result().handleInputChange({
+        target: textarea,
+        currentTarget: textarea,
+      } as unknown as React.ChangeEvent<HTMLTextAreaElement>)
+    })
+
+    expect(result().mentionQuery).toBe('f')
+    expect(openMenu.open).toHaveBeenCalledTimes(1)
+
+    unmount()
+  })
+
+  it('does not reopen after the user clicks away, even if the caret lands back inside the open mention', () => {
+    const { result, textarea, unmount } = renderPromptEditor({ workspaceId: 'ws-1' })
+    result().plusMenuRef.current = openMenu
+
+    act(() => {
+      typeInto(textarea, '@f')
+      result().handleInputChange({
+        target: textarea,
+        currentTarget: textarea,
+      } as unknown as React.ChangeEvent<HTMLTextAreaElement>)
+    })
+    expect(result().mentionQuery).toBe('f')
+
+    // Radix's DismissableLayer calls this on outside pointerdown / Escape —
+    // never on a programmatic `plusMenuRef.current.close()`.
+    act(() => {
+      result().handlePlusMenuClose()
+    })
+    expect(result().mentionQuery).toBeNull()
+
+    // The same click that dismissed the popover also moves the caret via
+    // native textarea behavior; the caret lands back at the end of the text,
+    // i.e. still inside the unterminated "@f" token. Simulate the resulting
+    // onSelect/onMouseUp without any further keystroke.
+    act(() => {
+      textarea.setSelectionRange(2, 2)
+      result().handleSelectAdjust()
+    })
+
+    expect(result().mentionQuery).toBeNull()
+    expect(openMenu.open).toHaveBeenCalledTimes(1) // only the original open — no reopen
+
+    unmount()
+  })
+
+  it('lets a further keystroke reopen the same mention after a dismiss', () => {
+    const { result, textarea, unmount } = renderPromptEditor({ workspaceId: 'ws-1' })
+    result().plusMenuRef.current = openMenu
+
+    act(() => {
+      typeInto(textarea, '@f')
+      result().handleInputChange({
+        target: textarea,
+        currentTarget: textarea,
+      } as unknown as React.ChangeEvent<HTMLTextAreaElement>)
+    })
+    act(() => {
+      result().handlePlusMenuClose()
+    })
+    act(() => {
+      textarea.setSelectionRange(2, 2)
+      result().handleSelectAdjust()
+    })
+    expect(openMenu.open).toHaveBeenCalledTimes(1)
+
+    // User keeps editing the same token — this must reopen it.
+    act(() => {
+      typeInto(textarea, '@fo', 3)
+      result().handleInputChange({
+        target: textarea,
+        currentTarget: textarea,
+      } as unknown as React.ChangeEvent<HTMLTextAreaElement>)
+    })
+
+    expect(result().mentionQuery).toBe('fo')
+    expect(openMenu.open).toHaveBeenCalledTimes(2)
+
+    unmount()
+  })
+
+  it('does not suppress a different mention typed after a dismiss', () => {
+    const { result, textarea, unmount } = renderPromptEditor({ workspaceId: 'ws-1' })
+    result().plusMenuRef.current = openMenu
+
+    act(() => {
+      typeInto(textarea, '@f')
+      result().handleInputChange({
+        target: textarea,
+        currentTarget: textarea,
+      } as unknown as React.ChangeEvent<HTMLTextAreaElement>)
+    })
+    act(() => {
+      result().handlePlusMenuClose()
+    })
+    act(() => {
+      textarea.setSelectionRange(2, 2)
+      result().handleSelectAdjust()
+    })
+    expect(openMenu.open).toHaveBeenCalledTimes(1)
+
+    // Clear the field and start a brand new mention elsewhere in the text —
+    // a stale dismissal must never leak onto an unrelated token.
+    act(() => {
+      typeInto(textarea, '@f done. @g', 11)
+      result().handleInputChange({
+        target: textarea,
+        currentTarget: textarea,
+      } as unknown as React.ChangeEvent<HTMLTextAreaElement>)
+    })
+
+    expect(result().mentionQuery).toBe('g')
+    expect(openMenu.open).toHaveBeenCalledTimes(2)
+
+    unmount()
+  })
+})

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.ts

@@ -179,6 +179,18 @@ export function usePromptEditor({
   const slashRangeRef = useRef<{ start: number; end: number } | null>(null)
   const [slashQuery, setSlashQuery] = useState<string | null>(null)
 
+  /**
+   * Start offset of a mention/slash token the user just dismissed via outside
+   * click or Escape. A dismiss alone doesn't move the caret, so the very next
+   * `selectionchange`/click still lands inside the still-open token range and
+   * would otherwise reopen the menu it was just closed — the "can't click
+   * away" bug. Suppresses exactly one reopen per token; cleared the moment
+   * the user types again (`handleInputChange`) so editing the token still
+   * works normally.
+   */
+  const dismissedMentionStartRef = useRef<number | null>(null)
+  const dismissedSlashStartRef = useRef<number | null>(null)
+
   const contextManagement = useContextManagement({ message: value, initialContexts })
   const contextManagementRef = useRef(contextManagement)
   contextManagementRef.current = contextManagement
@@ -327,9 +339,11 @@ export function usePromptEditor({
     plusMenuRef.current?.close()
     mentionRangeRef.current = null
     setMentionQuery(null)
+    dismissedMentionStartRef.current = null
     skillsMenuRef.current?.close()
     slashRangeRef.current = null
     setSlashQuery(null)
+    dismissedSlashStartRef.current = null
     if (textareaRef.current) {
       textareaRef.current.style.height = 'auto'
     }
@@ -368,6 +382,7 @@ export function usePromptEditor({
         atInsertPosRef.current = newPos
         mentionRangeRef.current = null
         setMentionQuery(null)
+        dismissedMentionStartRef.current = null
         setValueState(newValue)
       }
 
@@ -423,6 +438,7 @@ export function usePromptEditor({
         valueRef.current = newValue
         slashRangeRef.current = null
         setSlashQuery(null)
+        dismissedSlashStartRef.current = null
         setValueState(newValue)
       }
 
@@ -432,11 +448,18 @@ export function usePromptEditor({
   )
 
   const handleSkillsMenuClose = useCallback(() => {
+    // See `handlePlusMenuClose` — only reachable via a real Radix dismiss.
+    dismissedSlashStartRef.current = slashRangeRef.current?.start ?? null
     slashRangeRef.current = null
     setSlashQuery(null)
   }, [])
 
   const handlePlusMenuClose = useCallback(() => {
+    // Only reachable via Radix's own dismiss detection (outside click / Escape) —
+    // programmatic closes (`plusMenuRef.current?.close()`) bypass `onOpenChange`
+    // and never call this. Remember the token so the caret's own selection-change
+    // handler (fired by the same click) doesn't immediately reopen it.
+    dismissedMentionStartRef.current = mentionRangeRef.current?.start ?? null
     atInsertPosRef.current = null
     mentionRangeRef.current = null
     setMentionQuery(null)
@@ -463,6 +486,17 @@ export function usePromptEditor({
           setMentionQuery(null)
           plusMenuRef.current?.close()
         }
+        dismissedMentionStartRef.current = null
+        return
+      }
+
+      // The user just dismissed the menu for this exact token (outside click /
+      // Escape) and hasn't typed since — a caret move alone must not reopen it.
+      if (active.start === dismissedMentionStartRef.current) {
+        if (mentionRangeRef.current !== null) {
+          mentionRangeRef.current = null
+          setMentionQuery(null)
+        }
         return
       }
 
@@ -491,6 +525,16 @@ export function usePromptEditor({
           setSlashQuery(null)
           skillsMenuRef.current?.close()
         }
+        dismissedSlashStartRef.current = null
+        return
+      }
+
+      // See the mirrored check in `syncMentionState`.
+      if (active.start === dismissedSlashStartRef.current) {
+        if (slashRangeRef.current !== null) {
+          slashRangeRef.current = null
+          setSlashQuery(null)
+        }
         return
       }
 
@@ -584,6 +628,10 @@ export function usePromptEditor({
       const caret = e.target.selectionStart ?? finalValue.length
       valueRef.current = finalValue
       setValueState(finalValue)
+      // A keystroke is an active edit — always let it reopen a just-dismissed
+      // menu, even for the same token the user clicked away from.
+      dismissedMentionStartRef.current = null
+      dismissedSlashStartRef.current = null
       syncMentionState(e.target, finalValue, caret)
       syncSlashState(e.target, finalValue, caret)
     },