Skip to content

Two way binding to a property of an object in an array update is delayed #16634

@JacobSilasBentley

Description

@JacobSilasBentley

Describe the bug

If I use a complex two way binding to read and update a value on an object in an array that is inside a class (see minimal reproduction code below) I get weird behaviour where the update doesn't happen until a second input.

<script>
	class MyStore {
		arrayOfComplexObjects = $state([{ value: "value" }])
		
		updateObject = (x) => {
			this.arrayOfComplexObjects = this.arrayOfComplexObjects.map(_ => ({ value:x }))
		}
	}
	
	const myStore = new MyStore();
</script>

{#each myStore.arrayOfComplexObjects as obj}
	<div>
		{obj.value}
	</div>
	<input bind:value={() => obj.value, (x) => myStore.updateObject(x)} />
{/each}

This issue does not occur on version 5.35.1.

Reproduction

The issue is reproduced in a minimal reproduction here

https://svelte.dev/playground/ac953fd28f2941ef8a8f105461d061f3?version=5.38.1

Logs

No relevant logs.

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 AMD Ryzen 5 PRO 8540U w/ Radeon 740M Graphics
    Memory: 3.54 GB / 14.67 GB
  Binaries:
    Node: 22.17.0 - ~\AppData\Local\Volta\tools\image\node\22.17.0\node.EXE 
    npm: 10.9.2 - ~\AppData\Local\Volta\tools\image\node\22.17.0\npm.CMD    
  Browsers:
    Edge: Chromium (139.0.3405.102)
  npmPackages:
    svelte: ^5.0.0 => 5.37.2

Severity

blocking an upgrade

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions