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