mirror of https://github.com/sveltejs/svelte
fix <select> one-way bind when options change (#5054)
parent
dc73b735ce
commit
6289dfcdcd
@ -0,0 +1,16 @@
|
||||
import AttributeWrapper from "./Attribute";
|
||||
import BindingWrapper from "./Binding";
|
||||
import ElementWrapper from "./index";
|
||||
|
||||
export default function handle_select_value_binding(
|
||||
attr: AttributeWrapper | BindingWrapper,
|
||||
dependencies: Set<string>
|
||||
) {
|
||||
const { parent } = attr;
|
||||
if (parent.node.name === "select") {
|
||||
(parent as ElementWrapper).select_binding_dependencies = dependencies;
|
||||
dependencies.forEach((prop: string) => {
|
||||
parent.renderer.component.indirect_dependencies.set(prop, new Set());
|
||||
});
|
||||
}
|
||||
}
|
@ -0,0 +1,34 @@
|
||||
export default {
|
||||
props: {
|
||||
items: [],
|
||||
selected: 'two'
|
||||
},
|
||||
|
||||
html: `
|
||||
<select></select>
|
||||
<p>selected: two</p>
|
||||
`,
|
||||
|
||||
ssrHtml: `
|
||||
<select value="two"></select>
|
||||
<p>selected: two</p>
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.items = [ 'one', 'two', 'three' ];
|
||||
|
||||
const options = target.querySelectorAll('option');
|
||||
assert.ok(!options[0].selected);
|
||||
assert.ok(options[1].selected);
|
||||
assert.ok(!options[2].selected);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<select>
|
||||
<option value='one'>one</option>
|
||||
<option value='two'>two</option>
|
||||
<option value='three'>three</option>
|
||||
</select>
|
||||
<p>selected: two</p>
|
||||
`);
|
||||
}
|
||||
};
|
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
export let selected;
|
||||
export let items;
|
||||
</script>
|
||||
|
||||
<select value={selected} on:blur={e => selected = e.target.value}>
|
||||
{#each items as item}
|
||||
<option>{item}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<p>selected: {selected || 'nothing'}</p>
|
Loading…
Reference in new issue