remove edge case handling in favor of smaller code size

pull/12316/head
Simon Holthausen 2 years ago
parent 08b9599e27
commit 7e55810cbc

@ -159,16 +159,7 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
for (var key in prev) {
if (!(key in next)) {
if (is_option_element && key === 'value') {
// Because of the "set falsy option values to the empty string" logic below, which can't
// differentiate between a missing value and an explicitly set value of null or undefined,
// we need to remove the attribute here and delete the key from the object.
element.removeAttribute(key);
delete current[key];
delete next[key];
} else {
next[key] = null;
}
next[key] = null;
}
}
@ -196,6 +187,12 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
// the value is set to the text content of the option element, and setting the value
// to null or undefined means the value is set to the string "null" or "undefined".
// To align with how we handle this case in non-spread-scenarios, this logic is needed.
// There's a super-edge-case bug here that is left in in favor of smaller code size:
// Because of the "set missing props to null" logic above, we can't differentiate
// between a missing value and an explicitly set value of null or undefined. That means
// that once set, the value attribute of an <option> element can't be removed. This is
// a very rare edge case, and removing the attribute altogether isn't possible either
// for the <option value={undefined}> case, so we're not losing any functionality here.
// @ts-ignore
element.value = element.__value = '';
current[key] = value;

@ -1,4 +1,3 @@
import { flushSync } from 'svelte';
import { test } from '../../test';
// <option value> is special because falsy values should result in an empty string value attribute
@ -27,39 +26,6 @@ export default test({
<select>
<option value="">Default</option>
</select>
<button>update reactive spread</button>
`
);
const btn = target.querySelector('button');
btn?.click();
flushSync();
assert.htmlEqual(
target.innerHTML,
`
<select>
<option value="">Default</option>
</select>
<select>
<option value="">Default</option>
</select>
<select>
<option value="">Default</option>
</select>
<select>
<option value="">Default</option>
</select>
<select>
<option>Default</option>
</select>
<button>update reactive spread</button>
`
);
}

@ -24,5 +24,3 @@
<select>
<option {...reactive_spread}>Default</option>
</select>
<button onclick={() => (reactive_spread = {})}>update reactive spread</button>

Loading…
Cancel
Save