mirror of https://github.com/sveltejs/svelte
fix: select enabled option with null value when it matches bound value (#9550)
Fix select binding when matching enabled option has null value Fix null option being selected when it doesn't match the bound value Fixes #9545pull/9581/head
parent
1bc89b5eb6
commit
c011db178b
@ -0,0 +1,34 @@
|
||||
import { ok, test } from '../../test';
|
||||
|
||||
const items = [{ id: 'a' }, { id: 'b' }];
|
||||
|
||||
export default test({
|
||||
get props() {
|
||||
return {
|
||||
/** @type {{ id: string } | null} */
|
||||
foo: null,
|
||||
items
|
||||
};
|
||||
},
|
||||
|
||||
test({ assert, component, target }) {
|
||||
const select = target.querySelector('select');
|
||||
ok(select);
|
||||
|
||||
const options = target.querySelectorAll('option');
|
||||
|
||||
assert.equal(options[0].selected, true);
|
||||
assert.equal(options[1].selected, false);
|
||||
assert.equal(options[0].value, '');
|
||||
|
||||
component.foo = items[0];
|
||||
assert.equal(options[0].selected, false);
|
||||
assert.equal(options[1].selected, true);
|
||||
|
||||
component.foo = { id: 'c' }; // doesn't match an option
|
||||
assert.equal(select.value, '');
|
||||
assert.equal(select.selectedIndex, -1);
|
||||
assert.equal(options[0].selected, false);
|
||||
assert.equal(options[1].selected, false);
|
||||
}
|
||||
});
|
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
export let foo;
|
||||
export let items;
|
||||
</script>
|
||||
|
||||
<select bind:value={foo}>
|
||||
<option value={null}></option>
|
||||
{#each items as item}
|
||||
<option value={item}>{item.id}</option>
|
||||
{/each}
|
||||
</select>
|
Loading…
Reference in new issue