[form] Fix multi-field selector

x0k · Nov 11, 2024 · d8b4211 · d8b4211
1 parent e0a796e
commit d8b4211
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/.changeset/blue-kiwis-do.md b/.changeset/blue-kiwis-do.md
@@ -0,0 +1,7 @@
+---
+"@sjsf/form": patch
+---
+
+Fix multi-field selector
+
+This is not a proper fix (array of multi-fields is still broken) but it's a good place to start.
diff --git a/packages/form/src/form/fields/multi-field.svelte b/packages/form/src/form/fields/multi-field.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
   import { proxy } from "@/lib/svelte.svelte";
+  import { deepEqual } from '@/lib/deep-equal.js'
   import {
     getDiscriminatorFieldFromSchema,
     mergeSchemas,
     type EnumOption,
+    type SchemaValue,
   } from '@/core/index.js';
 
   import type { Config } from '../config.js';
@@ -43,20 +45,24 @@
     )
   );
 
-  const selectedOption = proxy((isRegOnly) => {
+  let lastValue: SchemaValue | undefined
+  const selectedOption = proxy((isRegOnly, currentSelected: number | undefined) => {
     if (isRegOnly) {
       config.schema;
       value;
       retrievedOptions;
       return -1;
     }
-    const discriminator = getDiscriminatorFieldFromSchema(config.schema);
+    if (currentSelected !== undefined && deepEqual(lastValue, value)) {
+      return currentSelected
+    }
+    lastValue = $state.snapshot(value)
     return getClosestMatchingOption(
       ctx,
       value,
       retrievedOptions,
       0,
-      discriminator
+      getDiscriminatorFieldFromSchema(config.schema),
     );
   }, (newSelected, oldSelected) => {
     if (oldSelected === undefined) {

diff --git a/packages/form/src/lib/svelte.svelte.ts b/packages/form/src/lib/svelte.svelte.ts
@@ -4,8 +4,8 @@ export interface SyncInput<V> {
   /**
    * @param isDependencyRegistrationOnlyCall - when `true`, indicates that function is called only for dependency registration and result will be ignored
    */
-  (isDependencyRegistrationOnlyCall: false): V;
-  (isDependencyRegistrationOnlyCall: true): void;
+  (isDependencyRegistrationOnlyCall: false, currentValue: V | undefined): V;
+  (isDependencyRegistrationOnlyCall: true, currentValue: V | undefined): void;
 }
 
 export function proxy<V>(input: SyncInput<V>, onChange?: (value: V, prev: V) => void) {
@@ -15,10 +15,10 @@ export function proxy<V>(input: SyncInput<V>, onChange?: (value: V, prev: V) =>
     const proxyVal = proxyValue;
     if (ignoreInputUpdate) {
       ignoreInputUpdate = false;
-      input(true);
+      input(true, proxyVal);
       return proxyVal as V;
     }
-    return input(false);
+    return input(false, proxyVal);
   });
   return {
     get value() {