diff --git a/packages/svelte/src/internal/server/renderer.js b/packages/svelte/src/internal/server/renderer.js index 240a7aa686..a30c302693 100644 --- a/packages/svelte/src/internal/server/renderer.js +++ b/packages/svelte/src/internal/server/renderer.js @@ -89,7 +89,7 @@ export class Renderer { * State that is local to the branch it is declared in. * It will be shallow-copied to all children. * - * @type {{ select_value: any, select_default_multiple: boolean }} + * @type {{ select_value: any, multiple: boolean }} */ local; @@ -101,9 +101,7 @@ export class Renderer { this.#parent = parent; this.global = global; - this.local = parent - ? { ...parent.local } - : { select_value: undefined, select_default_multiple: false }; + this.local = parent ? { ...parent.local } : { select_value: undefined, multiple: false }; this.type = parent ? parent.type : 'body'; } @@ -346,8 +344,7 @@ export class Renderer { this.push(``); @@ -375,10 +372,14 @@ export class Renderer { value = attrs.value; } + var select_value = this.local.select_value; + if ( - this.local.select_default_multiple - ? is_array(this.local.select_value) && this.local.select_value.includes(value) - : value === this.local.select_value + // Super edge-case, but theoretically someone could use arrays with non-multiple selects, + // so we gotta check for the multiple attribute presence, too. + this.local.multiple && is_array(select_value) + ? select_value.includes(value) + : value === select_value ) { renderer.#out.push(' selected=""'); } diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-multiple/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-multiple/_config.js index 42c0e018e5..d7c1b8d339 100644 --- a/packages/svelte/tests/runtime-legacy/samples/binding-select-multiple/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-multiple/_config.js @@ -6,17 +6,30 @@ export default test({ return { selected: ['two', 'three'] }; }, - html: ` + ssrHtml: `
selected: two, three
`, - test({ assert, component, target, window }) { + test({ assert, component, target, window, variant }) { + const selected = variant === 'hydrate' ? ' selected' : ''; + assert.htmlEqual( + target.innerHTML, + ` + + +selected: two, three
+ ` + ); const select = target.querySelector('select'); ok(select); const options = [...target.querySelectorAll('option')]; @@ -33,8 +46,8 @@ export default test({ `selected: three
@@ -51,8 +64,8 @@ export default test({ `selected: one, three
@@ -70,8 +83,8 @@ export default test({ `selected: one, two
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-multiple-value/_expected.html b/packages/svelte/tests/server-side-rendering/samples/select-multiple-value/_expected.html new file mode 100644 index 0000000000..c0ab4a082e --- /dev/null +++ b/packages/svelte/tests/server-side-rendering/samples/select-multiple-value/_expected.html @@ -0,0 +1,5 @@ + diff --git a/packages/svelte/tests/server-side-rendering/samples/select-multiple-value/main.svelte b/packages/svelte/tests/server-side-rendering/samples/select-multiple-value/main.svelte new file mode 100644 index 0000000000..6bde3f597a --- /dev/null +++ b/packages/svelte/tests/server-side-rendering/samples/select-multiple-value/main.svelte @@ -0,0 +1,5 @@ +