Closed tedlin182 closed 8 years ago
I have some idea as to what it might be. Could you post a snippet from the radio buttons?
<input type='radio' onChange={this.doSomething} id='radio1'/>
<label for='radio1'>Label for radio1</label>
I ended up just triggering the handler onClick of the wrapping parent element and it worked.
Glad to hear. I'll have a look into this anyway to see if there's anything I can do about it. :)
Hey, @tedlin182, had a little play with checkboxes and radios. It seems that for="my-input"
does not work correctly in React anyway. Instead wrapping the element with a label should produce the desired result. I've tested this on desktop and Android & it works fine with react-fastclick. :)
Does not appear to work
<p>
<label for="radio">
For input
</label>
<input id="radio" type="radio" />
</p>
Works with react-fastclick (tested with Chrome & Android)
<p>
<label>
Wrap input
<input type="radio" />
</label>
</p>
After further testing it seems that you can use for="my-input"
but the React implementation is htmlFor="my-input"
.
The following works, but without an onClick
attribute it still has the 300 millisecond delay.
<p>
<label htmlFor="radio">
For input
</label>
<input id="radio" type="radio" />
</p>
We have a handler that is triggered when the
onChange
event is fired on a radio button and a label that is associated with the radio.Clicking on the label selects the radio fine on desktop and mobile, but unfortunately on mobile, the handler doesn't fire at all. When I remove FastClick, it works as expected.
Any thoughts on how to resolve this?