Open johnnysprinkles opened 2 years ago
In your exemple you capitalise the first letter on every change so the value won't update if you upper/lower the first letter in the input.
I see what's happening, it's setting to the same value it already is, so the input.value =
gets optimized away. One workaround is to set to raw updated value first, then the programmatically altered value, as in:
https://svelte.dev/repl/435add48355b45ecba561fc9440e60c5?version=3.49.0
I guess this isn't actually a bug. Let me resolve.
You are right this is not a bug as name
never changes, you can also add a $: console.log(name)
in the script to make it even more obvious (it will only log once).
Unsetting the value first is a workaround but it will trigger unnecessary rerenders where you use that variable, it is likely better to force the input element's value itself:
<script>
let name = 'World';
function capitalize(e) {
let newName = e.currentTarget.value;
e.currentTarget.value = name = newName.slice(0, 1).toUpperCase() + newName.slice(1);
}
</script>
<h1>Hello {name}!</h1>
<input value={name} on:change|preventDefault={capitalize}>
Describe the bug
If you change only the case of the first letter of the value of a textbox, it fails to update. For example if you have "Bob" and you manually type "bob" but programmatically change back to Bob, the change never appears.
Reproduction
https://svelte.dev/repl/bdb30ab3c1dd4e0bb3afd97265a03e68?version=3.49.0
Logs
No response
System Info
Severity
annoyance