From 6eecadbaf80c14bf2cff80b91cd8c4d1acfa302a Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 29 May 2025 16:41:15 +0200
Subject: [PATCH] fix: only `select_option` if `'value'` is in `next`
---
.changeset/smooth-weeks-hide.md | 5 +++++
.../client/dom/elements/attributes.js | 2 +-
.../spread-element-input-select/_config.js | 20 +++++++++++++++++++
.../spread-element-input-select/main.svelte | 10 ++++++++++
4 files changed, 36 insertions(+), 1 deletion(-)
create mode 100644 .changeset/smooth-weeks-hide.md
create mode 100644 packages/svelte/tests/runtime-runes/samples/spread-element-input-select/_config.js
create mode 100644 packages/svelte/tests/runtime-runes/samples/spread-element-input-select/main.svelte
diff --git a/.changeset/smooth-weeks-hide.md b/.changeset/smooth-weeks-hide.md
new file mode 100644
index 000000000000..dc982561eb85
--- /dev/null
+++ b/.changeset/smooth-weeks-hide.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: only `select_option` if `'value'` is in `next`
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 6cfc123cc251..fcce0b444f49 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -486,7 +486,7 @@ export function attribute_effect(
set_attributes(element, prev, next, css_hash, skip_warning);
- if (inited && is_select) {
+ if (inited && is_select && 'value' in next) {
select_option(/** @type {HTMLSelectElement} */ (element), next.value, false);
}
diff --git a/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/_config.js b/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/_config.js
new file mode 100644
index 000000000000..71802ba6de9a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+ async test({ assert, target }) {
+ const select = target.querySelector('select');
+ ok(select);
+ const [option1, option2] = select;
+
+ assert.ok(option1.selected);
+ assert.ok(!option2.selected);
+
+ const btn = target.querySelector('button');
+ flushSync(() => {
+ btn?.click();
+ });
+ assert.ok(option1.selected);
+ assert.ok(!option2.selected);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/main.svelte b/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/main.svelte
new file mode 100644
index 000000000000..fb1f7ddf9614
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/main.svelte
@@ -0,0 +1,10 @@
+<script>
+ let { value = "Hello", spread = { disabled: false } } = $props();
+</script>
+
+<button onclick={()=> spread = { disabled: false }}></button>
+
+<select bind:value {...spread}>
+ <option>Hello</option>
+ <option>World</option>
+</select>