Seed: Bug: Jumping cursor

[MartinKavik]

Test case:

1. cargo make start counter
2. Click to the input with text click - place cursor somewhere before the last letter, e.g. c|lick
3. Write something (e.g. x) and observe - you should see cxlick|

I tried to reset master branch before we merged sync with animation frame but it seems that this bug was here from the beginning.

I was googling a little bit and it seems that every second person encountered this - jQuery, React, plain js..

I'll try to fix it somehow.

[MartinKavik]

I investigated it a little bit, see referenced PR #159 for more info.
@David-OConnor I don't want to change code under your hands and I think that it will we more effective when you fix it while you are refatoctoring events & listeners.

[MartinKavik]

@David-OConnor Do you have something in progress or can I fix it?

[David-OConnor]

Have at it - Nothing on my end.

[MartinKavik]

Bug seems to be fixed on desktop browsers (Firefox + Chrome on Windows), but it still jumps on iOS (Safari + Firefox). You can test it with https://seed-rs-realworld.netlify.com/ (for example on Sign-in form).

Possible solution is to remember cursor position before calling set_value and then set it to previous value (inspired by https://github.com/facebook/react/issues/955#issuecomment-469344232).
Or we can experiment with orders.force_render.

P.S. @David-OConnor I will be without PC for about two weeks in August, so I can't start working on it until the second half of August.

[David-OConnor]

That RWE looks great!

[MartinKavik]

Update:
Can't use solution in https://github.com/facebook/react/issues/955#issuecomment-469344232 now, because it's blocked by https://github.com/rustwasm/wasm-bindgen/pull/1811.
Once this PR is merged and a new wasm-bindgen (web-sys) is released, we can continue to implement it probably here: https://github.com/David-OConnor/seed/blob/291c6392b452b99f56fc6a8095a42313c32dba5e/src/util.rs#L108 We have to be careful with implementation for HTMLInputElement because only some types support selectionStart/End - see table https://html.spec.whatwg.org/multipage/input.html#concept-input-apply.

How to test it:

1. cargo make start counter
2. open it on phone (bug exists at least on iOS + Firefox) - 192.168.x.x:8000
3. write something to the only input field
4. move cursor somewhere to the middle of the written text
5. write something again
6. observe: cursor shouldn't jump at the end of the text in the input

---

Update: PR merged, next web-sys version (> 0.3.28) should unblock implementation

[MartinKavik]

Update: wasm-bindgen with required HTMLInputElement methods has been released: https://github.com/rustwasm/wasm-bindgen/releases/tag/0.2.52