<script lang="ts">
	import { onMount } from 'svelte';

	let inputElement;

	export let childInput;

	const { form, errors, field, constraints } = childInput;

	onMount(() => {
		inputElement.focus();
	});
</script>

<select
	name={field.name}
	bind:this={inputElement}
	class="select"
	size="5"
	bind:value={$form[field.name]}
	aria-invalid={$errors[field.name] ? 'true' : undefined}
	{...constraints[field.name]}
>
	<option value="apple">Apple</option>
	<option value="banana">Banana</option>
	<option value="coconut">Coconut</option>
	<option value="strawberry">Strawberry</option>
	<option value="mango">Mango</option>
</select>
