fix: bind null option and input values consistently

Null and undefined `value` bindings should always be set to an empty string. This allows native browser validation of `required` fields to work as expected with placeholder options.

Resolves #8312

Author: theodorejb

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

@@ -171,7 +171,7 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 		}
 
 		if (is_indirectly_bound_value) {
-			const update_value = b`${element.var}.value = ${element.var}.__value;`;
+			const update_value = b`@set_input_value(${element.var}, ${element.var}.__value);`;
 			block.chunks.hydrate.push(update_value);
 
 			updater = b`

test/js/samples/select-dynamic-value/expected.js

@@ -8,7 +8,8 @@ import {
 	insert,
 	noop,
 	safe_not_equal,
-	select_option
+	select_option,
+	set_input_value
 } from "svelte/internal";
 
 function create_fragment(ctx) {
@@ -24,9 +25,9 @@ function create_fragment(ctx) {
 			option1 = element("option");
 			option1.textContent = "2";
 			option0.__value = "1";
-			option0.value = option0.__value;
+			set_input_value(option0, option0.__value);
 			option1.__value = "2";
-			option1.value = option1.__value;
+			set_input_value(option1, option1.__value);
 		},
 		m(target, anchor) {
 			insert(target, select, anchor);

test/runtime/samples/binding-select-null-placeholder/_config.js

@@ -0,0 +1,28 @@
+const items = [ { id: 'a' }, { id: 'b' } ];
+
+export default {
+	props: {
+		foo: null,
+		items
+	},
+
+	test({ assert, component, target }) {
+		const select = target.querySelector( 'select' );
+		const options = target.querySelectorAll( 'option' );
+
+		assert.equal( options[0].selected, true );
+		assert.equal( options[0].disabled, true );
+		assert.equal( options[1].selected, false );
+		assert.equal( options[1].disabled, false );
+
+		// placeholder option value must be blank string for native required field validation
+		assert.equal( options[0].value, '' );
+		assert.equal( select.checkValidity(), false );
+
+		component.foo = items[0];
+
+		assert.equal( options[0].selected, false );
+		assert.equal( options[1].selected, true );
+		assert.equal( select.checkValidity(), true );
+	}
+};

test/runtime/samples/binding-select-null-placeholder/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	export let foo;
+	export let items;
+</script>
+
+<select bind:value={foo} required>
+	<option value={null} disabled>Select an option</option>
+	{#each items as item}
+		<option value={item}>{item.id}</option>
+	{/each}
+</select>