InputChip reset behaviour fix (#1410)

* Created repro + fix

* Input Chip now uses native select element instead of ghost/phantom element

* Added additonal tests for nested forms

* Removed tests and cleaned up code, should be good to go

* Removed (now) redundant select class

src/lib/components/InputChip/InputChip.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte/internal';
+	import { createEventDispatcher, onMount } from 'svelte/internal';
 	import { fly, scale } from 'svelte/transition';
 	import { flip } from 'svelte/animate';
 
@@ -67,6 +67,26 @@
 		return { val: val, id: Math.random() };
 	});
 
+	// Reset Form
+	function resetFormHandler() {
+		value = [];
+	}
+	let selectElement: HTMLSelectElement;
+	onMount(() => {
+		// Verify external form is present
+		if (!selectElement.form) return;
+
+		const externalForm = selectElement.form as HTMLFormElement;
+		
+		// Attach reset event listener to external form
+		externalForm.addEventListener('reset', resetFormHandler);
+
+		// Return onDestroy handler that will remove the event listener from the external form
+		return () => { 
+			externalForm.removeEventListener('reset', resetFormHandler);
+		}
+	});
+
 	function onInputHandler(): void {
 		inputValid = true;
 	}
@@ -141,7 +161,7 @@
 <div class="input-chip {classesBase}" class:opacity-50={$$restProps.disabled}>
 	<!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
 	<div class="h-0 overflow-hidden">
-		<select bind:value {name} multiple {required} tabindex="-1">
+		<select bind:this={selectElement} bind:value {name} multiple {required} tabindex="-1">
 			<!-- NOTE: options are required! -->
 			{#each value as option}<option value={option}>{option}</option>{/each}
 		</select>