needsclick

[benjamingeorge]

button elements do not work on ios with this library. I added "needsclick" class to the button but it still doesn't work.

[JakeSidSmith]

React fastclick does not require you to add the needsclick class.

Can you give me some more info about your use case? Is this with submitting a form?

If you are using onSubmit on a form, you can add an onClick event to the button to handle this, and it will speed up your events, but just as a temporary solution. If this is the case, I'll take a look at automatically adding events to buttons within forms.

submitClicked: function (event) {
  event.preventDefault();
  this.handleSubmit();
},

// ...

<button onClick={this.submitClicked}>
  Submit
</button>

[munkyjunky]

I've got the same issue - button elements become unresponsive to clicks after adding react-fastclick.

submit: function(){ 
  alert('click!');
}

// ...

<button onClick={this.submit.bind(this)}> Submit </button>

Adding an onClick handler to the button element doesn't work, however changing this to an onTouchStart does fire the callback.

[JakeSidSmith]

@munkyjunky What version of React / ReactDOM are you using? And is this only a problem when it comes to forms? Do buttons work normally?

[munkyjunky]

Using React & React-DOM 0.14.6, and this is just a standard button on a page, no forms at all. My test device is an iPhone 5S running iOS 9.0.

[munkyjunky]

Using the below ES6 class I get the same result, which nothing else on the page. Using react 0.14.6, react-dom 0.14.6, and react-fastclick 2.0.0

import React, { Component } from 'react';

class App extends Component {

    submit() {
        alert('click');
    }

    render() {
        return (<div>
            <h1>Hello world</h1>
            <button onClick={this.submit}>Submit</button>
        </div>)
    }

}

export default App;

Updated: Just noticed that if I click around the edge of the button the click works, however if I click on the text inside the button it doesn't work

[JakeSidSmith]

That's incredibly weird. I'll take a look as soon as I get a chance. :)

[munkyjunky]

This also looks to be happening in MS Edge on mobile.

So far I've found that in the noTouchHappened function the clicks around the edge of the button report touchEvents.touched = false (which makes the click handler work), while the clicks on the text report touchEvents.touched = true (which makes it not work).

This looks to be stopping the callback from firing.

[munkyjunky]

Looks like this is being caused by the onTouchStart event firing before the click handler when clicking on the button text - this is setting touchEvents.touched to be true, which then prevents the onClick handler from firing in noTouchHappened.

[hrjason]

having the same problem as well.

[JakeSidSmith]

@jasonjchang @munkyjunky @benjamingeorge Can any of you take a look at this fix please?

https://github.com/JakeSidSmith/react-fastclick/pull/20

Once it's reviewed I'll release a new version. :)

[JakeSidSmith]

P.s. Would be good if you could check out the branch & test it on your projects also. :)

[munkyjunky]

After an update to 2.0.1 buttons are now working as expected on iOS. We're still seeing the same behavior when clicking on label elements surrounding radio buttons, but we're just refactoring out those to use buttons instead. Might be worth looking into if you have the time however!

[JakeSidSmith]

@munkyjunky Could you open a new issue and give some details of the problem please? :)

[munkyjunky]

Raised at #22