Clojurians Log v2
Clojure programming
Channels
Apps
rum
Simple, decomplected, isomorphic HTML UI library for Clojure and ClojureScript | 0.12.8 https://github.com/tonsky/rum/blob/gh-pages/CHANGELOG.md#0128
magnusdk 2019-02-05T11:00:24.051Z
I'm having some issues working with controlled inputs in Rum where the cursor position jumps to the end of the text while typing. This makes it difficult to type in the middle of a text. I have tried to find the minimal case where it happens:
(def a* (atom ""))
(defn field-without-on-change
[a]
[:input {:value a}])
(rum/defc form-with-on-change < rum/reactive
[]
[:form {:on-change #(reset! a* (-> % .-target .-value))}
(field-without-on-change (rum/react a*))])
:on-change attribute on the input-tag works:
(def a* (atom ""))
(defn field-with-on-change
[a]
[:input {:on-change #(reset! a* (-> % .-target .-value))
:value a}])
(rum/defc form-without-on-change < rum/reactive
[]
[:form {}
(field-with-on-change (rum/react a*))])
magnusdk 2019-02-06T09:51:43.052100Z
Thanks for the response, sorry for the delay 🕕
magnusdk 2019-02-06T09:52:57.052300Z
So the on-change handler has to be put directly on the :input tag; putting it on the :form tag won't work.
serioga 2019-02-07T08:24:00.055300Z
if form's on-change is not called when input value is changed by user then yes
magnusdk 2019-02-07T09:37:32.057900Z
The form's :on-change is called when the input value changes, updating the atom causing the input to change – this is working fine. But it also resets the cursor position to the end of the text which is a problem :thinking_face:
It only resets the cursor position when the :on-change handler is put on the form-tag. There are no issues when putting it on the input-tag.
magnusdk 2019-02-07T09:38:15.058100Z
I tried posting a gif in this thread that illustrates the issue, but I'm not sure it was uploaded correctly edit: here it is: https://user-images.githubusercontent.com/15210698/52402545-d6f75200-2ac4-11e9-9703-ef23acb38846.gif
magnusdk 2019-02-05T11:04:05.051100Z
serioga 2019-02-05T15:03:13.051500Z
you should render input value from some data and change this data in on-change
serioga 2019-02-05T15:03:53.051700Z
https://github.com/tonsky/rum/blob/gh-pages/examples/rum/examples/inputs.cljc