When using ClojureScript with a React library beware that the :value for an :input needs to be of type string. If this is not the case then screen updates initiated from the code sometimes fail.

Demonstration of the issue

I've used Rum for a demonstration of the issue –not suggesting that this is Rum specific (haven't tried this with other ClojureScript React libraries).

If one takes the correct Rum examples code, in which the type is correctly converted to a string via a (str value), as shown below:

1(rum/defc reactive-input < rum/reactive
2  [*ref]
3  (let [value (rum/react *ref)]
4    [:input { :type "text"
5              :value (str value)
6              :style { :width 170 }
7              :on-change (fn [e] (reset! *ref (long (.. e -currentTarget -value)))) }]))

And change this correct code, omitting the (str ..), as follows:

1:value value

And do a lein cljsbuild once to compile the code and then load the index.html file in the browser.

Then the text field is not always updated when its value is set in the ClojureScript code. In the Rum example this is when –in the inputs box– clecking a checkbox, clicking a radio button, selecting a dropdown element, clicking the Next value button.

Screen dump

Note in the Inputs box (first colum, middle row) the value for Input (which is 1) and the Checks, Radio, Select and Next value (which indicate 3).

Normally (with the (str value) in place) these inputs would always be synchronized and show the same value.

Older React versions

This update issue appears not to occur with older React versions, for example:

1[rum "0.10.8" :exclusions [cljsjs/react cljsjs/react-dom]]
2[cljsjs/react "15.5.0-0"]
3[cljsjs/react-dom "15.5.0-0"]
4[cljsjs/react-dom-server "15.5.0-0"]

But it does occur with the latest versions (e.g. Rum 0.11.2 and React 16.3.0-1).