From 37bf4214a64b35604bb49dd0cc8d8a5339ff12fa Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 25 Jan 2023 14:11:33 +0000
Subject: [PATCH] Fix fancy select not correctly displaying the label for the
 selected value

---
 packages/bbui/src/FancyForm/FancySelect.svelte | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/FancyForm/FancySelect.svelte b/packages/bbui/src/FancyForm/FancySelect.svelte
index 240871fc9a..ee43ecc3ca 100644
--- a/packages/bbui/src/FancyForm/FancySelect.svelte
+++ b/packages/bbui/src/FancyForm/FancySelect.svelte
@@ -21,6 +21,7 @@
   let wrapper
 
   $: placeholder = !value
+  $: selectedLabel = getSelectedLabel(value)
 
   const extractProperty = (value, property) => {
     if (value && typeof value === "object") {
@@ -37,6 +38,17 @@
     }
     open = false
   }
+
+  const getSelectedLabel = value => {
+    if (!value || !options?.length) {
+      return ""
+    }
+    const selectedOption = options.find(x => getOptionValue(x) === value)
+    if (!selectedOption) {
+      return value
+    }
+    return getOptionLabel(selectedOption)
+  }
 </script>
 
 <FancyField
@@ -53,7 +65,7 @@
   {/if}
 
   <div class="value" class:placeholder>
-    {value || ""}
+    {selectedLabel || ""}
   </div>
 
   <div class="arrow">