Update all form components to update bound values before firing onchange events

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>
 

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") {

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

@@ -46,10 +46,10 @@
     let map = null
     if (options?.length) {
       map = {}
-      options.forEach(option => {
+      options.forEach((option, idx) => {
-        const optionValue = getOptionValue(option)
+        const optionValue = getOptionValue(option, idx)
         if (optionValue != null) {
-          map[optionValue] = getOptionLabel(option) || ""
+          map[optionValue] = getOptionLabel(option, idx) || ""
         }
       })
     }

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"

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)
+    const index = options.findIndex(
-    return selected ? getOptionLabel(selected) : value
+      (option, idx) => getOptionValue(option, idx) === value
+    )
+    return index !== -1 ? getOptionLabel(options[index], index) : value
   }
 
   const selectOption = value => {

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>
 

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>
 

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") {

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") {

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>
 

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>