From b675f01c95b4d778ba5a7a7a814fc646692d6361 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Thu, 10 Jul 2025 18:27:03 -0700
Subject: [PATCH] toggle group: improve ref binding

---
 src/lib/ToggleGroup.svelte | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/lib/ToggleGroup.svelte b/src/lib/ToggleGroup.svelte
index d06a6ef..3f2f86a 100644
--- a/src/lib/ToggleGroup.svelte
+++ b/src/lib/ToggleGroup.svelte
@@ -26,12 +26,7 @@
 	}: Props = $props();
 
 	const id = $derived(generateIdentifier('toggle-group', name));
-
-	const extended: { detail: Option; ref?: ToggleSelect }[] = $derived.by(() => {
-		return options.map((opt) => ({
-			detail: opt
-		}));
-	});
+	const refs: ToggleSelect[] = $state([]);
 
 	let inputElement: HTMLInputElement | undefined = $state<HTMLInputElement>();
 	let valid: boolean = $state(true);
@@ -68,18 +63,18 @@
 			/>
 		{/if}
 
-		{#each extended as opt, i (getValue(opt.detail))}
+		{#each options as opt, i (getValue(opt))}
 			<ToggleSelect
-				bind:this={extended[i].ref}
-				ontoggle={makeSelectedHandler(getValue(opt.detail))}
+				bind:this={refs[i]}
+				ontoggle={makeSelectedHandler(getValue(opt))}
 				onkeydown={(e) => {
 					if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
-						if (i < extended.length - 1) {
-							extended[i + 1].ref?.focus();
+						if (i < options.length - 1) {
+							refs[i + 1]?.focus();
 						}
 					} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
 						if (i > 0) {
-							extended[i - 1].ref?.focus();
+							refs[i - 1]?.focus();
 						}
 					} else {
 						return;
@@ -87,7 +82,7 @@
 					e.preventDefault();
 				}}
 			>
-				<span class={[typeof opt === 'string' && 'capitalize']}>{getLabel(opt.detail)}</span>
+				<span class={[typeof opt === 'string' && 'capitalize']}>{getLabel(opt)}</span>
 			</ToggleSelect>
 		{/each}
 	</div>