Bugfix: Remove nested form from InputChips (#2715)

Co-authored-by: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com>

.changeset/beige-meals-begin.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: InputChip issue resolved to support Svelte 5

packages/skeleton/src/lib/components/InputChip/InputChip.svelte

@@ -26,11 +26,11 @@
 
 	// Event Dispatcher
 	type InputChipEvent = {
-		add: { event: SubmitEvent; chipIndex: number; chipValue: string };
+		add: { event: KeyboardEvent; chipIndex: number; chipValue: string };
 		remove: { event: MouseEvent; chipIndex: number; chipValue: string };
 		addManually: { chipIndex: number; chipValue: string };
 		removeManually: { chipValue: string };
-		invalid: { event: SubmitEvent; input: string };
+		invalid: { event: KeyboardEvent; input: string };
 		invalidManually: { input: string };
 	};
 	const dispatch = createEventDispatcher<InputChipEvent>();
@@ -173,10 +173,6 @@
 		};
 	});
 
-	function onInputHandler(): void {
-		inputValid = true;
-	}
-
 	function validateCustom(chip: string) {
 		return validation === undefined || validation(chip);
 	}
@@ -223,7 +219,10 @@
 		chipValues = chipValues;
 	}
 
-	function addChipInternally(event: SvelteEvent<SubmitEvent, HTMLFormElement>): void {
+	function onKeyHandler(event: KeyboardEvent): void {
+		// Monitor for Enter Key
+		if (event.key !== 'Enter') return;
+		// Prevent default behavior
 		event.preventDefault();
 		// Validate
 		inputValid = validate();
@@ -294,19 +293,17 @@
 	<!-- Chip Wrapper -->
 	<div class="input-chip-wrapper {classesChipWrapper}">
 		<!-- Input Field -->
-		<form on:submit={addChipInternally}>
-			<input
-				type="text"
-				bind:value={input}
-				placeholder={$$restProps.placeholder ?? 'Enter values...'}
-				class="input-chip-field {classesInput}"
-				on:input={onInputHandler}
-				on:input
-				on:focus
-				on:blur
-				disabled={$$restProps.disabled}
-			/>
-		</form>
+		<input
+			type="text"
+			bind:value={input}
+			placeholder={$$restProps.placeholder ?? 'Enter values...'}
+			class="input-chip-field {classesInput}"
+			on:keydown={onKeyHandler}
+			on:input
+			on:focus
+			on:blur
+			disabled={$$restProps.disabled}
+		/>
 		<!-- Chip List -->
 		{#if chipValues.length}
 			<div

sites/skeleton.dev/src/routes/(inner)/components/input-chips/+page.svelte

@@ -76,8 +76,8 @@
 		<section class="space-y-4">
 			<h2 class="h2">Whitelist Values</h2>
 			<p>
-				You can provide an array of strings to use as a whitelist. Only whitelisted items can be entered. Invalid or duplicate values will
-				show an error state.
+				You can provide an array of strings to use as a whitelist. Only items within this list can be entered. Invalid or duplicate values
+				will show an error state.
 			</p>
 			<DocsPreview background="neutral">
 				<svelte:fragment slot="preview">