Fork me on GitHub
#reagent
<
2018-12-17
>
achikin15:12:20

How can I pass an attribute to an html element like checked here <input type="radio" name="sb" id="sb-2" checked> ?

achikin15:12:13

I'm trying to create a reagent component from segmented-control here http://code.fstgerm.com/pure-css-segmented-controls/ and it requires checked to be set on an element.

gadfly36116:12:07

@achikin

[:input#sb-2
{:type "radio" :name "sb" :checked true}
]

achikin16:12:41

That doesn't work.

achikin16:12:30

I found out that it should be [:input {:checked "checked"}]

gadfly36116:12:36

@achikin was typing from my phone .. I am missing ending quotes on the strings

achikin16:12:06

@gadfly361 anyway :checked true does not work 🙂

gadfly36116:12:11

@achikin I am surprised it doesn't work as I have used that before successfully 🤷

achikin16:12:30

I found out that it should be [:input {:checked "checked"}]

gadfly36117:12:39

I tried uploading a screenshot but not sure if it landed (got a notice from slack saying not enough space). Anyways search for checkbox or boolean and you will find you exact example explained

achikin17:12:47

@gadfly361 it has landed, I can see it. Yes, do remember that guide. But in reagent 0.8.1 that does not work :man-shrugging:

achikin17:12:16

@ericnormand have you checked it recently? ☝️

achikin17:12:14

@gadfly361 my only guess is that it does not work for "radio" but works for "checkbox"

gadfly36117:12:29

@achikin It works, I just tried it with reagent 0.8.1 from a fresh template

ericnormand17:12:32

@achikin I have not checked that in a while

achikin17:12:12

@gadfly361 for me {:checked true} simply removes checked completely...

ericnormand17:12:26

what browser?

achikin17:12:51

@ericnormand chromium Version 66.0.3328.0 (Developer Build) (64-bit)

gadfly36117:12:29

@achikin Can you try from a fresh template lein new reagent-frontend mytest?

gadfly36117:12:18

My guess is something else is mucking it up if you are using chromium (perhaps a lein clean is needed or a hard page refresh)

ericnormand17:12:19

trying it now ...

ericnormand17:12:36

seems to work for me

ericnormand17:12:48

@achikin do you mind sharing a small gist?

ericnormand17:12:06

(defn home-page []
  [:div
   [:h2 "Welcome to Reagent"]
   [:input {:type "radio" :checked true}]])

ericnormand17:12:11

this is in Chrome

ericnormand17:12:42

I also think this behavior is directly from React

ericnormand17:12:54

it's not a reagent or hiccup thing

achikin17:12:17

@ericnormand have you checked the page source?

achikin17:12:05

For me it renders checked, but does not add checked attribute.

ericnormand17:12:26

yes, it renders checked but does not have the attribute

achikin17:12:43

Moreover, {:checked "checked"} also does not add checked in a test example (but works on my actual app)

ericnormand17:12:49

mine doesn't show checked in the inspector

ericnormand17:12:58

but the css still picks up the :checked attribute

gadfly36117:12:44

@achikin Your true and checked versions appear to provide the same result at least

ericnormand17:12:49

it may just be an inpector thing

🤷 4
ericnormand17:12:09

does the styling work, @achikin?

ericnormand17:12:08

and when I look at the page you linked with the components, the inspector shows the same thing

ericnormand17:12:15

checked does not change as you click on elements

achikin17:12:15

@ericnormand @gadfly361 the only difference I can spot between my real app and an example is that example uses reagent-provided react 16.3 and I'm using react 16.4 from npm

ericnormand17:12:16

so in your code :checked true still does not work, but :checked "checked" does?

achikin17:12:57

They say that you should not rely on checked being rendered as an attribute...

ericnormand17:12:30

so it's all the way down to react

achikin17:12:35

But it seems that http://code.fstgerm.com/pure-css-segmented-controls/ relies on it's presence and has some css selectors, that query for checked attr

gadfly36117:12:12

Ahh gotcha, this all makes more sense now

ericnormand17:12:44

that makes sense

ericnormand17:12:58

so instead of true/false, you can use nil/"checked"

achikin17:12:22

@ericnormand probably on some versions of React 😞

😂 4
ericnormand17:12:52

or you could switch the [checked] selectors to :checked selectors (??)

achikin17:12:32

@ericnormand as soon as I copied the whole css into my resources - that'd be the best option, thank you!

ericnormand17:12:50

you're welcome 👍

ericnormand17:12:07

thanks for bringing this issue to my attention

👍 8
Whiskas19:12:03

I am exploring a reactjs template that imports images using the ES6 syntax ( e.g : import logo from "../assets/img/logo.png", and after compiling the JSX into JS and importing it with shadow-cljs, the image is not being rendered. Has someone here had this experience before?

lilactown19:12:05

@mateus.pimentel.w this is dependent on how you compiled the JSX into JS

lilactown19:12:25

importing images is not standard JS, it’s implemented in a JS build tool like webpack

lilactown19:12:41

are you using webpack to build the JSX into a bundle?

Whiskas19:12:26

ooh, i just figured out that it may be this the case

Whiskas19:12:42

i’m not using webpack tho

Whiskas19:12:02

i will ask if it is possible to integrate webpack with shadow-cljs and still get optimized compilation

lilactown19:12:30

you should. you might have to tweak webpack’s output a bit

lilactown19:12:44

webpack is pretty complicated

Whiskas20:12:30

i’m surprised that not many people seems to use JSX with cljs. I mean, there are some people, but i tought that almost everybody would do it

thheller21:12:00

@mateus.pimentel.w how or why would anyone want to use JSX? the syntax is downright horrific.

💯 8
8
mikerod23:12:48

Yeah. Why would someone want to bring xml style into anything.

thheller21:12:10

as for images via import that is not supported in shadow-cljs

lilactown21:12:50

I’ve thought about on a number of occasions of getting drunk and writing a CLJSX macro

lilactown21:12:07

if only to aid in copy + paste examples