Manual sync state invalidation does not force update in Svelte 5

[brunnerh]

Describe the bug

In Svelte 4 you can do something like this to force a DOM update based on state:

value = null;
value = valueToSet;

In Svelte 5, this does not force the update in cases where value == valueToSet.

Admittedly, this is a bit of a hack.
Workaround:

value = null;
await tick();
value = valueToSet;

Reproduction

Svelte 5 (Runes mode seems to behave the same)
Svelte 4

Code

<script>
    let value = 0;
    let min = 0;
    let max = 100;
    let step = 1;

    function onInputChanged(event) {
        const inputElement = event.target;
        const newValue = inputElement.value;
        const valueToSet = computeValueToSet(newValue);

        value = null; // Does nothing in Svelte 5
        value = valueToSet;
    }

    function computeValueToSet(newValue) {
        if (newValue === "")
            return value;

        const newInt = parseInt(newValue);

        const isInRange = min <= newInt && newInt <= max;
        if (!isInRange)
            return value;

        return newInt;
    }
</script>

<div>
    <input type=range {min} {max} {step} bind:value /> <br>
		Type a value outside [{min}, {max}]
    <input
        type=number
        {value}
        on:input={onInputChanged}
        {min}
        {max}
        {step}
    />
</div>

Logs

No response

System Info

REPL

Severity

annoyance

[trueadm]

@paoloricciuti I'm struggling with this one because of the tests you added in #11720.

Specifically, this line doesn't seem right:

https://github.com/sveltejs/svelte/blob/main/packages/svelte/src/internal/client/dom/elements/attributes.js#L58

If I change it to:

if (attributes.value === (attributes.value = value) && element.value === value) return;

Then the tests you added fail. However, we want changes to the value to update the DOM to the correct state. Could you maybe take a look please?

[paoloricciuti]

I think the tests are correct...if the user updates the value of an input that has a value property the value js variable doesn't change. But when you update an unrelated variable we don't want the value to be set again.

If you run this in the repl

<script>
	let count = $state(0);
	let value = $state("");
	let checked = $state(false);
</script>

<input type="text" {value} />

<textarea {value}></textarea>

<input type="checkbox" {checked} />

<button onclick={()=>count++}>{count}</button>

and try to write something in textarea, check the checkbox and write in the input when you click on the buttons the value reset (after modifying the line) which is wrong.

[trueadm]

I think the tests are correct but do you have ideas on tackling this issue?

[paoloricciuti]

I think the tests are correct but do you have ideas on tackling this issue?

Oh gotcha...let me take a look

[paoloricciuti]

I don't think we can do anything about it...this is basically one of the documented breaking change but there's a way out provided by svelte itself: flushSync...you just need to wrap the value=null in flushSync

[trueadm]

Then we ideally need to document this as a breaking change.