make reported user nullable

src/lib/components/Input/Input.svelte

@@ -9,6 +9,7 @@
 	export let placeholder: string | null = null;
 	export let required = false;
 	export let disabled = false;
+	export let readonly = false;
 	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
 	export let pickyWidth = true;
 
@@ -85,6 +86,7 @@
 					{placeholder}
 					{required}
 					{disabled}
+					{readonly}
 					bind:this={inputElement}
 					autocomplete="off"
 					on:input={(e) => {

src/lib/components/Input/Search.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
 	export let id: string | null = null;
 	export let value = '';
+	export let inputValue = '';
 	export let suggestionRequired = false;
+	export let emptyAllowed = false;
 	export let searchSuggestionFunc: (
 		input: string
 	) => Promise<{ name: string; value: string }[]> = () => Promise.resolve([]);
@@ -10,7 +14,8 @@
 	export let label: string | null = null;
 	export let required = false;
 
-	let inputValue: string;
+	const dispatch = createEventDispatcher();
+
 	let searchSuggestions: { name: string; value: string }[] = [];
 	$: if (!suggestionRequired) value = inputValue;
 </script>
@@ -47,13 +52,18 @@
 						value = searchSuggestion.value;
 						searchSuggestions = [];
 						e.target?.setCustomValidity('');
+						dispatch('submit', { input: inputValue, value: value });
+					} else if (inputValue === '' && emptyAllowed) {
+						dispatch('submit', { input: '', value: '' });
 					}
 				});
 			}}
 			on:invalid={(e) => {
 				if (invalidMessage != null) e.target?.setCustomValidity(invalidMessage);
 			}}
-			pattern={suggestionRequired ? `${value ? inputValue : 'a^'}` : null}
+			pattern={suggestionRequired
+				? `${value ? inputValue : 'a^' + (emptyAllowed ? '|$^' : '')}`
+				: null}
 		/>
 	</div>
 
@@ -68,6 +78,7 @@
 							inputValue = searchSuggestion.name;
 							value = searchSuggestion.value;
 							searchSuggestions = [];
+							dispatch('submit', { input: inputValue, value: value });
 						}}>{searchSuggestion.name}</button
 					>
 				</li>
@@ -76,6 +87,7 @@
 	{/if}
 </div>
 
+<!-- close the search suggestions box when clicking outside -->
 {#if inputValue && searchSuggestions.length !== 0}
 	<button
 		class="absolute top-0 left-0 z-10 w-full h-full cursor-default"