fix(search-replace): don't auto-navigate when content edits invalidate the active match

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx

@@ -169,6 +169,9 @@ export function WorkflowSearchReplace() {
       setActiveMatchId: state.setActiveMatchId,
     }))
   )
+  const prevQueryRef = useRef(query)
+  const prevIsOpenRef = useRef(false)
+  const afterReplaceIndexRef = useRef<number | null>(null)
   const { data: workspaceCredentials } = useWorkspaceCredentials({ workspaceId, enabled: isOpen })
 
   useRegisterGlobalCommands([
@@ -248,10 +251,7 @@ export function WorkflowSearchReplace() {
   )
 
   useEffect(() => {
-    if (!isOpen) {
-      usePanelEditorSearchStore.getState().setActiveSearchTarget(null)
-      return
-    }
+    if (!isOpen) return
     searchInputRef.current?.focus()
     searchInputRef.current?.select()
   }, [isOpen])
@@ -311,10 +311,7 @@ export function WorkflowSearchReplace() {
 
     return []
   }, [activeMatch, hydratedMatches])
-  const eligibleMatchIds = useMemo(
-    () => replaceAllTargetMatches.map((match) => match.id),
-    [replaceAllTargetMatches]
-  )
+  const eligibleMatchIds = replaceAllTargetMatches.map((match) => match.id)
   const controlTargetMatches = activeMatch ? [activeMatch] : []
   const usesResourceReplacement = controlTargetMatches.some(isConstrainedResourceMatch)
   const resourceReplacementContextKey =
@@ -324,23 +321,20 @@ export function WorkflowSearchReplace() {
   const replacement = resourceReplacementContextKey
     ? (resourceReplacementByContext[resourceReplacementContextKey] ?? '')
     : textReplacement
-  const handleReplacementChange = useCallback(
-    (nextReplacement: string) => {
-      if (!resourceReplacementContextKey) {
-        setReplacement(nextReplacement)
-        return
-      }
+  const handleReplacementChange = (nextReplacement: string) => {
+    if (!resourceReplacementContextKey) {
+      setReplacement(nextReplacement)
+      return
+    }
 
-      setResourceReplacementByContext((current) => ({
-        ...current,
-        [resourceReplacementContextKey]: nextReplacement,
-      }))
-    },
-    [resourceReplacementContextKey, setReplacement]
-  )
-  const compatibleResourceOptions = useMemo(
-    () => getCompatibleResourceReplacementOptions(controlTargetMatches, resourceOptions),
-    [controlTargetMatches, resourceOptions]
+    setResourceReplacementByContext((current) => ({
+      ...current,
+      [resourceReplacementContextKey]: nextReplacement,
+    }))
+  }
+  const compatibleResourceOptions = getCompatibleResourceReplacementOptions(
+    controlTargetMatches,
+    resourceOptions
   )
   const hasReplacement = replacement.trim().length > 0
   const activeReplacementIssue = activeMatch
@@ -359,34 +353,51 @@ export function WorkflowSearchReplace() {
         })
       : 'No replaceable matches.'
 
-  const applySubflowUpdate = useCallback(
-    (update: WorkflowSearchReplaceSubflowUpdate) => {
-      if (update.fieldId === WORKFLOW_SEARCH_SUBFLOW_FIELD_IDS.iterations) {
-        if (typeof update.nextValue !== 'number') return
-        collaborativeUpdateIterationCount(update.blockId, update.blockType, update.nextValue)
-        return
-      }
+  const applySubflowUpdate = (update: WorkflowSearchReplaceSubflowUpdate) => {
+    if (update.fieldId === WORKFLOW_SEARCH_SUBFLOW_FIELD_IDS.iterations) {
+      if (typeof update.nextValue !== 'number') return
+      collaborativeUpdateIterationCount(update.blockId, update.blockType, update.nextValue)
+      return
+    }
 
-      collaborativeUpdateIterationCollection(
-        update.blockId,
-        update.blockType,
-        String(update.nextValue)
-      )
-    },
-    [collaborativeUpdateIterationCollection, collaborativeUpdateIterationCount]
-  )
+    collaborativeUpdateIterationCollection(
+      update.blockId,
+      update.blockType,
+      String(update.nextValue)
+    )
+  }
 
   useEffect(() => {
-    if (!isOpen) return
+    if (!isOpen) {
+      prevIsOpenRef.current = false
+      usePanelEditorSearchStore.getState().setActiveSearchTarget(null)
+      return
+    }
+
+    const justOpened = !prevIsOpenRef.current
+    prevIsOpenRef.current = true
+    const queryChanged = prevQueryRef.current !== query
+    prevQueryRef.current = query
 
     if (hydratedMatches.length === 0) {
+      afterReplaceIndexRef.current = null
       if (activeMatchId) setActiveMatchId(null)
       usePanelEditorSearchStore.getState().setActiveSearchTarget(null)
       return
     }
 
     if (!activeMatchId || !hydratedMatches.some((match) => match.id === activeMatchId)) {
-      handleSelectMatch(hydratedMatches[0].id)
+      const replaceIndex = afterReplaceIndexRef.current
+      afterReplaceIndexRef.current = null
+
+      if (queryChanged || justOpened) {
+        handleSelectMatch(hydratedMatches[0].id)
+      } else if (replaceIndex !== null) {
+        handleSelectMatch(hydratedMatches[Math.min(replaceIndex, hydratedMatches.length - 1)].id)
+      } else {
+        setActiveMatchId(null)
+        usePanelEditorSearchStore.getState().setActiveSearchTarget(null)
+      }
       return
     }
 
@@ -401,14 +412,19 @@ export function WorkflowSearchReplace() {
 
   const handleMoveActiveMatch = (delta: number) => {
     if (hydratedMatches.length === 0) return
-    const currentIndex = activeMatchIndex >= 0 ? activeMatchIndex : 0
-    const nextIndex = (currentIndex + delta + hydratedMatches.length) % hydratedMatches.length
+    if (activeMatchIndex < 0) {
+      handleSelectMatch(hydratedMatches[delta > 0 ? 0 : hydratedMatches.length - 1].id)
+      return
+    }
+    const nextIndex = (activeMatchIndex + delta + hydratedMatches.length) % hydratedMatches.length
     handleSelectMatch(hydratedMatches[nextIndex].id)
   }
 
-  const handleApply = (matchIds: string[]) => {
+  const handleApply = (matchIds: string[], replaceActiveIndex?: number) => {
     if (!workflowId || isApplying || searchReadOnly) return
+    if (replaceActiveIndex !== undefined) afterReplaceIndexRef.current = replaceActiveIndex
     setIsApplying(true)
+    let committed = false
 
     try {
       const selectedIds = new Set(matchIds)
@@ -505,14 +521,16 @@ export function WorkflowSearchReplace() {
         message: `Replaced ${replacedCount} field${replacedCount === 1 ? '' : 's'}.`,
         workflowId,
       })
+      committed = true
     } finally {
       setIsApplying(false)
+      if (!committed) afterReplaceIndexRef.current = null
     }
   }
 
   const handleReplaceActive = () => {
     if (!activeMatch) return
-    handleApply([activeMatch.id])
+    handleApply([activeMatch.id], activeMatchIndex)
   }
 
   const handleReplaceAll = () => {
@@ -522,7 +540,9 @@ export function WorkflowSearchReplace() {
   const matchCountLabel =
     hydratedMatches.length === 0
       ? 'No results'
-      : `${activeMatchIndex >= 0 ? activeMatchIndex + 1 : 1} of ${hydratedMatches.length}`
+      : activeMatchIndex >= 0
+        ? `${activeMatchIndex + 1} of ${hydratedMatches.length}`
+        : `0 of ${hydratedMatches.length}`
   return (
     <div
       role='dialog'
@@ -566,7 +586,7 @@ export function WorkflowSearchReplace() {
         >
           <ChevronRight
             className={cn(
-              'h-[14px] w-[14px] text-[var(--text-icon)] transition-transform',
+              'size-[14px] text-[var(--text-icon)] transition-transform',
               isReplaceExpanded && 'rotate-90'
             )}
           />