fix: transform input defaults from spread

[daimond113]

Fixes #16479.

The default props: defaultValue, defaultChecked for inputs were previously not renamed for SSR when set from an object spread, leading to unexpected results.

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.
• If this PR changes code within packages/svelte/src, add a changeset (npx changeset).

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[changeset-bot]

🦋 Changeset detected

Latest commit: fbfbbb3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Playground

pnpm add https://pkg.pr.new/svelte@16481

[paoloricciuti]

I think value act a bit differently than what defaultValue does on the client but I'll have to check...however this doesn't fix the reported bug. defaultValue and defaultChecked: even without spreading props defaultValue and defaultChecked doesn't get SSRd (which also make me think that it was a conscious decision to exclude them in the first place...so maybe the fix is to exclude them instead of converting them).

Also this should also be applied to textarea no? Thanks for taking a stab at this.

[daimond113]

The defaultValue not getting SSR'd seems like an issue as well, since the SvelteKit docs recommend writing forms with support for no JavaScript. Since the value isn't SSR'd into the HTML template, users without JavaScript will have to fill out the entire form, which is especially annoying for update forms.

[paoloricciuti]

The defaultValue not getting SSR'd seems like an issue as well, since the SvelteKit docs recommend writing forms with support for no JavaScript. Since the value isn't SSR'd into the HTML template, users without JavaScript will have to fill out the entire form, which is especially annoying for update forms.

I agree...but you can also do that with a value directly...I don't think this is an unnecessary fix, was just pointing out that converting them to value and checked might not yield the desired result (I think there's some slight change in behaviour when you do so)

[daimond113]

Unfortunately, value doesn't work if you use bind:value.

[daimond113]

Also this should also be applied to textarea no?

I don't believe so - textarea doesn't support a value attribute in its markup.

[7nik]

According to specs we have:
prop defaultValue <-> attr value
prop value <-> input's current value with initial value of attr value

So, defaultValue should SSR into the value attribute. But into what should this SSR?:

<input value="foo" defaultValue="bar">

because they both set the same attribute value. I think value should take precedence in this case for better UX in no-JS case.

[daimond113]

<input value="foo" defaultValue="bar">

I would expect this to SSR into <input value="bar"> and the value to be set to "foo" in JS.

[7nik]

But it can be done only if JS is enabled.
Plus, somebody can do

<input bind:value defaultValue="">

to allow resetting a pre-filled form into an empty one.

[daimond113]

I've pushed the change, which will now ignore defaultValue/defaultChecked if the non-default equivalent is set.

[daimond113]

It seems that this doesn't entirely work - the hydration emits remove_input_defaults, which removes the value/checked attributes. How should I pass in the information so as not to remove them?

[7nik]

But it is set back in the following attribute_effect, isn't it?

[daimond113]

Only when the props update after the initial hydration.

[7nik]

For now, my last thought is to pass the spreaded objects to remove_input_defaults so it sets the attribute to the defaultValue if it is present or removes the attribute otherwise.

[daimond113]

I'm not sure how to do that, I tried passing in the SpreadAttribute.expressions but that ends up calling functions ({...get_props()}) twice.

[svelte-docs-bot]

Preview: https://svelte-dev-git-preview-svelte-16481-svelte.vercel.app/

[7nik]

@daimond113 please check how it is now.

[daimond113]

Seems to work as expected. Thank you!

[7nik]

I'm not happy with adding a new param to set_attributes, but I don't see a better solution.

[Rich-Harris]

thank you!