Fork me on GitHub

I’m using material UI via adapt-react-class, and I have trouble getting :on-change handlers to fire (in non-input elements like Tabs)… does adapt do something special?


Do you have an example of it not working? We are using material ui in our appliance and I haven't experienced problems with event handlers not firing.

👍 4

[Tabs {:on-change #(.log js/console "never called") :value 0} 
  [Tab {:label "first"}] 
  [Tab {:label "second"}]]


the on-change (or onChange spelling doesn’t matter) is simply never called… on-change in textfield inputs works fine


same goes for non-native Select (doesn’t fire on-change events)


ok, our wrapper had an extra layer of components there, which caused mui to not be able to pass the on-change to children


changing [Tab ...] to (Tab ...) works


I've struggled with some issues regarding wrapping material-ui components with my own components (last time i tried was with RadioGroup). I tend to not do this unless it is absolutely necessary because of the way that material-ui handles child state derived from parent state. I think in your situation though, if you didn't want to do the function call, you can pass an :on-click to each Tab.

[Tabs {:value @tab-value}
  [Tab {:label "first" :on-click handler}]
Luckily, material-ui is really good and provides a lot of the base components that can easily be turned into your own Tab component.


I’ve successfully used adapt-react-class and :> with no trouble at all. Not with material UI but with several other components.


So I have

[:input {:type "email"
             :value @email
             :on-change ($evt [::email])}]
which moves the cursor to the end of the input whenever the :type is set to "email". It works without the type and if type is "password". I checked firefox and it seems to work properly on firefox but not chrome. Is there a workaround for this or do I have to omit the :type and just do email validation with my own regex? Here's my chrome version
$ google-chrome --version
Google Chrome 76.0.3809.132 


I don't know if you've solved this or not yet but what are you using a key for that element?


just tried with:

[:input {:key "testemail"
                :type "email"
                :value ($sub [::test])
                :on-change ($evt [::test])}]
and it didn't work 😞


I would open up a bug report


sounds like the hack to use inputs with async rendering isn’t working with e-mail input in Chrome


@pcj a simple work around might be to not have it controlled - instead of :value use :default-value. There’s the possibility of state becoming out of sync this way in certain edge cases, but at least you won’t have to write e-mail validation regexes, mobile will get the right keyboard, etc. 😄


@lilactown @jahson thanks for the responses! I was about to write my own cursor position code 😰 I guess if I want that default functionality I'll just have to use uncontrolled components