Merge pull request #8475 from Budibase/fix/remove-reactive-update-on-multiselect

Multiselect value parsing moved out of the component

packages/bbui/src/Form/Core/Multiselect.svelte

@@ -1,6 +1,6 @@
 <script>
   import Picker from "./Picker.svelte"
-  import { createEventDispatcher, onMount } from "svelte"
+  import { createEventDispatcher } from "svelte"
 
   export let value = []
   export let id = null
@@ -16,29 +16,6 @@
   export let autoWidth = false
 
   const dispatch = createEventDispatcher()
-  const parseValues = value => {
-    return Array.isArray(value)
-      ? value.reduce((acc, entry) => {
-          if (typeof ele === "string" && entry.trim() === "") {
-            return acc
-          }
-          let processedOption = String(entry)
-          if (options.indexOf(processedOption) > -1) {
-            acc.push(processedOption)
-          }
-          return acc
-        }, [])
-      : []
-  }
-  let loaded = false
-
-  $: combinedValues = value ? [...value].concat(options) : []
-  $: superSet = new Set(combinedValues)
-
-  $: if (loaded && options.length != superSet.size) {
-    // ensure that the values being pushed in are valid.
-    dispatch("change", parseValues(value))
-  }
 
   $: selectedLookupMap = getSelectedLookupMap(value)
   $: optionLookupMap = getOptionLookupMap(options)
@@ -95,10 +72,6 @@
       }
     }
   }
-
-  onMount(() => {
-    loaded = true
-  })
 </script>
 
 <Picker

packages/client/src/components/app/forms/InnerForm.svelte

@@ -128,6 +128,23 @@
     return fields.find(field => get(field).name === name)
   }
 
+  const getDefault = (defaultValue, schema, type) => {
+    // Remove any values not present in the field schema
+    // Convert any values supplied to string
+    if (Array.isArray(defaultValue) && type == "array") {
+      return defaultValue.reduce((acc, entry) => {
+        let processedOption = String(entry)
+        let schemaOptions = schema.constraints.inclusion
+        if (schemaOptions.indexOf(processedOption) > -1) {
+          acc.push(processedOption)
+        }
+        return acc
+      }, [])
+    } else {
+      return defaultValue
+    }
+  }
+
   const formApi = {
     registerField: (
       field,
@@ -153,8 +170,10 @@
             table
           )
 
+      const parsedDefault = getDefault(defaultValue, schema?.[field], type)
+
       // If we've already registered this field then keep some existing state
-      let initialValue = Helpers.deepGet(initialValues, field) ?? defaultValue
+      let initialValue = Helpers.deepGet(initialValues, field) ?? parsedDefault
       let initialError = null
       let fieldId = `id-${Helpers.uuid()}`
       const existingField = getField(field)
@@ -187,11 +206,11 @@
           error: initialError,
           disabled:
             disabled || fieldDisabled || (isAutoColumn && !editAutoColumns),
-          defaultValue,
+          defaultValue: parsedDefault,
           validator,
           lastUpdate: Date.now(),
         },
-        fieldApi: makeFieldApi(field, defaultValue),
+        fieldApi: makeFieldApi(field, parsedDefault),
         fieldSchema: schema?.[field] ?? {},
       })