fix: value binding is missing on search bar

ADOFAI-gg · Sep 29, 2024 · 1df4e15 · 1df4e15
1 parent b63a76f
commit 1df4e15
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/lib/components/search/SearchBar.svelte b/src/lib/components/search/SearchBar.svelte
@@ -7,7 +7,7 @@
 		placeholder?: TranslationKey
 	}
 
-	const { value = $bindable(''), placeholder }: Props = $props()
+	let { value = $bindable(''), placeholder }: Props = $props()
 
 	const ctx = getGlobalContext()
 
@@ -20,7 +20,12 @@
 	<div class="icon">
 		<Icon alt="icon" size={24} icon="search" />
 	</div>
-	<input type="text" class="input" placeholder={placeholder ? $translatedPlaceholder : ''} />
+	<input
+		bind:value
+		type="text"
+		class="input"
+		placeholder={placeholder ? $translatedPlaceholder : ''}
+	/>
 </div>
 
 <style lang="scss">

diff --git a/src/stories/search/SearchBar.stories.svelte b/src/stories/search/SearchBar.stories.svelte
@@ -7,6 +7,12 @@
 	})
 </script>
 
+<script lang="ts">
+	let query = $state('')
+</script>
+
 <Story name="Example">
-	<SearchBar placeholder="custom:Wow this is placeholder" />
+	<SearchBar bind:value={query} placeholder="custom:Wow this is placeholder" />
+
+	<div>{query}</div>
 </Story>