From bb4ee20bd624f3f0f806589912ecf8da0c618c02 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 17 Oct 2022 12:03:13 +0100
Subject: [PATCH 1/5] Values or defaults passed to the picker are parsed to
 ensure only valid options are marked/added to the component.

---
 .../bbui/src/Form/Core/Multiselect.svelte     | 22 ++++++++++++++++---
 .../common/bindings/BindingPanel.svelte       |  2 +-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index eb39e39042..3fbbaf5d4a 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -15,12 +15,28 @@
   export let sort = false
   export let autoWidth = false
 
+  $: streamed = Array.isArray(value)
+    ? value.reduce((acc, ele) => {
+        if (typeof ele === "string") {
+          let temp = ele.trim()
+          if (!temp) {
+            return acc
+          }
+        }
+        let processedOpt = ele.toString()
+        if (options.indexOf(processedOpt) > -1) {
+          acc.push(ele.toString())
+        }
+        return acc
+      }, [])
+    : []
+
   const dispatch = createEventDispatcher()
-  $: selectedLookupMap = getSelectedLookupMap(value)
+  $: selectedLookupMap = getSelectedLookupMap(streamed)
   $: optionLookupMap = getOptionLookupMap(options)
-  $: fieldText = getFieldText(value, optionLookupMap, placeholder)
+  $: fieldText = getFieldText(streamed, optionLookupMap, placeholder)
   $: isOptionSelected = optionValue => selectedLookupMap[optionValue] === true
