fix: toggle item correctly updates based on each individual toggle

Author: thejackshelton

apps/website/src/routes/docs/headless/toggle-group/examples/hero.tsx

@@ -1,5 +1,4 @@
 import { component$, useStyles$ } from '@builder.io/qwik';
-import styles from '../snippets/toggle.css?inline';
 
 import { ToggleGroup } from '@qwik-ui/headless';
 
@@ -21,3 +20,6 @@ export default component$(() => {
     </div>
   );
 });
+
+// internal
+import styles from '../snippets/toggle.css?inline';

packages/kit-headless/src/components/toggle-group/toggle-group-item.tsx

@@ -69,22 +69,25 @@ export const HToggleGroupItem = component$<ToggleGroupItemProps>((props) => {
   const valueContext = useContext(toggleGroupValueContextId);
   const baseContext = useContext(toggleGroupBaseContextId);
   const disabled = baseContext.disabled || itemDisabled;
+  const isPressedSig = useSignal(false);
 
   const itemId = useId();
 
-  const pressed = useComputed$(() => {
-    const pressedValue = valueContext.pressedValuesSig.value;
-    if (pressedValue == null) return false;
+  useTask$(({ track }) => {
+    const pressedValue = track(() => valueContext.pressedValuesSig.value);
+    if (pressedValue == null) {
+      isPressedSig.value = false;
+      return;
+    }
 
     if (typeof pressedValue === 'string') {
-      return pressedValue === value;
+      isPressedSig.value = pressedValue === value;
+    } else {
+      isPressedSig.value = pressedValue.includes(value);
     }
-    return pressedValue.includes(value);
   });
 
-  // const pressed = useComputed$(() => valueContext.pressedValuesSig.value.includes(value));
-
-  const tabIndex = useComputed$(() => (pressed.value ? 0 : -1));
+  const tabIndex = useComputed$(() => (isPressedSig.value ? 0 : -1));
 
   const itemRef = useSignal<HTMLButtonElement>();
 
@@ -163,7 +166,7 @@ export const HToggleGroupItem = component$<ToggleGroupItemProps>((props) => {
     <Toggle
       ref={itemRef}
       {...itemProps}
-      pressed={pressed.value}
+      bind:pressed={isPressedSig}
       disabled={disabled}
       onPressedChange$={handlePressed$}
       onKeyDown$={[handleKeyDownSync$, handleKeyDown$]}

packages/kit-headless/src/components/toggle-group/use-toggle.tsx

@@ -26,22 +26,6 @@ function useCreateSingleToggleGroup(props: ToggleGroupSingleProps) {
     pressedValuesSig.value = value;
   });
 
-  // const pressedValuesSig = useSignal(givenValueSig?.value ?? value ?? defaultValue ?? '');
-
-  // // side effect: update external when internal changed
-  // useTask$(({ track }) => {
-  //   if (!givenValueSig) return;
-  //   track(() => pressedValuesSig.value); //internal changed
-  //   givenValueSig.value = pressedValuesSig.value; //side effect: update external
-  // });
-
-  // // side effect: update internal when external changed
-  // useTask$(({ track }) => {
-  //   if (!givenValueSig) return;
-  //   track(() => givenValueSig.value); //external changed
-  //   pressedValuesSig.value = givenValueSig.value; //side effect: update internal
-  // });
-
   const handleValueChange$ = $((newValue: string) => {
     pressedValuesSig.value = newValue;
     console.log('newState', newValue);

packages/kit-headless/src/components/toggle/toggle.test.ts

@@ -81,7 +81,7 @@ test.describe('Mouse Behavior', () => {
     await expect(spanElement).toContainText('You unpressed me');
   });
 
-  //bind:pressed: 2 way binding (writting)
+  //bind:pressed: 2 way binding (writing)
   test(`GIVEN a pressed toggle (with 'bind-pressed')
     WHEN the toggle is clicked
     AND the external button is clicked

packages/kit-headless/src/components/toggle/toggle.tsx

@@ -1,5 +1,6 @@
 import type { PropsOf, QRL, Signal } from '@builder.io/qwik';
-import { $, component$, Slot, useSignal, useTask$ } from '@builder.io/qwik';
+import { $, component$, Slot, useTask$ } from '@builder.io/qwik';
+import { useBoundSignal } from '../../utils/bound-signal';
 
 export type ToggleProps = PropsOf<'button'> & {
   /**
@@ -36,13 +37,11 @@ export const HToggle = component$<ToggleProps>((props) => {
     pressed: pressedProp,
     defaultPressed = false,
     onPressedChange$,
-    // 'bind:pressed': givenValueSig,
+    'bind:pressed': givenValueSig,
     ...buttonProps
   } = props;
 
-  // const pressedSig = useBoundSignal(givenValueSig, defaultPressed);
-
-  const pressedSig = useSignal<boolean>(defaultPressed);
+  const pressedSig = useBoundSignal(givenValueSig, defaultPressed);
 
   useTask$(({ track }) => {
     if (pressedProp === undefined) return;