title: How to implement onBlur/onFocus for a div with nested input fields?
body: <p>There is a <code>&lt;div&gt;</code> and a couple of nested <code>&lt;input&gt;</code>s. <code>onBlur</code> fires every time user clicks on one of the <code>&lt;input&gt;</code>s.<br>
  This is a bit frustrating that <code>onBlur</code> happens when I hit something inside the <code>div</code>. After an hour of searching I still wasn't able to find any good solution.<br>
  This sample of code shows what I'm talking about:</p>
  
  <pre><code>class Thing extends React.Component {
    handleBlur(e) {
      console.log('blur');
    }
    handleFocus(e) {
      console.log('focus');
    }
    render() {
      return (
        &lt;div onFocus={this.handleFocus} onBlur={this.handleBlur} tabIndex="1"&gt;
          &lt;div&gt;
            &lt;input type="text" value="Hello," /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;input type="text" value="Thing" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>You may play around with the code <a href="https://codesandbox.io/s/qxrwGAm3D" rel="nofollow noreferrer">over here</a>.<br>
  However my ultimate goal is to make <a href="https://codesandbox.io/s/zz8P67Dy" rel="nofollow noreferrer">this thing</a> working properly.</p>