Shoelace: Issue with React JSX and switches

[liskicious]

When using the library with react, the switches don't seem to work when you click them.

Interestingly enough they get rendered as

html <input type="checkbox" id="switch-2" value="on">
after react does it "magick"

and not as

html <input type="checkbox" class="switch" id="switch-2" checked>

Would assume this causes them to not work when you click them.

[claviska]

Hmm, can anyone else verify this? Might need to post more code (minimal case if possible).

[liskicious]

Hey, sorry for not providing testcase, but I just wanted to make a note here in case other had noticed. Here is a minimal testcase on codepen that seems to behave similar to what I saw: https://codepen.io/anon/pen/RZRWRK

I love the simplicity of this framework and hope to test it out more on a small project. Nice work!

[claviska]

No problem, thanks for that. It looks like the for attribute is being removed from the <label> which causes the input to trigger.

Not sure if there's a way around that without JS. Hopefully someone with more React experience can chime in.

[liskicious]

Aha good spotted. I wasn't aware that react required to use htmlFor instead of for. When I switched for= to htmlFor= it worked fine! Thanks!

https://stackoverflow.com/questions/29161330/react-js-ignores-labels-for-attribute