[fields] Fix value tracking in file fields

Author: x0k

.changeset/cute-apples-marry.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": patch
+---
+
+Refactor async logic in file fields

packages/form/src/fields/extra-fields/file.svelte

@@ -7,6 +7,8 @@
 </script>
 
 <script lang="ts">
+  import { untrack } from "svelte";
+
   import { fileToDataURL } from "@/lib/file.js";
   import { abortPrevious, createAction } from "@/lib/action.svelte.js";
   import {
@@ -44,7 +46,7 @@
     async execute(
       signal,
       files: FileList | undefined
-    ): Promise<string | undefined> {
+    ) {
       return files === undefined || files.length === 0
         ? undefined
         : fileToDataURL(signal, files[0]!);
@@ -74,8 +76,10 @@
     if (value === lastValueUpdate) {
       return;
     }
-    toValue.abort();
-    toFiles.run(value);
+    untrack(() => {
+      toValue.abort();
+      toFiles.run(value);
+    });
   });
 
   const errors = $derived(getErrors(ctx, config.id));

packages/form/src/fields/extra-fields/files.svelte

@@ -7,6 +7,8 @@
 </script>
 
 <script lang="ts">
+  import { untrack } from "svelte";
+
   import { fileToDataURL } from "@/lib/file.js";
   import { abortPrevious, createAction } from "@/lib/action.svelte.js";
   import {
@@ -41,10 +43,7 @@
   let lastValueUpdate: string[] | undefined;
   const toValue = createAction({
     combinator: abortPrevious,
-    async execute(
-      signal,
-      files: FileList | undefined
-    ): Promise<string[] | undefined> {
+    async execute(signal, files: FileList | undefined) {
       if (files === undefined) {
         return undefined;
       }
@@ -82,8 +81,10 @@
     ) {
       return;
     }
-    toValue.abort();
-    toFiles.run(value);
+    untrack(() => {
+      toValue.abort();
+      toFiles.run(value);
+    });
   });
 
   const errors = $derived(getErrors(ctx, config.id));