title: Why does a React component's onClick event handler not fire when the "display" attribute of a sibling node is changed?
body: <p>We ran into an issue, not sure what we're doing wrong. We've recreated <a href="https://jsfiddle.net/pyraz/y485c6oy/" rel="nofollow">here</a></p>
  
  <p><strong>The Issue</strong></p>
  
  <p>We have 3 components, a parent Form component, which has 2 children, an Input and a Button. The Button has both <code>onMouseDown</code> and <code>onClick</code> handlers registered. The Input has an <code>onBlur</code> handler registered. If you focus the Input, then click the button, the Button's <code>onMouseDown</code> will fire, followed by the Input's <code>onBlur</code>. The <code>onBlur</code> triggers a re-rendering of the parent Form component, to update it's CSS class. This new class, of <code>error</code>, causes a <code>div</code> that is a sibling of of the Input and the Button to become visible, per the CSS rules in the <a href="https://jsfiddle.net/pyraz/y485c6oy/" rel="nofollow">jsFiddle</a>. It appears that the changing of this CSS rule is what causes the Button's <code>onClick</code> handler to never fire. If you try clicking the Button again, it works as expected.</p>
  
  <p>Anyone have any ideas what might be going on here?</p>
  
  <p>Here's the JS code:</p>
  
  <pre><code>    var state = {
      messages: []
  }
  
  var MessageCenter = React.createClass({
      messages: function () {
          return this.props.messages.map(function (message, i) {
              return &lt;div key={i}&gt; {message}&lt;/div&gt;
          })
      },
  
      render: function () {
          return &lt;div&gt;
              &lt;h3&gt;Events&lt;/h3&gt;
              &lt;div&gt;{this.messages()}&lt;/div&gt;
          &lt;/div&gt;
      }
  })
  
  ReactDOM.render(
      &lt;MessageCenter messages={[]}/&gt;,
      document.getElementById('messageCenter')
  )
  
  function printMessage(message) {
      state.messages.push(message)
      ReactDOM.render(
          &lt;MessageCenter messages={ state.messages }/&gt;,
          document.getElementById('messageCenter')
      )
  }
  
  var Button = React.createClass({
      handleClick: function (event) {
          this.props.handleClick(event)
      },
  
      handleMouseDown: function (event) {
          printMessage('Button Mouse Down handled')
      },
  
      render: function () {
          printMessage('Button Rendered')
          return &lt;div&gt;
              &lt;button onClick={ this.handleClick } onMouseDown={ this.handleMouseDown }&gt; Click Me&lt;/button&gt;
          &lt;/div&gt;
      }
  })
  
  function updateForm(className, errorMessage) {
      ReactDOM.render(
              React.createElement(Form, {
                  className: className,
                  errorMessage: errorMessage
              }),
              document.getElementById('container')
      )
  }
  
  var Form = React.createClass({
      getInitialState: function () {
          return {
              showButton: false
          }
      },
  
      classNames: function () {
          return this.props.className
      },
  
      handleButtonClicked: function (event) {
          printMessage('Button Click handled')
          updateForm('success', '')
      },
  
      handleBlur: function (event) {
          printMessage('Input Blurred')
          updateForm('error', 'Why did the buttons onClick handler not ever run?')
      },
  
      showChild: function (event) {
          this.setState({
              showButton: true
          })
      },
  
      button: function () {
          if (this.state.showButton) {
              return &lt;Button className="" handleClick={ this.handleButtonClicked }/&gt;
          }
      },
  
      render: function () {
          printMessage('Parent Rendered')
          return &lt;div&gt;
              &lt;div className={ this.classNames() }&gt;
                  &lt;input onBlur={ this.handleBlur } onFocus={ this.showChild }/&gt;
                  &lt;div className="error-message"&gt; { this.props.errorMessage } &lt;/div&gt;
                  { this.button() } &lt;/div&gt;
          &lt;/div&gt;
      }
  })
  
  ReactDOM.render(
      &lt;Form className="" errorMessage=""/&gt;,
      document.getElementById('container')
  )
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>body {
    font-family: sans-serif;
  }
  
  #instructions,
  #content {
    width: 50%;
    float: left;
  }
  
  #messageCenter,
  #container {
    margin-top: 10px;
    width: 100%;
  }
  
  #messageCenter div,
  #container div {
    padding: 5px 0px;
    width: 300px;
    margin: 0 auto;
  }
  
  .error {
    border: solid 1px red;
  }
  
  .success {
    border: solid 1px green;
  }
  
  div.error-message {
    display: none;
  }
  
  .error div.error-message {
    display: block;
  }
  </code></pre>