From 39ffe57e074f4a041d3f9be90ee849264f77ddc5 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 24 Mar 2025 14:20:39 +0100
Subject: [PATCH 1/2] Show correct label when value is updated through prop

---
 v2/pink-sb/src/lib/input/Select.svelte | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/v2/pink-sb/src/lib/input/Select.svelte b/v2/pink-sb/src/lib/input/Select.svelte
index eab680fb29..f5ed97bfcb 100644
--- a/v2/pink-sb/src/lib/input/Select.svelte
+++ b/v2/pink-sb/src/lib/input/Select.svelte
@@ -44,13 +44,14 @@
 
     $: selectedLeadingHtml = options.find((option) => option.value === value)?.leadingHtml;
     $: selectedIcon = options.find((option) => option.value === value)?.leadingIcon;
+    $: selectedLabel = options.find((option) => option.value === value)?.label;
 
     const dispatch = createEventDispatcher();
     const inDialogGroup = hasContext('dialog-group');
 
     const {
         elements: { trigger, menu, option },
-        states: { selectedLabel, open }
+        states: { open }
     } = createSelect<string | boolean | number | null>({
         forceVisible: true,
         ids: {
@@ -92,7 +93,7 @@
         class="input"
         class:disabled
         class:readonly
-        class:placeholder={!$selectedLabel}
+        class:placeholder={!selectedLabel}
         class:success={state === 'success'}
         class:warning={state === 'warning'}
         class:error={state === 'error'}
@@ -106,8 +107,8 @@
                 <Icon size="s" icon={selectedIcon} />
             {/if}
             <span class="selected">
-                {#if $selectedLabel}
-                    {$selectedLabel}
+                {#if selectedLabel}
+                    {selectedLabel}
                 {:else}
                     {placeholder}
                 {/if}

From 15e9b4646edd7ecfcd1b240664ba55b0364e2e03 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 24 Mar 2025 15:40:46 +0100
Subject: [PATCH 2/2] Use store for selected value

---
 v2/pink-sb/src/lib/input/Select.svelte | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/v2/pink-sb/src/lib/input/Select.svelte b/v2/pink-sb/src/lib/input/Select.svelte
index f5ed97bfcb..d4a07a057c 100644
--- a/v2/pink-sb/src/lib/input/Select.svelte
+++ b/v2/pink-sb/src/lib/input/Select.svelte
@@ -3,6 +3,7 @@
     import type { States } from './types.js';
     import { createSelect } from '@melt-ui/svelte';
     import { Icon, Badge, Layout } from '$lib/index.js';
+    import { writable } from 'svelte/store';
     import { createEventDispatcher, hasContext, type ComponentType } from 'svelte';
     import { IconChevronDown, IconChevronUp } from '@appwrite.io/pink-icons-svelte';
     import type { HTMLInputAttributes } from 'svelte/elements';
@@ -44,11 +45,10 @@
 
     $: selectedLeadingHtml = options.find((option) => option.value === value)?.leadingHtml;
     $: selectedIcon = options.find((option) => option.value === value)?.leadingIcon;
-    $: selectedLabel = options.find((option) => option.value === value)?.label;
 
     const dispatch = createEventDispatcher();
     const inDialogGroup = hasContext('dialog-group');
-
+    const selectedLabel = writable(options?.find((option) => option.value === value)?.label ?? '');
     const {
         elements: { trigger, menu, option },
         states: { open }
@@ -73,6 +73,8 @@
             return event.next;
         }
     });
+
+    $: selectedLabel.set(options.find((option) => option.value === value)?.label ?? '');
 </script>
 
 <Base {id} {label} {helper} {state} {required}>
@@ -93,7 +95,7 @@
         class="input"
         class:disabled
         class:readonly
-        class:placeholder={!selectedLabel}
+        class:placeholder={!$selectedLabel}
         class:success={state === 'success'}
         class:warning={state === 'warning'}
         class:error={state === 'error'}
@@ -107,8 +109,8 @@
                 <Icon size="s" icon={selectedIcon} />
             {/if}
             <span class="selected">
-                {#if selectedLabel}
-                    {selectedLabel}
+                {#if $selectedLabel}
+                    {$selectedLabel}
                 {:else}
                     {placeholder}
                 {/if}