Merge pull request #925 from sveltejs/gh-915

don't use innerHTML for options inside optgroups
pull/933/head
Rich Harris 7 years ago committed by GitHub
commit 3ff208ffdd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -309,7 +309,7 @@ const preprocessors = {
stripWhitespace: boolean,
nextSibling: Node
) => {
if (node.name === 'slot') {
if (node.name === 'slot' || node.name === 'option') {
cannotUseInnerHTML(node);
}
@ -369,8 +369,6 @@ const preprocessors = {
// so that if `foo.qux` changes, we know that we need to
// mark `bar` and `baz` as dirty too
if (node.name === 'select') {
cannotUseInnerHTML(node);
const value = node.attributes.find(
(attribute: Node) => attribute.name === 'value'
);

@ -0,0 +1,39 @@
export default {
skip: true, // JSDOM
html: `
<h1>Hello Harry!</h1>
<select>
<option value="Harry">Harry</option>
<optgroup label="Group">
<option value="World">World</option>
</optgroup>
</select>
`,
test(assert, component, target, window) {
const select = target.querySelector('select');
const options = [...target.querySelectorAll('option')];
assert.deepEqual(options, select.options);
assert.equal(component.get('name'), 'Harry');
const change = new window.Event('change');
options[1].selected = true;
select.dispatchEvent(change);
assert.equal(component.get('name'), 'World');
assert.htmlEqual(target.innerHTML, `
<h1>Hello World!</h1>
<select>
<option value="Harry">Harry</option>
<optgroup label="Group">
<option value="World">World</option>
</optgroup>
</select>
`);
},
};

@ -0,0 +1,8 @@
<h1>Hello {{name}}!</h1>
<select bind:value="name">
<option value="Harry">Harry</option>
<optgroup label="Group">
<option value="World">World</option>
</optgroup>
</select>
Loading…
Cancel
Save