[SOLVED] Safari (desktop+IOS) and React -- onClick needs multiple clicks

help
1

Hello,

In some cases, in recent versions of Safari (Desktop+IOS), you need to click multiple times for the onClick event to trigger.

Try adding the following lines in App.js of the react tutorial (https://www.meteor.com/tutorials/react/creating-an-app):

<div style={{cursor:"pointer"}} onClick={() => this.setState({clicked: "TEST1"})}>
   Hello-TEST1-World
</div>

<div style={{cursor:"pointer"}} onClick={() => this.setState({clicked: "TEST2"})}>
   {"Hello-TEST2-World"}
</div>

<div style={{cursor:"pointer"}} onClick={() => this.setState({clicked: "TEST3"})}>
   Hello-{"TEST3"}-World
</div>

{ this.state ?
   <div>
      Clicked = {this.state.clicked}
   </div>
   :
   null
}

I don’t understand why but in the third case (TEST3), on a freshly loaded app, it will take two clicks to trigger the onClick event !!

Anybody understands what is happening?

Jf.

p.s. in Chrome, everything shows up after a single click

Edit: the issue also happens on IOS

2

For fun, I created a codepen related to this React issue. If you load it in Safari, you’ll need to click twice on the third line for it to work.

Jf.

3

The latest Apple Safari update fixes the issue. For instance, it is fixed in IOS 11.3

Jf.