-  $: toggleOption = makeToggleOption(selectedLookupMap, value)
+  $: toggleOption = makeToggleOption(selectedLookupMap, streamed)
 
   const getFieldText = (value, map, placeholder) => {
     if (Array.isArray(value) && value.length > 0) {
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 1a1714967d..d105253e14 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/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()

From 36307ccff74b716f42bf690c53698a6c2d898b8a Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 18 Oct 2022 11:06:18 +0100
Subject: [PATCH 2/5] Refactor for multiselect value parsing and a fix to
 ensure default values are parsed before reaching the picker

---
 packages/bbui/src/Form/Core/Multiselect.svelte    | 15 ++++++---------
 .../client/src/components/app/forms/Field.svelte  | 10 +++++++++-
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index 3fbbaf5d4a..c76f5324c5 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -16,16 +16,13 @@
   export let autoWidth = false
 
   $: streamed = Array.isArray(value)
-    ? value.reduce((acc, ele) => {
-        if (typeof ele === "string") {
-          let temp = ele.trim()
-          if (!temp) {
-            return acc
-          }
+    ? value.reduce((acc, entry) => {
+        if (typeof ele === "string" && entry.trim() === "") {
+          return acc
         }
-        let processedOpt = ele.toString()
-        if (options.indexOf(processedOpt) > -1) {
-          acc.push(ele.toString())
+        let processedOption = String(entry)
+        if (options.indexOf(processedOption) > -1) {
+          acc.push(processedOption)
         }
         return acc
       }, [])
diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index 9a91ea5b2d..1203630de5 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -27,11 +27,19 @@
   $: formField = formApi?.registerField(
     field,
     type,
-    defaultValue,
+    parseDefaultValue(defaultValue),
     disabled,
     validation,
     formStep
   )
+
+  const parseDefaultValue = defaultValue => {
+    if (Array.isArray(defaultValue) && type === "array") {
+      return defaultValue.map(val => String(val))
+    }
+    return defaultValue
+  }
+
   $: schemaType = fieldSchema?.type !== "formula" ? fieldSchema?.type : "string"
 
   // Focus label when editing

From 7ccf29bff705b724ed1505133cbb9816946a5c9d Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 18 Oct 2022 16:24:36 +0100
Subject: [PATCH 3/5] Pushed default parsing up into the InnerForm component to
 ensure that invalid default values are removed entirely. Fixes for custom
 validation for array types

---
 .../bbui/src/Form/Core/Multiselect.svelte     | 19 +++-----------
 packages/bbui/src/Form/Core/Select.svelte     |  2 +-
 .../ValidationEditor/ValidationDrawer.svelte  |  3 +++
 .../src/components/app/forms/Field.svelte     |  9 +------
 .../src/components/app/forms/InnerForm.svelte | 26 ++++++++++++++++---
 5 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index c76f5324c5..eb39e39042 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -15,25 +15,12 @@
   export let sort = false
   export let autoWidth = false
 
-  $: streamed = 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
-      }, [])
-    : []
-
   const dispatch = createEventDispatcher()
-  $: selectedLookupMap = getSelectedLookupMap(streamed)
+  $: selectedLookupMap = getSelectedLookupMap(value)
   $: optionLookupMap = getOptionLookupMap(options)
-  $: fieldText = getFieldText(streamed, optionLookupMap, placeholder)
+  $: fieldText = getFieldText(value, optionLookupMap, placeholder)
   $: isOptionSelected = optionValue => selectedLookupMap[optionValue] === true
-  $: toggleOption = makeToggleOption(selectedLookupMap, streamed)
+  $: toggleOption = makeToggleOption(selectedLookupMap, value)
 
   const getFieldText = (value, map, placeholder) => {
     if (Array.isArray(value) && value.length > 0) {
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index f549f58d0c..fbb7f80c13 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -36,7 +36,7 @@
 
   const getFieldText = (value, options, placeholder) => {
     // Always use placeholder if no value
-    if (value == null || value === "") {
+    if (value == null || value === "" || value.length == 0) {
       return placeholder || "Choose an option"
     }
 
diff --git a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte b/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte
index 081e748caf..2624c28e7f 100644
--- a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte
+++ b/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
diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index 1203630de5..d6dddbbe39 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -27,19 +27,12 @@
   $: formField = formApi?.registerField(
     field,
     type,
-    parseDefaultValue(defaultValue),
+    defaultValue,
     disabled,
     validation,
     formStep
   )
 
-  const parseDefaultValue = defaultValue => {
-    if (Array.isArray(defaultValue) && type === "array") {
-      return defaultValue.map(val => String(val))
-    }
-    return defaultValue
-  }
-
   $: schemaType = fieldSchema?.type !== "formula" ? fieldSchema?.type : "string"
 
   // Focus label when editing
diff --git a/packages/client/src/components/app/forms/InnerForm.svelte b/packages/client/src/components/app/forms/InnerForm.svelte
index 3b33ef1868..0c512bbe0f 100644
--- a/packages/client/src/components/app/forms/InnerForm.svelte
+++ b/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,
@@ -143,6 +160,7 @@
 
       // Create validation function based on field schema
       const schemaConstraints = schema?.[field]?.constraints
+
       const validator = disableValidation
         ? null
         : createValidatorFromConstraints(
@@ -152,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)
@@ -186,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] ?? {},
       })
 

From b9a222ff1e4bd5d7e1344f23e00b2f2ba1578911 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 24 Oct 2022 09:07:14 +0100
Subject: [PATCH 4/5] Separating the multiselect fix into its own ticket

---
 packages/bbui/src/Form/Core/Select.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index fbb7f80c13..f549f58d0c 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -36,7 +36,7 @@
 
   const getFieldText = (value, options, placeholder) => {
     // Always use placeholder if no value
-    if (value == null || value === "" || value.length == 0) {
+    if (value == null || value === "") {
       return placeholder || "Choose an option"
     }
 

From 5e61575e30f1a31bdbfd62742d34fafc9ce5eac1 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 26 Oct 2022 15:13:27 +0100
Subject: [PATCH 5/5] Refactored approach to parsing multiselect values and
 ensuring any parsed values trigger a field update

---
 .../bbui/src/Form/Core/Multiselect.svelte     | 31 ++++++++++++++++++-
 .../src/components/app/forms/InnerForm.svelte | 25 ++-------------
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index eb39e39042..784cee70dc 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/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
diff --git a/packages/client/src/components/app/forms/InnerForm.svelte b/packages/client/src/components/app/forms/InnerForm.svelte
index 0c512bbe0f..6b7e1a84d0 100644
--- a/packages/client/src/components/app/forms/InnerForm.svelte
+++ b/packages/client/src/components/app/forms/InnerForm.svelte
@@ -128,23 +128,6 @@
     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,
@@ -170,10 +153,8 @@
             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) ?? parsedDefault
+      let initialValue = Helpers.deepGet(initialValues, field) ?? defaultValue
       let initialError = null
       let fieldId = `id-${Helpers.uuid()}`
       const existingField = getField(field)
@@ -206,11 +187,11 @@
           error: initialError,
           disabled:
             disabled || fieldDisabled || (isAutoColumn && !editAutoColumns),
-          defaultValue: parsedDefault,
+          defaultValue,
           validator,
           lastUpdate: Date.now(),
         },
-        fieldApi: makeFieldApi(field, parsedDefault),
+        fieldApi: makeFieldApi(field, defaultValue),
         fieldSchema: schema?.[field] ?? {},
       })