From e41c6e33e0555d4cc80cdcbad12d66228141a49d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 20 Apr 2021 12:49:02 +0100
Subject: [PATCH] Update all form components to update bound values before
 firing onchange events

---
 packages/bbui/src/Form/Checkbox.svelte         | 2 +-
 packages/bbui/src/Form/Combobox.svelte         | 2 +-
 packages/bbui/src/Form/Core/Multiselect.svelte | 6 +++---
 packages/bbui/src/Form/Core/Picker.svelte      | 8 ++++----
 packages/bbui/src/Form/Core/Select.svelte      | 6 ++++--
 packages/bbui/src/Form/Input.svelte            | 2 +-
 packages/bbui/src/Form/Multiselect.svelte      | 2 +-
 packages/bbui/src/Form/RadioGroup.svelte       | 2 +-
 packages/bbui/src/Form/Select.svelte           | 2 +-
 packages/bbui/src/Form/TextArea.svelte         | 2 +-
 packages/bbui/src/Form/Toggle.svelte           | 2 +-
 11 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/bbui/src/Form/Checkbox.svelte b/packages/bbui/src/Form/Checkbox.svelte
index 6680ea6813..1f3e439c2a 100644
--- a/packages/bbui/src/Form/Checkbox.svelte
+++ b/packages/bbui/src/Form/Checkbox.svelte
@@ -12,8 +12,8 @@
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
-    dispatch("change", e.detail)
     value = e.detail
+    dispatch("change", e.detail)
   }
 </script>
 
diff --git a/packages/bbui/src/Form/Combobox.svelte b/packages/bbui/src/Form/Combobox.svelte
index 77953e52d0..6b1e67a299 100644
--- a/packages/bbui/src/Form/Combobox.svelte
+++ b/packages/bbui/src/Form/Combobox.svelte
@@ -15,8 +15,8 @@
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
-    dispatch("change", e.detail)
     value = e.detail
+    dispatch("change", e.detail)
   }
   const extractProperty = (value, property) => {
     if (value && typeof value === "object") {
diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index a1395a66b2..97420fabad 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -46,10 +46,10 @@
     let map = null
     if (options?.length) {
       map = {}
-      options.forEach(option => {
-        const optionValue = getOptionValue(option)
+      options.forEach((option, idx) => {
+        const optionValue = getOptionValue(option, idx)
         if (optionValue != null) {
-          map[optionValue] = getOptionLabel(option) || ""
+          map[optionValue] = getOptionLabel(option, idx) || ""
         }
       })
     }
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 01ce2a06af..2f5606dcf1 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -81,16 +81,16 @@
         </li>
       {/if}
       {#if options && Array.isArray(options)}
-        {#each options as option}
+        {#each options as option, idx}
           <li
             class="spectrum-Menu-item"
-            class:is-selected={isOptionSelected(getOptionValue(option))}
+            class:is-selected={isOptionSelected(getOptionValue(option, idx))}
             role="option"
             aria-selected="true"
             tabindex="0"
-            on:click={() => onSelectOption(getOptionValue(option))}>
+            on:click={() => onSelectOption(getOptionValue(option, idx))}>
             <span
-              class="spectrum-Menu-itemLabel">{getOptionLabel(option)}</span>
+              class="spectrum-Menu-itemLabel">{getOptionLabel(option, idx)}</span>
             <svg
               class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
               focusable="false"
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index bb1be95cfc..58e1ccca5a 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -28,8 +28,10 @@
     }
 
     // Render the label if the selected option is found, otherwide raw value
-    const selected = options.find(option => getOptionValue(option) === value)
-    return selected ? getOptionLabel(selected) : value
+    const index = options.findIndex(
+      (option, idx) => getOptionValue(option, idx) === value
+    )
+    return index !== -1 ? getOptionLabel(options[index], index) : value
   }
 
   const selectOption = value => {
diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte
index acb8c21275..e4a155d342 100644
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@@ -14,8 +14,8 @@
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
-    dispatch("change", e.detail)
     value = e.detail
+    dispatch("change", e.detail)
   }
 </script>
 
diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte
index 0532740579..1615fac2b6 100644
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@@ -16,8 +16,8 @@
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
-    dispatch("change", e.detail)
     value = e.detail
+    dispatch("change", e.detail)
   }
 </script>
 
diff --git a/packages/bbui/src/Form/RadioGroup.svelte b/packages/bbui/src/Form/RadioGroup.svelte
index 619a0469e5..61bc5f8552 100644
--- a/packages/bbui/src/Form/RadioGroup.svelte
+++ b/packages/bbui/src/Form/RadioGroup.svelte
@@ -14,8 +14,8 @@
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
-    dispatch("change", e.detail)
     value = e.detail
+    dispatch("change", e.detail)
   }
   const extractProperty = (value, property) => {
     if (value && typeof value === "object") {
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index 0fa393acd4..0dd4a98102 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -16,8 +16,8 @@
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
-    dispatch("change", e.detail)
     value = e.detail
+    dispatch("change", e.detail)
   }
   const extractProperty = (value, property) => {
     if (value && typeof value === "object") {
diff --git a/packages/bbui/src/Form/TextArea.svelte b/packages/bbui/src/Form/TextArea.svelte
index d0ca8da635..a11b87da0d 100644
--- a/packages/bbui/src/Form/TextArea.svelte
+++ b/packages/bbui/src/Form/TextArea.svelte
@@ -13,8 +13,8 @@
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
-    dispatch("change", e.detail)
     value = e.detail
+    dispatch("change", e.detail)
   }
 </script>
 
diff --git a/packages/bbui/src/Form/Toggle.svelte b/packages/bbui/src/Form/Toggle.svelte
index 30cc49db3f..798f0a63ec 100644
--- a/packages/bbui/src/Form/Toggle.svelte
+++ b/packages/bbui/src/Form/Toggle.svelte
@@ -12,8 +12,8 @@
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
-    dispatch("change", e.detail)
     value = e.detail
+    dispatch("change", e.detail)
   }
 </script>