Skip to content
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.

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

Svelte 5: radio input loses value after hydration with conditional "checked" #11457

Closed
dirkjonker opened this issue May 3, 2024 · 3 comments · Fixed by #11465
Closed

Svelte 5: radio input loses value after hydration with conditional "checked" #11457

dirkjonker opened this issue May 3, 2024 · 3 comments · Fixed by #11465
Labels
awaiting submitter needs a reproduction, or clarification

Comments

@dirkjonker
Copy link

Describe the bug

I have a simple set of radio buttons to switch language. I want to have the current option checked by using a simple conditional.

<input id="lang_nl" type="radio" name="lang" value="nl" onchange={switchLang} checked={lang === "nl"}>

When the page is rendered server-side, it looks like this:

<input id="lang_nl" type="radio" name="lang" value="nl" checked>

However after hydration, the browser shows the element like this:

<input id="lang_nl" type="radio" name="lang">

Removing the condition statement checked={lang === "nl"} or setting it to a "boolean" value i.e. checked fixes the issue

Reproduction

Note: in SPA mode this doesn't actually reproduce the issue. You need to run this locally and perform a hard refresh on the page to reproduce the behaviour, as the issue may have something to do with hydration?
Repl link

Logs

No response

System Info

Svelte 5.0.0-next.123

Severity

annoyance

@RaiVaibhav
Copy link
Contributor

I feel this is expected, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox, checked can be property/state, on server side to set it as a default property, this is added as a attribute but without any value, but on client this is state/property of the input, to set it as attribute this you can use setAttribute, so I think Svelte only set the property.

But you are right, attribute cum property having a static value and should be shown in the initial template

@dummdidumm
Copy link
Member

As pointed out this behavior is intended, because checked is used for the default value, and non-static values are not seen as default values.

What problem does this cause for you in practise?

@dummdidumm dummdidumm added the awaiting submitter needs a reproduction, or clarification label May 4, 2024
@dirkjonker
Copy link
Author

I think I have not been clear enough in my issue description. The entire value="nl" attribute disappears, breaking the input. The server renders this attribute and in SPA mode (e.g. the repl link) the issue also does not occur.

Only when you refresh the page and svelte hydrates the server rendered html, the value="nl" attribute is gone, breaking the input.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
awaiting submitter needs a reproduction, or clarification
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants