title: onBlur attached to div getting called while moving from one input element to other present in the same div
body: <p>So I have a div and inside that div I have two input fields, like:</p>
  <pre><code> &lt;div&gt;
      &lt;input placeholder=&quot;Input1&quot;/&gt;
      &lt;input placeholder=&quot;Input2&quot;/&gt;
   &lt;/div&gt;
  </code></pre>
  <p>I wanted to call certain function whenever user clicks away from that div (not input fields).</p>
  <p>So I attached onBlur event for that particular div, by giving it a tabIndex.</p>
  <pre><code>&lt;div tabIndex=&quot;1&quot; onClick={handleClick} onBlur={handleOnBlur}&gt;
  </code></pre>
  <p>But now the onBlur event is getting triggered whenever I move from one input field to another input field residing in the same div.</p>
  <p>I couldn't understand why this is happening. Also is there any better approach to achieve this sort of functionality.</p>
  <p><strong>Codesandbox link to play-around</strong>:
  <a href="https://codesandbox.io/s/tender-carson-9rkj13" rel="nofollow noreferrer">https://codesandbox.io/s/tender-carson-9rkj13</a></p>