From b890d2918feebef51a12fd53a2e50a65173fdccc Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Tue, 8 Aug 2023 10:19:54 +0200
Subject: [PATCH] Added autofocus on entry of each input field.

---
 .../components/refactor/inputfields/NumberInput.svelte   | 9 +++++++--
 .../components/refactor/inputfields/TextAreaInput.svelte | 8 +++++++-
 src/lib/components/refactor/inputfields/TextInput.svelte | 7 +++++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/refactor/inputfields/NumberInput.svelte b/src/lib/components/refactor/inputfields/NumberInput.svelte
index 9faa93b..249bf99 100644
--- a/src/lib/components/refactor/inputfields/NumberInput.svelte
+++ b/src/lib/components/refactor/inputfields/NumberInput.svelte
@@ -1,17 +1,22 @@
 <script lang="ts">
 	import { writable } from 'svelte/store';
+	import { onMount } from 'svelte';
+	let inputElement;
+
+	onMount(() => {
+		inputElement.focus();
+	});
 
 	export let form;
 	export let errors;
 	export let validate;
 	export let field;
 	export let constraints;
-
-	const state = writable(0);
 </script>
 
 <input
 	name={field.name}
+	bind:this={inputElement}
 	type="number"
 	class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
 	bind:value={$form[field.name]}
diff --git a/src/lib/components/refactor/inputfields/TextAreaInput.svelte b/src/lib/components/refactor/inputfields/TextAreaInput.svelte
index 0e95370..ba19419 100644
--- a/src/lib/components/refactor/inputfields/TextAreaInput.svelte
+++ b/src/lib/components/refactor/inputfields/TextAreaInput.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 	import { writable } from 'svelte/store';
+	import { onMount } from 'svelte';
+
+	let inputElement;
 
 	export let form;
 	export let errors;
@@ -7,11 +10,14 @@
 	export let field;
 	export let constraints;
 
-	const state = writable('');
+	onMount(() => {
+		inputElement.focus();
+	});
 </script>
 
 <textarea
 	name={field.name}
+	bind:this={inputElement}
 	class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
 	bind:value={$form[field.name]}
 	aria-invalid={$errors[field.name] ? 'true' : undefined}
diff --git a/src/lib/components/refactor/inputfields/TextInput.svelte b/src/lib/components/refactor/inputfields/TextInput.svelte
index 2b5a8e7..8415527 100644
--- a/src/lib/components/refactor/inputfields/TextInput.svelte
+++ b/src/lib/components/refactor/inputfields/TextInput.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
 	import { createMachine, interpret } from 'xstate';
 	import { writable } from 'svelte/store';
+	import { onMount } from 'svelte';
+	let inputElement;
+
+	onMount(() => {
+		inputElement.focus();
+	});
 
 	export let form;
 	export let errors;
@@ -11,6 +17,7 @@
 
 <input
 	name={field.name}
+	bind:this={inputElement}
 	type="text"
 	class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
 	bind:value={$form[field.name]}