fix: consistently set value to blank string when value attribute is undefined (#15057)

Fixes #4467

Author: theodorejb

.changeset/dirty-sloths-move.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: consistently set value to blank string when value attribute is undefined

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -68,14 +68,14 @@ export function set_value(element, value) {
 				// treat null and undefined the same for the initial value
 				value ?? undefined) ||
 		// @ts-expect-error
-		// `progress` elements always need their value set when its `0`
+		// `progress` elements always need their value set when it's `0`
 		(element.value === value && (value !== 0 || element.nodeName !== 'PROGRESS'))
 	) {
 		return;
 	}
 
 	// @ts-expect-error
-	element.value = value;
+	element.value = value ?? '';
 }
 
 /**

packages/svelte/tests/runtime-runes/samples/value-attribute-null-undefined/_config.js

@@ -0,0 +1,49 @@
+import { test, ok } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	mode: ['client'],
+
+	async test({ assert, target }) {
+		/**
+		 * @type {HTMLInputElement | null}
+		 */
+		const input = target.querySelector('input[type=text]');
+		/**
+		 * @type {HTMLButtonElement | null}
+		 */
+		const setString = target.querySelector('#setString');
+		/**
+		 * @type {HTMLButtonElement | null}
+		 */
+		const setNull = target.querySelector('#setNull');
+		/**
+		 * @type {HTMLButtonElement | null}
+		 */
+		const setUndefined = target.querySelector('#setUndefined');
+
+		ok(input);
+		ok(setString);
+		ok(setNull);
+		ok(setUndefined);
+
+		// value should always be blank string when value attribute is set to null or undefined
+
+		assert.equal(input.value, '');
+		setString.click();
+		flushSync();
+		assert.equal(input.value, 'foo');
+
+		setNull.click();
+		flushSync();
+		assert.equal(input.value, '');
+
+		setString.click();
+		flushSync();
+		assert.equal(input.value, 'foo');
+
+		setUndefined.click();
+		flushSync();
+		assert.equal(input.value, '');
+	}
+});

packages/svelte/tests/runtime-runes/samples/value-attribute-null-undefined/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	let value = $state();
+</script>
+
+<input type="text" {value} />
+
+<button id="setString" onclick={() => {value = "foo";}}></button>
+<button id="setNull" onclick={() => {value = null;}}></button>
+<button id="setUndefined" onclick={() => {value = undefined;}}></button>