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

binding wrongly invalidates value that doesn't depend on it #4448

Closed
pushkine opened this issue Feb 23, 2020 · 6 comments
Closed

binding wrongly invalidates value that doesn't depend on it #4448

pushkine opened this issue Feb 23, 2020 · 6 comments
Labels
awaiting submitter needs a reproduction, or clarification bug stale-bot

Comments

@pushkine
Copy link
Contributor

pushkine commented Feb 23, 2020

Consider the following :

<script>
	const object = { property : 'string' }
	$: value = object.property
</script>

<input bind:value />

svelte rightly compiles it down to :

function input_input_handler() {
	value = this.value;
	$$invalidate(0, value);
}

now add a button that mutates object.property on click

<button on:click={() => (object.property = 'string')}>

and svelte will wrongly also invalidate object at input

function input_input_handler() {
	value = this.value;
	($$invalidate(1, value), $$invalidate(0, object));
}

which will in turn trigger the reactive statement $: value = object.property altough only value changed

this compiles into the same code with immutables, it just doesn't run reactive statements because of equality checks

https://svelte.dev/repl/21f9a5430bf34348b471417a30fb0af9?version=3.18.2

related : #4426

@Conduitry
Copy link
Member

This seems to be related to the fix for #2444, and I'm not sure what the correct behavior is here.

@tanhauhau
Copy link
Member

hmm.. you are binding with a reactive declared variable, value, the value of value is always derived from object.property, so are you expecting when changing value of value via <input bind:value /> gets propagated back to object.property ? 🤔

@tanhauhau
Copy link
Member

relevant:

<script>
  import Component from './Component.svelte';
	
	export let emails = ['[email protected]', '[email protected]'];
	$: set = new Set(emails)
</script>

{#each emails as email}
	<Component email={email} bind:set />
{/each}

https://svelte.dev/repl/3a8736942c8149fea7e88b864fa7d9e1?version=3.23.0

updating set, invalidates both set and email, causing it to always reset

@ribizli
Copy link

ribizli commented Aug 27, 2020

Similar situation here with store and array: https://svelte.dev/repl/9bc03311dae044e8b9de7776735a8e09?version=3.24.1
Checkbox cannot be checked, because it will be reset. (this is a reproduction REPL only)

@stale
Copy link

stale bot commented Jun 27, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale-bot label Jun 27, 2021
@stale
Copy link

stale bot commented Jul 11, 2021

This issue has been closed as it was previously marked as stale and saw no subsequent activity.

@stale stale bot closed this as completed Jul 11, 2021
DreaminDani added a commit to DreaminDani/svelte that referenced this issue Oct 30, 2022
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 bug stale-bot
Projects
None yet
Development

No branches or pull requests

5 participants