fix(file-upload): add syncRead as bindable parameter to fix stale onFileChange callback data

Signed-off-by: Dustin Pham <dustinpham95@gmail.com>

Author: DustinPham

packages/common/core/src/file-upload/file-upload.machine.ts

@@ -156,6 +156,7 @@ export const fileUploadMachine: MachineConfig<FileUploadSchema> = createMachine(
               rejectedFiles: ctx.get("rejectedFiles"),
             })
           },
+          syncRead: true,
           value: prop("acceptedFiles"),
         })),
         rejectedFiles: bindable<FileRejection[]>(() => ({
@@ -171,6 +172,7 @@ export const fileUploadMachine: MachineConfig<FileUploadSchema> = createMachine(
               rejectedFiles: value,
             })
           },
+          syncRead: true,
         })),
         transforming: bindable<boolean>(() => ({
           defaultValue: false,

packages/common/utils/src/machine/machine.types.ts

@@ -101,6 +101,13 @@ export interface BindableParams<T, ChangeEvent> {
   isEqual?: (a: T, b: T | undefined) => boolean
   onChange?: (value: T, details: ChangeEvent, prevValue: T | undefined) => void
   sync?: boolean
+  /**
+   * When true, immediately updates the ref value before triggering a re-render.
+   * This ensures `ctx.get()` returns the updated value synchronously, which is
+   * useful when multiple bindables need to read each other's values in onChange
+   * callbacks.
+   */
+  syncRead?: boolean
   value?: T | undefined
 }
 

packages/frameworks/react-core/src/machine/use-bindable.ts

@@ -39,6 +39,9 @@ export function useBindable<T, ChangeEvent extends EventDetails | void | null>(
     const next = isFunction(value) ? value(prev as T) : value
 
     if (!controlled) {
+      if (props().syncRead) {
+        valueRef.current = next
+      }
       setValue(next)
     }
     if (!eq(next, prev)) {