Fork me on GitHub

Hey guys, here’s a doosy for you that’s not really a re-frame question, but I suspect someone in this community has struggled with the same issue:


How do you handle [:input {:type ”number” :value val}] across your app, particularly when the value can be negative?


It really feels like DOM inputs are designed to only handle values as strings, “1”, “2.3”, “-4” etc. Any attempt to use numbers will get converted to a string. There’s on a “change” event, but this can be js/NaN if the number is not parseable.


So how does one handle a “controlled” component where :value val is set, but that val is something like -0 before the user finishes typing -0.2?


If you did strings all the way down, i.e. convert an API’s response to strings on your entity, then put that stringed entity into the db, things work- kind of. Except any time you need to do manipulation on the values you are now dealing with potentially unparseable values, and additionally you have to convert those potentially unparseable values back into numbers and you are further away from the source.


You can go with an “uncontrolled” component, I suppose, where the value remains a string inside the DOM element, and only triggers a dispatch when the on-change value can be parsed into a valid number? That way the values are numbers throughout your app, except when touching the dom.


Either way seems rather unnecessarily complicated for handling the simple case of “my user wants to type -0.2 into an input field"