Binding to store on select element doesn't work with on:input event.

[basuke]

Describe the bug

In the event listener of input event of select which bind to store value, if the value of the same store but different property was changed, the bind itself doesn't work at all.

1. Create a store with object: i.e. const s = writable({a:0, b: 0})
2. Create a <select> element with bind:value={$s.a} and on:input={()=>$s.b++}.
3. Change select element's value. It won't change the $s.a

Reproduction

https://svelte.dev/repl/6520010283474705a76372d5a2569e16?version=3.49.0

Logs

No response

System Info

System:
    OS: macOS 12.5
    CPU: (20) arm64 Apple M1 Ultra
    Memory: 46.50 GB / 128.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.9.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Safari: 15.6

Severity

annoyance

[Conduitry]

Everything seems to be switching between "Alice" and "Bob" correctly for me when I select options in the first dropdown in your REPL. What are you doing and what are you seeing?

[basuke]

This is what I'm seeing. The top most one, the value doesn't change with menu selection.

Forgot to report that this is latest Chrome on iOS and Safari is same result. So is Mac Chrome.

https://youtu.be/KK4RCyVaOco

[basuke]

It works well on Mac Firefox.

Good:

• Mac Firefox (104.0b6)

Bad:

• Mac Safari (15.6)
• Mac Chrome (103.0.5060.134)
• iOS Safari
• iOS Chrome

[baseballyama]

I checked this issue and I found 1 thing.

I created minimum REPL by vanilla JS. https://codepen.io/baseballyama/pen/rNJOwGX

I think the reson is that Google Chrome on mac hundles input event before change event. AFAIK, browser doesn't have garantee of event firering order. so I'm not sure what we can do for this.

[elialbert]

would it be possible to check OS and adjust behavior accordingly in svelte? or force event firing order in some way? or is that not something we can do?

[victorhazbun]

Tested on MacOS + Chromium 114.0.5735.198 AND MacOS + Safari 16:

on:input: Does not work as expected - Apparently the <select> WITH on:input has issues updating the component state. on:change: Works as expected.