diff --git a/control/frontend/src/components/TextInput.svelte b/control/frontend/src/components/TextInput.svelte index 118abb3..6b49fc4 100644 --- a/control/frontend/src/components/TextInput.svelte +++ b/control/frontend/src/components/TextInput.svelte @@ -10,7 +10,8 @@ bg = 'bg-stone-750', title, placeholder = '', - is_valid_function = null + is_valid_function = null, + focused_on_start = false } = $props<{ current_value: string; current_valid: boolean; @@ -19,11 +20,13 @@ title: string; placeholder?: string; is_valid_function?: ((input: string) => [boolean, string]) | null; + focused_on_start?: boolean; }>(); let focus_bg = get_shifted_color(bg, 100); - let focussed = $state(false); + let focused: boolean = $state(false); let current_info = $state(''); + let input_element: HTMLInputElement; function validate_input() { if (!is_valid_function) return; @@ -40,15 +43,16 @@ } onMount(() => { validate_input(); + if (focused_on_start && input_element) input_element.focus(); });
-
+
{title}:
- {#if is_valid_function && focussed} + {#if is_valid_function && focused}
{ - focussed = true; - }} - onfocusout={() => { - focussed = false; - }} class="{bg} focus:{focus_bg} outline-none py-2 px-3 rounded-xl transition-all duration-100 {get_highlighting_string()}" {placeholder} /> diff --git a/control/frontend/src/routes/+page.svelte b/control/frontend/src/routes/+page.svelte index 0a90e8b..5fefb1c 100644 --- a/control/frontend/src/routes/+page.svelte +++ b/control/frontend/src/routes/+page.svelte @@ -137,6 +137,7 @@ {#snippet add_new_display_popup(existing_display_id: string | null = null)}
- +