Svelte 5: Bug - $state is not properly updated when another $state is modified inside class

[mariansimecek]

Describe the bug

I am trying to create a form validator, and I encountered a bug when it does not change the $state of values on the first keypress inside <CustomInput/>

This is smallest code that reproduce that bug:

<script>
  import CustomInput from './Input.svelte';

  class Form {
    values = $state({name:''});
    errors = $state({});
		
    getProps(name) {
      return {
        oninput: (e) => {
	  this.errors[name] = "something"
        },
        error: this.errors[name],
      };
    }
  }

  let form = new Form();
</script>

<CustomInput  bind:value={form.values.name} {...form.getProps('name')} />

<!-- Input.svelte -->
<script >
  let {value = $bindable(), error, ...rest} = $props();
 
</script>
<input bind:value {...rest} />

Things I found:

• I don't encouter this bug inside firefox.
• It works when I move function getProps() outside Form class.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA6VTTWvbQBD9K4-lIBmEfFckQwkEcik55RLloMjjeKm0K3ZHNkXov5fZVWS77qFQdNHsm48382YmddAdeVW8Tco0PalCfR8GlSn-NYjhT9QxqUx5O7pWXkrfOj3wrjaA7gfrGI-jZ9s_m2FkHJztkeTbYOUxPHmojbi3XeM9nqzrMYkNnJpuJI8K3zw3TOk0bx4iQs5Zd4fUXHPEW2s8u7Fl69IJ2mjWTfca082br_wAH7XP1zI3fkulOZIDPolfnB18KoO4SuGIR2cuNmCNlvYKpLRBtRMoMAtfqBjpv0mmd1Solbc98VGbz1pd8szZ5T9EFLiLXl3mC9-VdEeMg8yzgqFzGG268LxptcAEyVYgSZaqYZ7ldlWzHIKkT9p5RntsXNMyOWgPYxmyDntog9i4RIp_bcpr8Yeuaelouz25qlYRiRG1woc2-yIoUU3CeVElF14zpjzPw-uqQiJAspmxXdk9M87W_fQ4az7CNKxP9AejUv-FyY8rz_9lUhuVqd7u9UHTXhXsRpqz9XjCHP7hfLD7ku_6EmTdhVzz0VG6yeJWhWVYtiDPc0eeBZjFeQj8ws3cihmncGk0dCWh0sR9A-_zb84yRwEJBAAA

Logs

No response

System Info

System:
    OS: Linux 6.7 Fedora Linux 39 (Workstation Edition)
    CPU: (8) x64 Intel(R) Core(TM) i5-8300H CPU @ 2.30GHz
    Memory: 5.38 GB / 15.48 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Chrome: 123.0.6312.86
  npmPackages:
    svelte: 5.0.0-next.102 => 5.0.0-next.102

Severity

annoyance

[paoloricciuti]

This should be relative to the fact that you are adding an oninput that is already added by bind:value if you move the bind:value after the spread it works fine

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE6VTwYrjMAz9FWEWkkBw75mmsAwMzGXZ017Gc_CkamvWsYOttCwh_77I7qTpdg8Liy9R9CQ9PUmTOBiLUTRvk3C6R9GIr8MgakG_BjbiGS2hqEX0Y-j4zzZ2wQy0Uw7A9IMPBM9jJN-_umEkOATfQyE3yZI5vHhSjuGd1THCiw89TGwDnLUdMUILXyJpwnKaq6fswRB8ePAoUpT9nXeRwtiRD-UExhky2v7I6ebqMz8AnUyUS5k73LXSnMkBHJG-Bz_EkoVYpQhIY3A3G8A7w-01UGIF7Y5diVl6zMxblNYfSyU6ba1xRyUW-uklWrnHNy73Di0oEX2PdErwW7G5vn2niAYeohfIfGtq6cwiwYFFb8HhJelfXpu506OBCThbA4UurmWT6tvNMvPtkAb_YkIk6E466I4wgIngPAEvzR6MgywPRzJeue16RQarOzx5u8fQKpE9OUIJmKSUTFYu0yiYU1HN8GHcvkmjbKcEyWOV7J9hs7B7Jbj48DPCxdAJnCZzxj8Ybc1fmHxbIf-XiXKiFr3fm4PBvWgojDjXy4klHf7hyGD3Ob_1vfBRMAP9YbGs6rxWaRuuayClDBiJHTODh8Q-Xdb9MLMK0xW_7gs2u8cG3uffqmUUli8EAAA=

[mariansimecek]

I think that make sense, this mean I don't need bind:value at all? I can do something like this ?

What seems weird to me is that it works in firefox and not in chrome, and moving function getProps from class change the behaviour too. I will make the issue open and wait on maintainers what they say, if there is some bug or not.

[paoloricciuti]

I've investigated a bit further and apparently the bug happens when you modify (inside the oninput) the same property that you are returning next to it (in this case this.errors[name]) definitely some weird behavior here.

[trueadm]

Looks related to #11138.