Fork me on GitHub
#reagent
<
2019-09-17
>
tatut11:09:30

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?

pcj15:09:09

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
tatut05:09:26

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

tatut05:09:33

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

tatut05:09:02

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

tatut07:09:16

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

tatut07:09:31

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

pcj13:09:08

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.

jplaza14:09:01

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

pcj15:09:54

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 

Lone Ranger14:09:09

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

pcj12:09:34

just tried with:

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

lilactown15:09:16

I would open up a bug report

lilactown15:09:34

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

lilactown15:09:49

@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. 😄

pcj16:09:52

@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