diff --git a/src/components/select/select.component.ts b/src/components/select/select.component.ts index 6016ee84eb..b8dff07436 100644 --- a/src/components/select/select.component.ts +++ b/src/components/select/select.component.ts @@ -115,7 +115,9 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon @state() set value(val: string | string[]) { if (this.multiple) { - val = Array.isArray(val) ? val : val.split(' '); + if (!Array.isArray(val)) { + val = typeof val === 'string' ? val.split(' ') : [val].filter(Boolean); + } } else { val = Array.isArray(val) ? val.join(' ') : val; } diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts index e08c1c6d22..2622fd843f 100644 --- a/src/components/select/select.test.ts +++ b/src/components/select/select.test.ts @@ -229,6 +229,47 @@ describe('', () => { * @ts-expect-error */ el.handleDocumentKeyDown(event); }); + + describe('#2384: should not break on invalid values of the "value" prop when "multiple" is set', () => { + it('should support an empty string', async () => { + const el = await fixture(''); + el.value = ''; + await expect(el.value).to.eql(['']); + }); + + it('should support a string', async () => { + const el = await fixture(''); + el.value = 'value'; + await expect(el.value).to.eql(['value']); + }); + + it('should support none falsy values', async () => { + const el = await fixture(''); + // @ts-expect-error Testing for invalid values + el.value = 1; + await expect(el.value).to.eql([1]); + }); + + it('should not allow falsy values', async () => { + const el = await fixture(''); + // @ts-expect-error Testing for invalid values + el.value = false; + await expect(el.value).to.eql([]); + }); + + it('should not allow undefined values', async () => { + const el = await fixture(''); + // @ts-expect-error Testing for invalid values + el.value = undefined; + await expect(el.value).to.eql([]); + }); + + it('should support an array of strings', async () => { + const el = await fixture(''); + el.value = ['a', 'b', 'c']; + await expect(el.value).to.eql(['a', 'b', 'c']); + }); + }); }); it('should open the listbox when any letter key is pressed with sl-select is on focus', async () => {