The basic "cursor jumping" issue: | facebook/react#955 |
I.E. onchange events out of order: | facebook/react#7027 |
The relevant fix in reagent: | reagent-project/reagent#253 |
One problem is that you must update the dom value synchronously.
If you fail to do that, you'll get dropped characters, because eventually you'll get two events
in a row and the second one will be based on a stale value (so the first event will get overwritten).
In contrast, no matter how long you take in the onchange handler, the browser does the right thing.
Consider this:
(defn test-component []
(let [*value (reagent/atom "")]
(fn []
[:input {:value @*value
:on-change (fn [e]
(loop [n 0 t 1]
(if (= n 1000000)
t
(recur (inc n) (* t n))))
(reset! *value (-> e .-target .-value)))}])))
Although the input will lag horribly, it will be correct, no matter how much you type.