mirror of https://github.com/sveltejs/svelte
fix: bind null option and input values consistently (#8328)
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. Placeholder options bound to null are necessary in forms where the field is conditionally required, and the bound value is posted to an API endpoint which requires it to be a nullable number or object rather than a string. fixes #8312pull/8515/head
parent
d587175852
commit
1728a8940e
@ -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 );
|
||||
}
|
||||
};
|
@ -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>
|
Loading…
Reference in new issue