Merge pull request #674 from universal-ember/copilot/fix-switch-onchange-arguments

Fix Switch `@onChange` argument order — pass `(checked: boolean, event: Event)`

Author: NullVoxPopuli

ember-primitives/src/components/switch.gts

@@ -1,11 +1,11 @@
-import { fn, hash } from "@ember/helper";
+import Component from "@glimmer/component";
+import { hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 
 import { cell } from "ember-resources";
 
 import { uniqueId } from "../utils.ts";
 import { Label } from "./-private/typed-elements.gts";
-import { toggleWithFallback } from "./-private/utils.ts";
 
 import type { TOC } from "@ember/component/template-only";
 import type { WithBoundArgs } from "@glint/template";
@@ -79,21 +79,37 @@ export interface Signature {
 
 interface ControlSignature {
   Element: HTMLInputElement;
-  Args: { id: string; checked?: ReturnType<typeof cell<boolean>>; onChange: () => void };
+  Args: {
+    id: string;
+    checked?: ReturnType<typeof cell<boolean>>;
+    onChange?: (checked: boolean, event: Event) => void;
+  };
 }
 
-const Checkbox: TOC<ControlSignature> = <template>
-  <input
-    id={{@id}}
-    type="checkbox"
-    role="switch"
-    checked={{@checked.current}}
-    aria-checked={{@checked.current}}
-    data-state={{if @checked.current "on" "off"}}
-    {{on "click" (fn toggleWithFallback @checked.toggle @onChange)}}
-    ...attributes
-  />
-</template>;
+class Checkbox extends Component<ControlSignature> {
+  handleClick = (event: Event) => {
+    const newChecked = (event.target as HTMLInputElement).checked;
+
+    if (this.args.onChange) {
+      this.args.onChange(newChecked, event);
+    } else {
+      this.args.checked?.toggle();
+    }
+  };
+
+  <template>
+    <input
+      id={{@id}}
+      type="checkbox"
+      role="switch"
+      checked={{@checked.current}}
+      aria-checked={{@checked.current}}
+      data-state={{if @checked.current "on" "off"}}
+      {{on "click" this.handleClick}}
+      ...attributes
+    />
+  </template>
+}
 
 function defaultFalse(value: unknown) {
   return value ?? false;

test-app/tests/switch/rendering-test.gts

@@ -43,4 +43,22 @@ module('Switch', function (hooks) {
     await click('[role=switch]');
     assert.verifySteps(['false']);
   });
+
+  test('@onChange is called with (checked: boolean, event: Event)', async function (assert) {
+    const calls: Array<[boolean, Event]> = [];
+    const handleChange = (checked: boolean, event: Event) => calls.push([checked, event]);
+
+    await render(
+      <template>
+        <Switch @onChange={{handleChange}} as |s|>
+          <s.Control />
+        </Switch>
+      </template>
+    );
+
+    await click('[role=switch]');
+    assert.strictEqual(calls.length, 1, 'onChange called once');
+    assert.true(calls[0]?.[0], 'first arg is new checked state (true)');
+    assert.ok(calls[0]?.[1] instanceof Event, 'second arg is an Event');
+  });
 });