title: React onClick not firing on first click, second click behaves as expected (simple debug message doesn't appear until second click)
body: <p>I introduced a bug at some point (live version doesn't have this issue) but haven't been able to figure out what caused it.</p>
  
  <p>I have a button in React (it's just a <code>div</code> with an <code>onClick</code>).</p>
  
  <p>The button has an <code>onClick</code> and a <code>:hover</code> CSS effect.</p>
  
  <p>The button is loaded by clicking on another <code>div</code> (which works on the first click).</p>
  
  <p>After loading the button (and its wrapper content), the button doesn't do anything on the first click. Without doing anything else, clicking again let's it work fine.</p>
  
  <p>Currently I have a debug message in my <code>onClick</code>, so it looks something like this</p>
  
  <pre><code>                    onClick={(e) =&gt; {
                          console.log("ONclicked! " + this.props.alt);
                          // e.stopPropagation();
                          // various callbacks
                      }}&gt;
  </code></pre>
  
  <p>I also have similar <code>console.log</code> debug messages on all of the button's parents, <em>all the way up to the root React element</em> (i.e. clicking anywhere on the page shoots out a message, except when clicking on this particular button the first time). Even the root element does not register anything on the first click..</p>
  
  <p>None of these messages appear on the first click.</p>
  
  <p>Again, <em>without doing anything else</em>, just clicking one more time in the same spot fires the <code>onClick</code> as expected.</p>
  
  <p>Other questions about "first click not working" I've seen are all about the state not updating on the first click. In my case I'm not even trying to update the state, I don't seem to be getting the <code>onClick</code> called at all.</p>
  
  <p>I've looked through all the commits for this version and still haven't been able to figure out the problem. Any ideas on what can cause this behavior? The weirdest part to me is that the second click works, while the first doesn't seem to do anything. But nothing about the state/DOM is changing between the first and second click (since the first click doesn't seem to be registered at all). I think this rules out things like a misconfigured <code>pointer-events</code> CSS rule?</p>
  
  <p>Edit: </p>
  
  <p>Upon further exploration, it seems that the first click actually triggers <code>onMouseEnter</code>, which seems totally nuts lol... But I added a <code>console.log</code> to <code>onMouseEnter</code> and it's definitely triggering exactly when I make the first click, and NOT on subsequent clicks.</p>
  
  <p>Edit 2:</p>
  
  <p>But this mouseEnter thing only happens in Firefox, not Chrome. But the first click not working bug is in both browsers.</p>
  
  <p>Edit 3:</p>
  
  <p><code>onMouseDown</code> is firing properly, but <code>onClick</code> still only happens on the second time the button is clicked (at which point <code>onMouseDown</code> has fired twice).</p>
  
  <p>Also, double checked and confirmed that I don't use <code>stopPropagation</code> anywhere which seems to be a common source of this problem.</p>