fix switch default value; #1103

docs/resources/changelog.md

@@ -24,6 +24,7 @@ This release includes a complete rewrite of `<sl-select>` to improve accessibili
 - Added Traditional Chinese translation [#1086](https://github.com/shoelace-style/shoelace/pull/1086)
 - Fixed a bug in `<sl-tree-item>` where the checked/indeterminate states could get out of sync when using the `multiple` option [#1076](https://github.com/shoelace-style/shoelace/issues/1076)
 - Fixed a bug in `<sl-tree>` that caused `sl-selection-change` to emit before the DOM updated [#1096](https://github.com/shoelace-style/shoelace/issues/1096)
+- Fixed a bug that prevented `<sl-switch>` from submitting a default value of `on` when no value was provided [#1103](https://github.com/shoelace-style/shoelace/discussions/1103)
 - Reorganized all components to make class structures more consistent
 - Updated non-public fields to use the `private` keyword (these were previously private only by convention, but now TypeScript will warn you)
 - Updated the hover style of `<sl-menu-item>` to be consistent with `<sl-option>`

src/components/switch/switch.test.ts

@@ -1,4 +1,4 @@
-import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import type SlSwitch from './switch';
@@ -113,6 +113,28 @@ describe('<sl-switch>', () => {
     await el.updateComplete;
   });
 
+  it('should submit "on" when no value is provided', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <sl-switch name="a" checked></sl-switch>
+        <sl-button type="submit">Submit</sl-button>
+      </form>
+    `);
+    const button = form.querySelector('sl-button')!;
+    const submitHandler = sinon.spy((event: SubmitEvent) => {
+      formData = new FormData(form);
+      event.preventDefault();
+    });
+    let formData: FormData;
+
+    form.addEventListener('submit', submitHandler);
+    button.click();
+
+    await waitUntil(() => submitHandler.calledOnce);
+
+    expect(formData!.get('a')).to.equal('on');
+  });
+
   describe('when resetting a form', () => {
     it('should reset the element to its initial value', async () => {
       const form = await fixture<HTMLFormElement>(html`

src/components/switch/switch.ts

@@ -39,7 +39,7 @@ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormCon
 
   // @ts-expect-error -- Controller is currently unused
   private readonly formSubmitController = new FormSubmitController(this, {
-    value: (control: SlSwitch) => (control.checked ? control.value : undefined),
+    value: (control: SlSwitch) => (control.checked ? control.value || 'on' : undefined),
     defaultValue: (control: SlSwitch) => control.defaultChecked,
     setValue: (control: SlSwitch, checked: boolean) => (control.checked = checked)
   });