Fork me on GitHub
Reily Siegel12:10:07

I'm having some issues with using reagent with cljsjs/material-ui. When using material-ui/Input (after adapting) as a controlled input, and using android Firefox (desktop Firefox works fine), the input does not correctly fire events. Lets say I tried to type "example" into the input. When "e" is pressed, the input reads "e" When "x" is pressed, the input reads "eex" When "a" is pressed, the input reads "eexea" When "m" is pressed, the input reads "eexeaeexm" When "p" is pressed, the input reads "eexeaeexmeexeap" I got it down to a pretty simple failing example: (defonce text (reagent/atom "")) (defn input [] [material/Input {:value @text :on-change #(reset! text (-> % .-target .-value))}]) This bug only occurs on Firefox for android, and does not occur on Firefox Focus for android. From some println debugging, it seems events are being fired twice on Firefox. Has anyone run into this before?


it’s a more general reagent/controlled input/react thing though, nothing about android/firefox specific


so perhaps could be a separate issue, I haven’t heard of the one you have above before, but just wondering if the state is being messed up for the same reasons as there


that one is about a text field, but perhaps similar


So maybe something like that, inspired by the text field example you can find at that GitHub link. You’d use MuiAdaptedInput in place of the base mui/Input.

Reily Siegel15:10:02

Thanks for the link! Ill try it when I get home in a few hours, and let you know if it works!


Yeah, a bit of a long shot since I wouldn’t expect things to work on some environments and not others and also not sure the stuff you showed above is the same sort of case since it seems to be extra firing changes or something. but still probably worth a initial try to see if it does affect it at all.


hey guys, what do you think about in reagent?


much excite!! 😄


at this point I'm close to replacing reagent with React and a decent hiccup compiler


(not really that close. but my hopes are high we'll be there eventually)


Interesting. I wonder if e.g. useReducer will work with Cljs data structures.


probably not - I expect it's the same as this.setState where it expects the top-level object to a JS obj so it can apply a merge to it


actually, I take that back. the example doesn't show any merging at all


I expect it will behave the same as useState then - it treats the state obj as a black box