Added autofocus on entry of each input field.

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]}

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}

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]}