Input element doesn't update with 1-way bind to value prop

[jajabarr]

Is this about svelte@next? This project is currently in a pre-release stage and breaking changes may occur at any time. Please do not post any kind of bug reports or questions on GitHub about it.

Describe the bug
When updating a variable via event value from on:input, and then 1-way binding the value of the element to the variable, it would be expected that when the variable updates, so does the input value.

Logs
N/A

To Reproduce
REPL link: https://svelte.dev/repl/6ea9d09354874ab79685d1131f7d7d77?version=3.35.0

Expected behavior
The input updates when the variable bound to value changes

Stacktraces
N/A

Information about your Svelte project:

Google Chrome	89.0.4389.90 (Official Build) (64-bit) (cohort: Stable)
Revision	62eb262cdaae9ef819aadd778193781455ec7a49-refs/branch-heads/4389@{#1534}
OS	Windows 10 OS Version 2004 (Build 19041.867)
JavaScript	V8 8.9.255.20

Severity:
Severe? I would really expect this to just work. I'd like to have an input with custom validation, and two-way binding causes unnecessary updates, because reacting to the two-way bound variable will always result in two updates (one from raw input update, the next via validation and reassignment to the variable)

Raw code:

<script>
	let inputValue = 0;
	let previousSafeValue = 0;
	
	const onUpdate = (event) => {
		const rawInput = event.target.value;
		if (isNaN(+rawInput)) {
			inputValue = previousSafeValue;
		} else {
		        // >>bug<< This does NOT update the input 
			inputValue = previousSafeValue = Number(rawInput);
		}
	}
</script>

<input value={inputValue} on:input={onUpdate}/>

[jajabarr]

I debugged that the reason the update is skipped, is because previousSafeValue will always be 0 when typing characters, so the assignment to inputValue always becomes 0=0.

However, then it seems that there is a lack of synchronization between the fact that the actual input value may be "0awaw", and the variable inputValue will be 0. Since the input value prop is 1-way binded to inputValue I would still expect them to be synchronized.

The above example can be resolved with something like: https://svelte.dev/repl/4afa6bc5639546d2a7026aceb5d4baa7?version=3.35.0

<script lang="typescript">
  let bindedInputValue = 0;
  let previousBlockSize = 0;

  $: {
    if (!isNaN(+bindedInputValue)) {
      bindedInputValue = previousBlockSize = +bindedInputValue;
    } else {
      bindedInputValue = previousBlockSize;
    }
  }
</script>

 <input bind:value={bindedInputValue} />

However, it's a little messy having to create an extra variable to two-way bind to the input explicitly, when 1-way should be synced as I described.

[stale]

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.

[VKBobyr]

I have a similar issue with the following code:

<script>
	let name = 'world';
	
	function onChange(e) {
		e.preventDefault() // redundant but still doesnt work
		name = e.currentTarget.value.substr(0, 5); // length shouldnt exceed 5
	}
	
	$: console.log({name})
</script>

<input value="{name}" on:input|preventDefault="{onChange}" />

Though the length of name never exceeds 5 characters, the visual content of input is unbounded

[dotch]

I am also running into this:

<script>
	let noDigits = '';
	
	const handleInput = (ev) => {
		const rawInput = ev.target.value;
		const cleanedInput = rawInput.replace(/\d/g, '');
		noDigits = cleanedInput;
		
		// it works if you add this line in
		// ev.target.value = noDigits;
	}
</script>

<input on:input|preventDefault={handleInput} value={noDigits} />

[dummdidumm]

Not sure if we can/should fix this. Ways around this (possibly):

• with Svelte 5 and $state approaching, if you could give $state an equality function and you would set it to "never equal" then it would fire and possible reset the input
• change the behavior so that update from the dom to value are blocked if we notice that value is set as an attribute, and only updates from the value prop are used to update it. This would be a breaking change

In the meantime its best to also assign the value to the input itself directly, i.e. do ev.target-value = lastSafeValue