Skip to content

fix: make defaultValue work with spread #14640

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Rich-Harris merged 4 commits into from
Dec 12, 2024
Merged

fix: make defaultValue work with spread #14640

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d38820f
fix: make `defaultValue` work with spread
paoloricciuti Dec 9, 2024
ce373ff
chore: apply suggestions from review
paoloricciuti Dec 10, 2024
27f6cbb
tweak
Rich-Harris Dec 12, 2024
12780ed
only stash defaults when relevant
Rich-Harris Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions packages/svelte/src/internal/client/dom/elements/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,19 +347,19 @@ export function set_attributes(
} else if (key === '__value' || (key === 'value' && value != null)) {
// @ts-ignore
element.value = element[key] = element.__value = value;
} else if (key === 'defaultValue') {
/** @type {HTMLInputElement} */ (element).defaultValue = value;
} else if (key === 'defaultChecked') {
/** @type {HTMLInputElement} */ (element).defaultChecked = value;
} else if (key === 'selected' && is_option_element) {
set_selected(/** @type {HTMLOptionElement} */ (element), value);
} else {
var name = key;
if (!preserve_attribute_case) {
name = normalize_attribute(name);
}
if (value == null && !is_custom_element) {
let is_default_value_or_checked = name === 'defaultValue' || name === 'defaultChecked';

if (value == null && !is_custom_element && !is_default_value_or_checked) {
attributes[key] = null;
// if we remove the value/checked attributes this also for some reasons reset
// the default value so we need to keep track of it and reassign it after the remove
Copy link
Member

@dummdidumm dummdidumm Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I see, yeah that's why - now I'm wondering if we should model this differently: Check if the dom element is an input or textarea, and if so, if we come across a value or checked attribute, skip to the setters. Not sure which solution ends up being less code.

Copy link
Member Author

@paoloricciuti paoloricciuti Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we still need to remove the attribute, we just need to make sure to restore the default value

let default_value_reset = /**@type {HTMLInputElement}*/ (element).defaultValue;
let default_checked_reset = /**@type {HTMLInputElement}*/ (element).defaultChecked;
element.removeAttribute(key);
Expand All @@ -368,7 +368,10 @@ export function set_attributes(
} else if (key === 'checked') {
/**@type {HTMLInputElement}*/ (element).defaultChecked = default_checked_reset;
}
} else if (setters.includes(name) && (is_custom_element || typeof value !== 'string')) {
} else if (
is_default_value_or_checked ||
Copy link
Member

@dummdidumm dummdidumm Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need this check? AFAIK the setters should include defaultValue/defaultChecked

Copy link
Member Author

@paoloricciuti paoloricciuti Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before this it was not working at all so I assumed no (tbh I didn't check)

Copy link
Member

@Rich-Harris Rich-Harris Dec 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setters does include those values, but defaultValue fails the typeof value !== 'string' part of the check

(setters.includes(name) && (is_custom_element || typeof value !== 'string'))
) {
// @ts-ignore
element[name] = value;
} else if (typeof value !== 'function') {
Expand Down
2 changes: 0 additions & 2 deletions packages/svelte/tests/runtime-runes/samples/form-default-value-spread/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ export default test({
assert.htmlEqual(test1_span.innerHTML, 'foo foo foo foo');

after_reset.push(() => {
console.log('-------------');
check_inputs(inputs, 'value', 'x');
assert.htmlEqual(test1_span.innerHTML, 'x x x x');
});
Expand All @@ -88,7 +87,6 @@ export default test({
assert.htmlEqual(test2_span.innerHTML, 'foo foo foo foo');

after_reset.push(() => {
console.log('-------------');
check_inputs(inputs, 'value', 'x');
assert.htmlEqual(test2_span.innerHTML, 'x x x x');
});
Expand Down
2 changes: 0 additions & 2 deletions packages/svelte/tests/runtime-runes/samples/form-default-value/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ export default test({
assert.htmlEqual(test1_span.innerHTML, 'foo foo foo foo');

after_reset.push(() => {
console.log('-------------');
check_inputs(inputs, 'value', 'x');
assert.htmlEqual(test1_span.innerHTML, 'x x x x');
});
Expand All @@ -88,7 +87,6 @@ export default test({
assert.htmlEqual(test2_span.innerHTML, 'foo foo foo foo');

after_reset.push(() => {
console.log('-------------');
check_inputs(inputs, 'value', 'x');
assert.htmlEqual(test2_span.innerHTML, 'x x x x');
});
Expand Down
Loading