Mobile Safari - clicking label associated with radio button not firing onChange event

[tedlin182]

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?

[JakeSidSmith]

I have some idea as to what it might be. Could you post a snippet from the radio buttons?

[tedlin182]

<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.

[JakeSidSmith]

Glad to hear. I'll have a look into this anyway to see if there's anything I can do about it. :)

[JakeSidSmith]

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>

[JakeSidSmith]

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>