fix: respect initial value prop in ButtonToggleGroup (#1796)

shinokada · web-flow · commit d0e6b41124e6 · 2025-10-22T13:34:53.000+02:00
* fix: respect initial value prop in ButtonToggleGroup

Previously the value prop was ignored during initialization.
Now properly initializes selectedValues from the value prop,
handling type mismatches between single/multi-select modes.

* fix: clone arrays in getInitialValue to prevent aliasing

Prevents external array mutations from affecting internal state.

* fix: onSelect type update

* fix: add type guards ensure type safety
diff --git a/package.json b/package.json
@@ -855,4 +855,4 @@
     },
     "./package.json": "./package.json"
   }
-}
+}
diff --git a/src/lib/forms/button-toggle/ButtonToggleGroup.svelte b/src/lib/forms/button-toggle/ButtonToggleGroup.svelte
@@ -5,28 +5,46 @@
   import { buttonToggleGroup } from "./theme";
   import { getTheme } from "$lib/theme/themeUtils";
 
-  let { multiSelect = false, name = "toggle-group", value = multiSelect ? [] : null, color, size = "md", roundedSize = "md", onSelect = (val: any) => {}, children, ctxIconClass, ctxBtnClass, class: className, ...restProps }: ButtonToggleGroupProps = $props();
+  let { multiSelect = false, name = "toggle-group", value = multiSelect ? [] : null, color, size = "md", roundedSize = "md", onSelect = () => {}, children, ctxIconClass, ctxBtnClass, class: className, ...restProps }: ButtonToggleGroupProps = $props();
 
   const theme = getTheme("buttonToggleGroup");
 
   const base = $derived(buttonToggleGroup({ roundedSize, class: clsx(theme, className) }));
   type SelectedValue = string | null | string[];
 
-  let selectedValues = $state<SelectedValue>(multiSelect ? [] : null);
+  // Normalize incoming prop `value` to internal SelectedValue
+  // Clones arrays to prevent external mutations affecting internal state
+  function getInitialValue(): SelectedValue {
+    if (multiSelect) {
+      // Multi-select mode expects array
+      if (Array.isArray(value)) {
+        return [...value]; // Clone to prevent aliasing
+      } else if (value === null || value === undefined) {
+        return [];
+      } else {
+        // Single string passed but multiSelect is true - wrap in array
+        return [value as string];
+      }
+    } else {
+      // Single-select mode expects string or null
+      if (Array.isArray(value)) {
+        // Array passed but multiSelect is false - take first item
+        return value[0] ?? null;
+      } else {
+        return value;
+      }
+    }
+  }
+
+  let selectedValues = $state<SelectedValue>(getInitialValue());
 
   interface ButtonToggleContext {
     toggleSelected: (toggleValue: string) => void;
     isSelected: (toggleValue: string) => boolean;
   }
 
-  $effect(() => {
-    value = selectedValues;
-    onSelect(selectedValues);
-  });
-
   function toggleSelected(toggleValue: string) {
     if (multiSelect) {
-      // Handle multi-select mode
       const currentSelected = [...(selectedValues as string[])];
       const index = currentSelected.indexOf(toggleValue);
 
@@ -37,9 +55,9 @@
         selectedValues = currentSelected;
       }
     } else {
-      // Handle single-select mode
       selectedValues = toggleValue === selectedValues ? null : toggleValue;
     }
+    onSelect(selectedValues); // ✅ ADD THIS LINE - call onSelect here
   }
 
   function isSelected(toggleValue: string): boolean {
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -327,7 +327,7 @@ export type ButtonToggleGroupProps = HTMLAttributes<HTMLDivElement> & {
   color?: ButtonToggleVariants["color"];
   size?: ButtonToggleVariants["size"];
   roundedSize?: ButtonToggleVariants["roundedSize"];
-  onSelect?: (val: any) => void;
+  onSelect?: (val: string | null | string[]) => void;
   children: Snippet;
   ctxIconClass?: ClassValue;
   ctxBtnClass?: ClassValue;
diff --git a/src/lib/typography/hr/Hr.svelte b/src/lib/typography/hr/Hr.svelte
@@ -15,10 +15,12 @@
       innerDivClass: "content"
     }
   );
