React and blur event
<p>I have a simple issue with React and event handling. My component looks like this (basically a table):</p>

<pre class="lang-jsx prettyprint-override"><code>const MyList = ({ items, onBlur }) =&gt;
&lt;table onBlur={onBlur}}&gt;
    &lt;thead&gt;
    &lt;tr&gt;
        &lt;th&gt;ID&lt;/th&gt;
        &lt;th&gt;Title&lt;/th&gt;
        &lt;th&gt;Publisher&lt;/th&gt;
        &lt;th&gt;Year&lt;/th&gt;
        &lt;th&gt;Author&lt;/th&gt;
        &lt;th&gt;System&lt;/th&gt;
        &lt;th/&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    {items.map(item =&gt; &lt;MyListRow key={item.Id} item={item}/&gt;)}
    &lt;/tbody&gt;
&lt;/table&gt;;
</code></pre>

<p>I want the <code>blur</code> event to fire <strong>only if the focus goes out of the table</strong>. Instead the <strong>event fires on each child element of the table</strong> when it loses focus.</p>

<p>According to the docs React lets focus events bubble up.</p>

<p>The question is: How can I get my <code>onBlur</code> method fire only when the focus gets out of the table? IOW: How can I filter out and discard the unwanted events bubbling up so that I reveal only the events which indicate a lost of focus for the table?</p>