handle undefined input value with spread (sveltejs#5291)

Author: tanhauhau

CHANGELOG.md

@@ -9,6 +9,7 @@
 * Include selector in message of `unused-css-selector` warning ([#5252](https://github.com/sveltejs/svelte/issues/5252))
 * Fix using `<Namespaced.Component/>`s in child `{#await}`/`{#each}` contexts ([#5255](https://github.com/sveltejs/svelte/issues/5255))
 * Fix using `<svelte:component>` in `{:catch}` ([#5259](https://github.com/sveltejs/svelte/issues/5259))
+* Fix setting one-way bound `<input>` `value` to `undefined` when it has spread attributes ([#5270](https://github.com/sveltejs/svelte/issues/5270))
 
 ## 3.24.1
 

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -725,6 +725,18 @@ export default class ElementWrapper extends Wrapper {
 			block.chunks.update.push(b`
 				if (${block.renderer.dirty(Array.from(dependencies))} && ${data}.multiple) @select_options(${this.var}, ${data}.value);
 			`);
+		} else if (this.node.name === 'input' && this.attributes.find(attr => attr.node.name === 'value')) {
+			const type = this.node.get_static_attribute_value('type');
+			if (type === null || type === "" || type === "text" || type === "email" || type === "password") {
+				block.chunks.mount.push(b`
+					${this.var}.value = ${data}.value;
+				`);
+				block.chunks.update.push(b`
+					if ('value' in ${data}) {
+						${this.var}.value = ${data}.value;
+					}
+				`);
+			}
 		}
 	}
 

test/runtime/samples/spread-element-input-value-undefined/_config.js

@@ -0,0 +1,12 @@
+export default {
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector("input");
+		component.value = undefined;
+
+		assert.equal(input.value, "undefined");
+
+		component.value = "foobar";
+
+		assert.equal(input.value, "foobar");
+	}
+};

test/runtime/samples/spread-element-input-value-undefined/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let value = '';
+</script>
+
+<input {value} {...{}} />