-  const styling = $derived(classes ?? {
-    div: divClass,
-    content: innerDivClass
-  });
+  const styling = $derived(
+    classes ?? {
+      div: divClass,
+      content: innerDivClass
+    }
+  );
 
   const theme = getTheme("hr");
   const bg = classes?.bg ?? "bg-gray-200 dark:bg-gray-700";
diff --git a/src/routes/docs-examples/extend/button-toggle/ButtonColor.svelte b/src/routes/docs-examples/extend/button-toggle/ButtonColor.svelte
@@ -4,9 +4,11 @@
   let singleValue = $state<string | null>(null);
   let multiValues = $state<string[]>([]);
 
-  function handleSingleSelect(value: string | null) {
-    singleValue = value;
-    console.log("Single selection:", value);
+  function handleSingleSelect(value: string | null | string[]) {
+    if (typeof value === "string" || value === null) {
+      singleValue = value;
+      console.log("Single selection:", value);
+    }
   }
 </script>
 
diff --git a/src/routes/docs-examples/extend/button-toggle/Ctx.svelte b/src/routes/docs-examples/extend/button-toggle/Ctx.svelte
@@ -3,9 +3,11 @@
 
   let singleValue = $state<string | null>(null);
 
-  function handleSingleSelect(value: string | null) {
-    singleValue = value;
-    console.log("Single selection:", value);
+  function handleSingleSelect(value: string | null | string[]) {
+    if (typeof value === "string" || value === null) {
+      singleValue = value;
+      console.log("Single selection:", value);
+    }
   }
 </script>
 
diff --git a/src/routes/docs-examples/extend/button-toggle/Custom.svelte b/src/routes/docs-examples/extend/button-toggle/Custom.svelte
@@ -4,9 +4,11 @@
 
   let singleValue = $state<string | null>(null);
 
-  function handleSingleSelect(value: string | null) {
-    singleValue = value;
-    console.log("Single selection:", value);
+  function handleSingleSelect(value: string | null | string[]) {
+    if (typeof value === "string" || value === null) {
+      singleValue = value;
+      console.log("Single selection:", value);
+    }
   }
 </script>
 
diff --git a/src/routes/docs-examples/extend/button-toggle/Default.svelte b/src/routes/docs-examples/extend/button-toggle/Default.svelte
@@ -4,14 +4,18 @@
   let singleValue = $state<string | null>(null);
   let multiValues = $state<string[]>([]);
 
-  function handleSingleSelect(value: string | null) {
-    singleValue = value;
-    console.log("Single selection:", value);
+  function handleSingleSelect(value: string | null | string[]) {
+    if (typeof value === "string" || value === null) {
+      singleValue = value;
+      console.log("Single selection:", value);
+    }
   }
 
-  function handleMultiSelect(values: string[]) {
-    multiValues = values;
-    console.log("Multi selection:", values);
+  function handleMultiSelect(values: string | null | string[]) {
+    if (Array.isArray(values)) {
+      multiValues = values;
+      console.log("Multi selection:", values);
+    }
   }
 </script>
 
diff --git a/src/routes/docs-examples/extend/button-toggle/Disabled.svelte b/src/routes/docs-examples/extend/button-toggle/Disabled.svelte
@@ -3,9 +3,11 @@
 
   let singleValue = $state<string | null>(null);
 
-  function handleSingleSelect(value: string | null) {
-    singleValue = value;
-    console.log("Single selection:", value);
+  function handleSingleSelect(value: string | null | string[]) {
+    if (typeof value === "string" || value === null) {
+      singleValue = value;
+      console.log("Single selection:", value);
+    }
   }
 </script>
 
diff --git a/src/routes/docs-examples/extend/button-toggle/GroupColor.svelte b/src/routes/docs-examples/extend/button-toggle/GroupColor.svelte
@@ -3,9 +3,11 @@
 
   let singleValue = $state<string | null>(null);
 
-  function handleSingleSelect(value: string | null) {
-    singleValue = value;
-    console.log("Single selection:", value);
+  function handleSingleSelect(value: string | null | string[]) {
+    if (typeof value === "string" || value === null) {
+      singleValue = value;
+      console.log("Single selection:", value);
+    }
   }
 </script>
 
diff --git a/src/routes/docs-examples/extend/button-toggle/InitialValue.svelte b/src/routes/docs-examples/extend/button-toggle/InitialValue.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { ButtonToggleGroup, ButtonToggle } from "flowbite-svelte";
+
+  let singleValue = $state<string | null>("two");
+  let multiValues = $state<string[]>(["one", "three"]);
+</script>
+
+<h3 class="mb-2 text-lg font-medium dark:text-white">Single Selection</h3>
+<ButtonToggleGroup
+  value={singleValue}
+  onSelect={(v) => {
+    if (typeof v === "string" || v === null) {
+      singleValue = v;
+    }
+  }}
+>
+  <ButtonToggle value="one">One</ButtonToggle>
+  <ButtonToggle value="two">Two</ButtonToggle>
+  <ButtonToggle value="three">Three</ButtonToggle>
+</ButtonToggleGroup>
+<p class="mt-2 dark:text-white">Selected: {singleValue || "None"}</p>
+
+<h3 class="mb-2 text-lg font-medium dark:text-white">Multi Selection</h3>
+<ButtonToggleGroup
+  multiSelect={true}
+  value={multiValues}
+  onSelect={(v) => {
+    if (Array.isArray(v)) {
+      multiValues = v;
+    }
+  }}
+>
+  <ButtonToggle value="one">One</ButtonToggle>
+  <ButtonToggle value="two">Two</ButtonToggle>
+  <ButtonToggle value="three">Three</ButtonToggle>
+</ButtonToggleGroup>
+<p class="mt-2 dark:text-white">Selected: {multiValues.length ? multiValues.join(", ") : "None"}</p>
diff --git a/src/routes/docs-examples/extend/button-toggle/RoundedSize.svelte b/src/routes/docs-examples/extend/button-toggle/RoundedSize.svelte
@@ -3,9 +3,11 @@
 
   let singleValue = $state<string | null>(null);
 
-  function handleSingleSelect(value: string | null) {
-    singleValue = value;
-    console.log("Single selection:", value);
+  function handleSingleSelect(value: string | null | string[]) {
+    if (typeof value === "string" || value === null) {
+      singleValue = value;
+      console.log("Single selection:", value);
+    }
   }
 </script>
 
diff --git a/src/routes/docs/extend/button-toggle.md b/src/routes/docs/extend/button-toggle.md
@@ -29,6 +29,14 @@ description: Use the button toggle to toggle on/off with the appearance of a but
 {#include Default.svelte}
 ```
 
+## Controlled Component with Initial State
+
+Pass the `value` prop to `ButtonToggleGroup` to enable initial selections and external state control. Set `singleValue = "two"` or `multiValues = ["one", "three"]` before rendering, and the buttons will reflect these selections immediately without manually managing each button's `selected` prop.
+
+```svelte example class="flex flex-col space-y-4"
+{#include InitialValue.svelte}
+```
+
 ## Button color
 
 You can use `primary`, `secondary`, `gray`, `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`.

Original file line number	Diff line number	Diff line change
`@@ -855,4 +855,4 @@`
`855`	`855`	`},`
`856`	`856`	`"./package.json": "./package.json"`
`857`	`857`	`}`
`858`		`-}`
	`858`	`+}`