How does blur event gets fired when tabbing between siblings

Question

I am having a div which contains an input element and span element as children. The input and span are siblings(having common parent div). So i am having a blur event on div and i am having tabindex 0 on span element. So when my focus is on input element and when i tab the focus shifts to span but the blur event is fired. Is this event firing expected when tabbing between sliblings?

React Code:

<div className="box-v2"
          tabIndex={-1}
          onBlur={this._onBlur}>
           <input ref="inputBox"
            className="input-box"
            spellCheck={false}
            value={this.state.text}
            onChange={this._onChange} />

            <span className="icon"
                       tabIndex={0}/>
</div>

Simon Simon · Accepted Answer · 2017-07-05T19:21:31

In the world of React JS, we can assume that it indeed is expected. If it makes sense, is another story.

Reason:

Native focus and native blur events don't bubble. Corresponding React event handlers onFocus and onBlur do bubble - dun dun dun.

(Source: https://github.com/facebook/react/issues/6410#issuecomment-207064994)

I created a WebpackBin where you can test and compare the behaviour: https://www.webpackbin.com/bins/-KoJBHpK9s_OA76FnLkv

Open your browser's dev console, webpackbin cannot show the console.log of the iframe, I wanted to show both examples "side by side".

As you can see, the React behaviour is the one you described. You focus the input field and if you tab to the sibling span, it will fire the onBlur event.

But in the native code, this is not what happens. If you focus the input there and then tab, nothing happens (except moving the focus to the sibling span, of course.

If you focus the div and then leave the focus again, then it will fire the onBlur event too.

How does blur event gets fired when tabbing between siblings

1 Answers