Merge pull request #8282 from Budibase/fix/multipicker-default-behaviour

Parse multi-select values/defaults to avoid unusable options.

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

@@ -1,6 +1,6 @@
 <script>
   import Picker from "./Picker.svelte"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, onMount } from "svelte"
 
   export let value = []
   export let id = null
@@ -16,8 +16,33 @@
   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)
+
   $: fieldText = getFieldText(value, optionLookupMap, placeholder)
   $: isOptionSelected = optionValue => selectedLookupMap[optionValue] === true
   $: toggleOption = makeToggleOption(selectedLookupMap, value)
@@ -70,6 +95,10 @@
       }
     }
   }
+
+  onMount(() => {
+    loaded = true
+  })
 </script>
 
 <Picker

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -247,7 +247,7 @@
                       return
                     }
                     hoverTarget = {
-                      title: binding.display?.name || binding.fieldSchema.name,
+                      title: binding.display?.name || binding.fieldSchema?.name,
                       description: binding.description,
                     }
                     popover.show()

packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte

@@ -305,6 +305,9 @@
                       getOptionLabel={x => x}
                       getOptionValue={x => x}
                       value={rule.value}
+                      on:change={e => {
+                        rule.value = e.detail
+                      }}
                     />
                   {:else if rule.type === "boolean"}
                     <Select

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

@@ -32,6 +32,7 @@
     validation,
     formStep
   )
+
   $: schemaType = fieldSchema?.type !== "formula" ? fieldSchema?.type : "string"
 
   // Focus label when editing

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

@@ -143,6 +143,7 @@
 
       // Create validation function based on field schema
       const schemaConstraints = schema?.[field]?.constraints
+
       const validator = disableValidation
         ? null
         : createValidatorFromConstraints(