fix(editor): stabilize async option refetching

Author: Danigm-dev

apps/sim/app/api/tools/opencode/prompt/route.ts

@@ -176,7 +176,7 @@ export async function POST(request: NextRequest) {
 
       return buildSuccessResponse(result.threadId, result.content, result.cost)
     } catch (error) {
-      if (reusedStoredThread && threadId && !newThread && shouldRetryWithFreshOpenCodeSession(error)) {
+      if (reusedStoredThread && threadId && shouldRetryWithFreshOpenCodeSession(error)) {
         let freshSessionId = threadId
 
         try {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx

@@ -127,30 +127,35 @@ export const ComboBox = memo(function ComboBox({
   const [hydratedOption, setHydratedOption] = useState<{ label: string; id: string } | null>(null)
   const previousDependencyValuesRef = useRef<string>('')
   const isOptionsFetchInFlightRef = useRef(false)
+  const fetchErrorRef = useRef<string | null>(null)
+  const hasAttemptedOptionsFetchRef = useRef(false)
 
   /**
    * Fetches options from the async fetchOptions function if provided
    */
-  const fetchOptionsIfNeeded = useCallback(async (force = false) => {
+  const fetchOptionsIfNeeded = useCallback(async (force = fetchErrorRef.current !== null) => {
     if (
       !fetchOptions ||
       isPreview ||
       disabled ||
-      (!force && hasAttemptedOptionsFetch) ||
+      (!force && hasAttemptedOptionsFetchRef.current) ||
       isOptionsFetchInFlightRef.current
     ) {
       return
     }
 
     isOptionsFetchInFlightRef.current = true
+    hasAttemptedOptionsFetchRef.current = true
     setHasAttemptedOptionsFetch(true)
+    fetchErrorRef.current = null
     setIsLoadingOptions(true)
     setFetchError(null)
     try {
       const options = await fetchOptions(blockId, subBlockId)
       setFetchedOptions(options)
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : 'Failed to fetch options'
+      fetchErrorRef.current = errorMessage
       setFetchError(errorMessage)
       setFetchedOptions([])
     } finally {
@@ -163,7 +168,6 @@ export const ComboBox = memo(function ComboBox({
     subBlockId,
     isPreview,
     disabled,
-    hasAttemptedOptionsFetch,
   ])
 
   // Determine the active value based on mode (preview vs. controlled vs. store)
@@ -328,7 +332,9 @@ export const ComboBox = memo(function ComboBox({
         currentDependencyValuesStr !== previousDependencyValuesStr
       ) {
         setFetchedOptions([])
+        fetchErrorRef.current = null
         setFetchError(null)
+        hasAttemptedOptionsFetchRef.current = false
         setHasAttemptedOptionsFetch(false)
         setHydratedOption(null)
       }
@@ -454,10 +460,10 @@ export const ComboBox = memo(function ComboBox({
   const handleOpenChange = useCallback(
     (open: boolean) => {
       if (open) {
-        void fetchOptionsIfNeeded(fetchError !== null)
+        void fetchOptionsIfNeeded()
       }
     },
-    [fetchError, fetchOptionsIfNeeded]
+    [fetchOptionsIfNeeded]
   )
 
   /**

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx

@@ -133,6 +133,8 @@ export const Dropdown = memo(function Dropdown({
   const previousModeRef = useRef<string | null>(null)
   const previousDependencyValuesRef = useRef<string>('')
   const isOptionsFetchInFlightRef = useRef(false)
+  const fetchErrorRef = useRef<string | null>(null)
+  const hasAttemptedOptionsFetchRef = useRef(false)
 
   const [builderData, setBuilderData] = useSubBlockValue<any[]>(blockId, 'builderData')
   const [data, setData] = useSubBlockValue<string>(blockId, 'data')
@@ -156,26 +158,29 @@ export const Dropdown = memo(function Dropdown({
         : []
     : null
 
-  const fetchOptionsIfNeeded = useCallback(async (force = false) => {
+  const fetchOptionsIfNeeded = useCallback(async (force = fetchErrorRef.current !== null) => {
     if (
       !fetchOptions ||
       isPreview ||
       disabled ||
-      (!force && hasAttemptedOptionsFetch) ||
+      (!force && hasAttemptedOptionsFetchRef.current) ||
       isOptionsFetchInFlightRef.current
     ) {
       return
     }
 
     isOptionsFetchInFlightRef.current = true
+    hasAttemptedOptionsFetchRef.current = true
     setHasAttemptedOptionsFetch(true)
+    fetchErrorRef.current = null
     setIsLoadingOptions(true)
     setFetchError(null)
     try {
       const options = await fetchOptions(blockId, subBlockId)
       setFetchedOptions(options)
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : 'Failed to fetch options'
+      fetchErrorRef.current = errorMessage
       setFetchError(errorMessage)
       setFetchedOptions([])
     } finally {
@@ -188,7 +193,6 @@ export const Dropdown = memo(function Dropdown({
     subBlockId,
     isPreview,
     disabled,
-    hasAttemptedOptionsFetch,
   ])
 
   /**
@@ -197,10 +201,10 @@ export const Dropdown = memo(function Dropdown({
   const handleOpenChange = useCallback(
     (open: boolean) => {
       if (open) {
-        void fetchOptionsIfNeeded(fetchError !== null)
+        void fetchOptionsIfNeeded()
       }
     },
-    [fetchError, fetchOptionsIfNeeded]
+    [fetchOptionsIfNeeded]
   )
 
   const evaluatedOptions = useMemo(() => {
@@ -391,7 +395,9 @@ export const Dropdown = memo(function Dropdown({
         currentDependencyValuesStr !== previousDependencyValuesStr
       ) {
         setFetchedOptions([])
+        fetchErrorRef.current = null
         setFetchError(null)
+        hasAttemptedOptionsFetchRef.current = false
         setHasAttemptedOptionsFetch(false)
         setHydratedOption(null)
       }