Button Click with Mouse initiates a onclick, but the State (both Visual and Value) does not change about css-toggle-switch

[ghinda]

The problem is that if you select the label text and then release the mouse button, the radio button is not getting selected.

I think it's caused by the actual text selection, because if I disable it with css, it seems to work:
http://jsbin.com/duwono/edit?html,css,output

Could you try out the demo above and let me know if it works better for you?

I would like to avoid adding a JavaScript dependency, and disabling text selection could be an accessibility issue, so I would still like to find a better way.

[danielHalan]

Yes, the css trick is keeping the state right... works good as an initial workaround at least, but yes it can be an issue with accessibility...

One road to explore is onclick/checkstate life-cycle, try to fire event after the state has changed, or an event with the new state as param

[ghinda]

I'm going to close this for now, since I couldn't find a different CSS work-around, and don't want to introduce accessibility issues because of disabling text selection.

If more people report this, I'll probably add user-select: none by default.

In the meanwhile, you can use:

.switch-light,
.switch-toggle label {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

[ghinda]

I'm working on a fix for this on the material branch, so I'm re-opening it.

[danielHalan]

Great

[ghinda]

Released 4.0.0. Text selection is disabled on the switch-light "on/off" text now, so swiping the switch-light widget will work.

switch-toggle still needs the code above, because I didn't want to disble text selection on it.