This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-09-17
Channels
- # announcements (2)
- # aws (7)
- # beginners (46)
- # cider (15)
- # clj-kondo (24)
- # cljs-dev (3)
- # clojure (46)
- # clojure-dev (34)
- # clojure-europe (7)
- # clojure-italy (7)
- # clojure-nl (10)
- # clojure-norway (15)
- # clojure-spec (5)
- # clojure-uk (42)
- # clojuredesign-podcast (1)
- # clojurescript (79)
- # clr (3)
- # core-async (1)
- # cursive (45)
- # data-science (1)
- # datomic (4)
- # fulcro (17)
- # funcool (14)
- # gorilla (2)
- # graphql (30)
- # jackdaw (5)
- # jobs-discuss (8)
- # joker (4)
- # lein-figwheel (1)
- # off-topic (48)
- # pedestal (26)
- # re-frame (36)
- # reagent (18)
- # reitit (6)
- # remote-jobs (4)
- # shadow-cljs (115)
- # tools-deps (62)
- # vim (12)
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.
[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
ok, our wrapper had an extra layer of components there, which caused mui to not be able to pass the on-change to children
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 😞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. 😄
You could also dig https://github.com/reagent-project/reagent/blob/2d0ec89ad7d23f5dbdb53331a0bcbc5933bd2d20/doc/ControlledInputs.md
and this https://github.com/reagent-project/reagent/commit/6319a968ac8ba21c041a863c9e13d9c700796ce5
@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