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

fix: restore value after attribute removal during hydration #11465

Merged
merged 7 commits into from May 5, 2024

Conversation

paoloricciuti
Copy link
Contributor

@paoloricciuti paoloricciuti commented May 4, 2024

Svelte 5 rewrite

Fix #11457 the test is actually failing because i don't know how to write the test let the suite check the html only on the server and then assert that it changes on hydration. Is that even possible?

Please note that the Svelte codebase is currently being rewritten for Svelte 5. Changes should target Svelte 5, which lives on the default branch (main).

If your PR concerns Svelte 4 (including updates to svelte.dev.docs), please ensure the base branch is svelte-4 and not main.

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.

Tests and linting

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

Copy link

changeset-bot bot commented May 4, 2024

🦋 Changeset detected

Latest commit: e795aff

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

@dummdidumm
Copy link
Member

There's ssrHtml to check SSRd HTML, and then there's variant (passed to the test function) which you can use to conditionally check something depending on which test variant (Dom, SSR, hydrate) runs

@paoloricciuti
Copy link
Contributor Author

There's ssrHtml to check SSRd HTML, and then there's variant (passed to the test function) which you can use to conditionally check something depending on which test variant (Dom, SSR, hydrate) runs

Thanks...i actually figured that out just now...i've updated the test and changed one snapshot that was now failing. Maybe double check my test to see if this is actually the correct behaviour 😄

Copy link
Member

@dummdidumm dummdidumm left a comment

Choose a reason for hiding this comment

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

I don't think this is the right fix. The right fix is to fix the remove_input_attr_defaults function. Right now it just removes the attributes but it doesn't set the property, which means the value is just lost, leading to far more bugs than just this specific one. The fix is probably just this:

export function remove_input_attr_defaults(dom) {
	if (hydrating) {
		const value = dom.value;
		// @ts-expect-error
		const checked = dom.checked;
		set_attribute(dom, 'value', null);
		set_attribute(dom, 'checked', null);
		dom.value = value;
		// @ts-expect-error
		dom.checked = checked;
	}
}

@paoloricciuti
Copy link
Contributor Author

I don't think this is the right fix. The right fix is to fix the remove_input_attr_defaults function. Right now it just removes the attributes but it doesn't set the property, which means the value is just lost, leading to far more bugs than just this specific one. The fix is probably just this:

export function remove_input_attr_defaults(dom) {
	if (hydrating) {
		const value = dom.value;
		// @ts-expect-error
		const checked = dom.checked;
		set_attribute(dom, 'value', null);
		set_attribute(dom, 'checked', null);
		dom.value = value;
		// @ts-expect-error
		dom.checked = checked;
	}
}

Mmm...I was under the impression that after the removal hydration still did his job and the value was actually there. Infact in the test I also check that checked is true and it seems to pass. Am I wrong?

@paoloricciuti
Copy link
Contributor Author

I don't think this is the right fix. The right fix is to fix the remove_input_attr_defaults function. Right now it just removes the attributes but it doesn't set the property, which means the value is just lost, leading to far more bugs than just this specific one. The fix is probably just this:

export function remove_input_attr_defaults(dom) {
	if (hydrating) {
		const value = dom.value;
		// @ts-expect-error
		const checked = dom.checked;
		set_attribute(dom, 'value', null);
		set_attribute(dom, 'checked', null);
		dom.value = value;
		// @ts-expect-error
		dom.checked = checked;
	}
}

Btw regardless I can change the fix to be the one you proposed if you think it's a better fix. I'll update the code later.

@dummdidumm
Copy link
Member

It seems that it keeps the checked state, but the value state is definetly deleted. So yeah, we can micro-optimize that and don't do the checked set.

@paoloricciuti
Copy link
Contributor Author

It seems that it keeps the checked state, but the value state is definetly deleted. So yeah, we can micro-optimize that and don't do the checked set.

So just to confirm, I'll fix with your code and remove the last line right?

@paoloricciuti
Copy link
Contributor Author

@dummdidumm made a slight modification because reading dom.value was returning "on" when value was not set in checkboxes. This broke tests but also didn't seem like a good thing to have. It should be all green now

@paoloricciuti paoloricciuti changed the title fix: fine grained hydration attribute removal fix: restore value after attribute removal during hydration May 4, 2024
Copy link
Member

@dummdidumm dummdidumm left a comment

Choose a reason for hiding this comment

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

Thank you!

@dummdidumm dummdidumm merged commit 34079a0 into sveltejs:main May 5, 2024
6 of 8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Svelte 5: radio input loses value after hydration with conditional "checked"
2 participants