onFocus bubble in React : <p>jsfiddle : <a href="https://jsfiddle.net/leiming/5e6rtgwd/" rel="noreferrer">https://jsfiddle.net/leiming/5e6rtgwd/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>class Sample extends React.Component {

  onInputFocus(event) {
    console.log('react input focus')
  }

  onSpanFocus(event) {
    console.log('react span focus')
      // event.stopPropagation()
  }

  render() {
    return ( &lt;span onFocus = {this.onSpanFocus}&gt;
      react input: &lt;input type="text"
      onFocus = {this.onInputFocus} /&gt;
      &lt;/span&gt; )
  }
}

ReactDOM.render( &lt; Sample / &gt; ,
  document.getElementById('container')
);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;!-- This element's contents will be replaced with your component. --&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;span onfocus="(function(){console.log('normal span')})()"&gt;
  normal input:&lt;input type="text" onfocus="(function(){console.log('normal input focus')})()"&gt;
&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>jsfiddle : <a href="https://jsfiddle.net/leiming/5e6rtgwd/" rel="noreferrer">https://jsfiddle.net/leiming/5e6rtgwd/</a></p>

<p>Using React, <code>onFocus</code> in <code>&lt;input/&gt;</code> will bubble which is not same as usual HTML5.</p>

<p>Could anyone give me the refer doc why focus bubbles with React?</p>
