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

* 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

* chore(user-input): drop redundant inline comments from the mention-dismiss fix

Trims the inline // explanations added in the previous commit down to
the two declaration-level doc comments that carry real information —
matching the repo's no-inline-comments convention.

* fix(user-input): clear slash dismissal marker on explicit toolbar trigger

Cursor Bugbot review: insertSlashTrigger (the toolbar Slash button) called
syncSlashState without clearing dismissedSlashStartRef, so a stale dismissal
could suppress the skills menu on an explicit user action when the new
token's start offset coincided with the previously dismissed one. An
explicit trigger click must always open the menu, so it now clears the
marker first like every other insertion path.

Author: waleedlatif1

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

@@ -0,0 +1,246 @@
+/**
+ * @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'
+import type { SkillsMenuHandle } from '@/app/workspace/[workspaceId]/home/components/user-input/components/skills-menu-dropdown/skills-menu-dropdown'
+
+/**
+ * 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')
+      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')
+
+    act(() => {
+      result().handlePlusMenuClose()
+    })
+    expect(result().mentionQuery).toBeNull()
+
+    act(() => {
+      textarea.setSelectionRange(2, 2)
+      result().handleSelectAdjust()
+    })
+
+    expect(result().mentionQuery).toBeNull()
+    expect(openMenu.open).toHaveBeenCalledTimes(1)
+
+    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)
+
+    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)
+
+    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()
+  })
+})
+
+describe('usePromptEditor toolbar slash trigger after a dismiss', () => {
+  it('still opens the skills menu when the caret sits at the start of the previously dismissed token', () => {
+    const skillsMenu: SkillsMenuHandle = {
+      open: vi.fn(),
+      close: vi.fn(),
+      moveActive: vi.fn(),
+      selectActive: vi.fn(() => false),
+    }
+    const { result, textarea, unmount } = renderPromptEditor({ workspaceId: 'ws-1' })
+    result().skillsMenuRef.current = skillsMenu
+
+    act(() => {
+      result().insertSlashTrigger()
+    })
+    expect(skillsMenu.open).toHaveBeenCalledTimes(1)
+
+    act(() => {
+      result().handleSkillsMenuClose()
+    })
+
+    act(() => {
+      textarea.setSelectionRange(0, 0)
+      result().insertSlashTrigger()
+    })
+
+    expect(skillsMenu.open).toHaveBeenCalledTimes(2)
+
+    unmount()
+  })
+})

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

@@ -179,6 +179,15 @@ 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 most recently dismissed by the user
+   * (outside click or Escape) without a following keystroke — suppresses a
+   * single reopen of the menu for that exact token when the caret's own
+   * selection-change handler runs immediately after.
+   */
+  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 +336,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 +379,7 @@ export function usePromptEditor({
         atInsertPosRef.current = newPos
         mentionRangeRef.current = null
         setMentionQuery(null)
+        dismissedMentionStartRef.current = null
         setValueState(newValue)
       }
 
@@ -423,6 +435,7 @@ export function usePromptEditor({
         valueRef.current = newValue
         slashRangeRef.current = null
         setSlashQuery(null)
+        dismissedSlashStartRef.current = null
         setValueState(newValue)
       }
 
@@ -431,12 +444,24 @@ export function usePromptEditor({
     [textareaRef, addContextNotified]
   )
 
+  /**
+   * Only reachable via Radix's own dismiss detection (outside click /
+   * Escape) — programmatic closes (`skillsMenuRef.current?.close()`) bypass
+   * `onOpenChange` and never call this.
+   */
   const handleSkillsMenuClose = useCallback(() => {
+    dismissedSlashStartRef.current = slashRangeRef.current?.start ?? null
     slashRangeRef.current = null
     setSlashQuery(null)
   }, [])
 
+  /**
+   * Only reachable via Radix's own dismiss detection (outside click /
+   * Escape) — programmatic closes (`plusMenuRef.current?.close()`) bypass
+   * `onOpenChange` and never call this.
+   */
   const handlePlusMenuClose = useCallback(() => {
+    dismissedMentionStartRef.current = mentionRangeRef.current?.start ?? null
     atInsertPosRef.current = null
     mentionRangeRef.current = null
     setMentionQuery(null)
@@ -463,6 +488,15 @@ export function usePromptEditor({
           setMentionQuery(null)
           plusMenuRef.current?.close()
         }
+        dismissedMentionStartRef.current = null
+        return
+      }
+
+      if (active.start === dismissedMentionStartRef.current) {
+        if (mentionRangeRef.current !== null) {
+          mentionRangeRef.current = null
+          setMentionQuery(null)
+        }
         return
       }
 
@@ -491,6 +525,15 @@ export function usePromptEditor({
           setSlashQuery(null)
           skillsMenuRef.current?.close()
         }
+        dismissedSlashStartRef.current = null
+        return
+      }
+
+      if (active.start === dismissedSlashStartRef.current) {
+        if (slashRangeRef.current !== null) {
+          slashRangeRef.current = null
+          setSlashQuery(null)
+        }
         return
       }
 
@@ -530,6 +573,7 @@ export function usePromptEditor({
     setValueState(newValue)
     textarea.value = newValue
     textarea.setSelectionRange(newCaret, newCaret)
+    dismissedSlashStartRef.current = null
     syncSlashState(textarea, newValue, newCaret)
   }, [textareaRef, syncSlashState])
 
@@ -584,6 +628,8 @@ export function usePromptEditor({
       const caret = e.target.selectionStart ?? finalValue.length
       valueRef.current = finalValue
       setValueState(finalValue)
+      dismissedMentionStartRef.current = null
+      dismissedSlashStartRef.current = null
       syncMentionState(e.target, finalValue, caret)
       syncSlashState(e.target, finalValue, caret)
     },