search

sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
78.75k stars 4.13k forks source link

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

Open basuke opened 2 years ago

basuke commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

It works well on Mac Firefox.

Good:

Bad:

baseballyama commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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.