diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 6637035da..5d6c4584f 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -13,6 +13,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Fixed a bug in `` that allowed the `sl-change` event to be emitted when disabled [#1220](https://github.com/shoelace-style/shoelace/issues/1220) - Fixed a regression in `` that caused `min` and `max` to stop working when `type="date"` [#1224](https://github.com/shoelace-style/shoelace/issues/1224) - Improved accessibility of `` [#1218](https://github.com/shoelace-style/shoelace/pull/1218) +- Improved `` so it converts non-string values to strings for convenience [#1226](https://github.com/shoelace-style/shoelace/issues/1226) ## 2.2.0 diff --git a/src/components/option/option.test.ts b/src/components/option/option.test.ts index f1cf464eb..11661f40e 100644 --- a/src/components/option/option.test.ts +++ b/src/components/option/option.test.ts @@ -41,4 +41,14 @@ describe('', () => { expect(slotChangeHandler).to.have.been.calledOnce; }); + + it('should convert non-string values to string', async () => { + const el = await fixture(html` Text `); + + // @ts-expect-error - intentional + el.value = 10; + await el.updateComplete; + + expect(el.value).to.equal('10'); + }); }); diff --git a/src/components/option/option.ts b/src/components/option/option.ts index 9b43e498f..1cfccd141 100644 --- a/src/components/option/option.ts +++ b/src/components/option/option.ts @@ -92,6 +92,12 @@ export default class SlOption extends ShoelaceElement { @watch('value') handleValueChange() { + // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers + // instead of requiring them to cast the value to a string. + if (typeof this.value !== 'string') { + this.value = String(this.value); + } + if (this.value.includes(' ')) { console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this); this.value = this.value.replace(/ /g, '_');