From 21ed53af781c3995e22ee3b2dac7b3dc5263c4eb Mon Sep 17 00:00:00 2001
From: DecafDev <40307803+decaf-dev@users.noreply.github.com>
Date: Thu, 12 Sep 2024 17:21:56 -0600
Subject: [PATCH] fix: save and display value

---
 .../components/folder-filter.svelte           |  6 ++---
 .../shared/components/search-select.svelte    | 23 +++++++++++--------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/svelte/custom-filter-app/components/folder-filter.svelte b/src/svelte/custom-filter-app/components/folder-filter.svelte
index 5b02d36..7267b8d 100644
--- a/src/svelte/custom-filter-app/components/folder-filter.svelte
+++ b/src/svelte/custom-filter-app/components/folder-filter.svelte
@@ -108,8 +108,8 @@
 		};
 	});
 
-	function handleValueChange(e: Event) {
-		const value = (e.target as HTMLInputElement).value;
+	function handleValueChange(e: CustomEvent) {
+		const { value } = e.detail;
 		dispatch("ruleValueChange", { id, value });
 	}
 
@@ -135,7 +135,7 @@
 	on:ruleToggle
 >
 	<svelte:fragment slot="after-condition">
-		<SearchSelect options={folders} />
+		<SearchSelect {value} options={folders} on:select={handleValueChange} />
 		<input
 			aria-label="Include subfolders"
 			type="checkbox"
diff --git a/src/svelte/shared/components/search-select.svelte b/src/svelte/shared/components/search-select.svelte
index a6b7126..ba23155 100644
--- a/src/svelte/shared/components/search-select.svelte
+++ b/src/svelte/shared/components/search-select.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
-	import { onMount } from "svelte";
+	import { createEventDispatcher, onMount } from "svelte";
 	import Icon from "./icon.svelte";
 
 	export let width = "fit-content";
 	export let options: string[] = [];
+	export let value: string = "";
 
-	let inputValue = "";
-	let selectedValue = "";
+	let inputValue = value;
 	let isOpen = false;
 	let dropdownRef: HTMLDivElement | null = null;
 	let currentFocusIndex = 0;
 
+	const dispatch = createEventDispatcher();
+
 	onMount(() => {
 		document.addEventListener("click", handleClickOutside);
 
@@ -30,10 +32,11 @@
 		currentFocusIndex = 0;
 	}
 
-	function handleOptionClick(e: Event, option: string) {
+	function handleOptionClick(option: string) {
 		inputValue = option;
-		selectedValue = option;
+		value = option;
 		isOpen = false;
+		dispatch("select", { value: option });
 	}
 
 	function handleInputChange(e: Event) {
@@ -70,7 +73,7 @@
 			if (isOpen) {
 				const option = filteredOptions[currentFocusIndex];
 				if (option) {
-					handleOptionClick(e, option);
+					handleOptionClick(option);
 				}
 			} else {
 				openDropdown();
@@ -100,7 +103,7 @@
 <div class="vault-explorer-search-selection" style={`width: ${width}`}>
 	<input
 		bind:value={inputValue}
-		placeholder={selectedValue || "Search..."}
+		placeholder={value || "Search..."}
 		type="text"
 		on:input={handleInputChange}
 		on:focus={handleInputFocus}
@@ -116,12 +119,12 @@
 				<div
 					tabindex="-1"
 					role="option"
-					aria-selected={option === selectedValue}
+					aria-selected={option === value}
 					class="vault-explorer-dropdown-item"
 					class:vault-explorer-dropdown-item--selected={currentFocusIndex ===
 						i}
-					on:click={(e) => handleOptionClick(e, option)}
-					on:keydown={(e) => {}}
+					on:click={() => handleOptionClick(option)}
+					on:keydown={() => {}}
 				>
 					{option}
 				</div>