closes #1226

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 `<sl-rating>` that allowed the `sl-change` event to be emitted when disabled [#1220](https://github.com/shoelace-style/shoelace/issues/1220)
 - Fixed a regression in `<sl-input>` that caused `min` and `max` to stop working when `type="date"` [#1224](https://github.com/shoelace-style/shoelace/issues/1224)
 - Improved accessibility of `<sl-carousel>` [#1218](https://github.com/shoelace-style/shoelace/pull/1218)
+- Improved `<sl-option>` so it converts non-string values to strings for convenience [#1226](https://github.com/shoelace-style/shoelace/issues/1226)
 
 ## 2.2.0
 

src/components/option/option.test.ts

@@ -41,4 +41,14 @@ describe('<sl-option>', () => {
 
     expect(slotChangeHandler).to.have.been.calledOnce;
   });
+
+  it('should convert non-string values to string', async () => {
+    const el = await fixture<SlOption>(html` <sl-option>Text</sl-option> `);
+
+    // @ts-expect-error - intentional
+    el.value = 10;
+    await el.updateComplete;
+
+    expect(el.value).to.equal('10');
+  });
 });

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, '_');