diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 3ce76e8d..f3b2bb08 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -24,6 +24,7 @@ This release includes a complete rewrite of `` to improve accessibili - Added Traditional Chinese translation [#1086](https://github.com/shoelace-style/shoelace/pull/1086) - Fixed a bug in `` 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 `` 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 `` 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 `` to be consistent with `` diff --git a/src/components/switch/switch.test.ts b/src/components/switch/switch.test.ts index a876cf21..50e24c43 100644 --- a/src/components/switch/switch.test.ts +++ b/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('', () => { await el.updateComplete; }); + it('should submit "on" when no value is provided', async () => { + const form = await fixture(html` +
+ + Submit +
+ `); + 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(html` diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index 71457a1a..ba87f986 100644 --- a/src/components/switch/switch.ts +++ b/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) });