mzabriskie/react-tabs — pull request #7 by bjohn465 (2014-11-05 17:58:27+00:00)
Title: Remove focus on tab blur

Given a component like this:
```js
var MyComponent = React.createClass({
getInitialState: function() {
return {
val: ""
};
},

handleChange: function(e) {
this.setState({
val: e.target.value
});
},

render: function() {
return (

First
Second

This is the first panel

Hooray! You found the second panel!

);
}
});
```

Once the user uses the keyboard to change the selected tab, the `focus` state will always be true. This means that if the user focuses on the tabs, changes the current tab via an arrow key on the keyboard, then returns focus to the input field, any key press in the input field will return focus to the currently selected tab.

It happens because, when the component is re-rendered, the `focus` state of `Tabs` is still `true`, despite the focus not being on any of the tabs, so the currently shown tab focuses on itself.

This change sets the `focus` state to `false` when a tab loses focus. One downside is that it seems to always flip `focus` back to `false`, even when selecting different tabs with the keyboard (since one tab is losing focus and another is gaining it). However, `focus` is `true` long enough that the newly selected tab will receive focus before the `focus` state is set back to `false`. Without this change (or some other change that fixes the focus stealing problem), any time the parent component re-renders after a tab is selected using the keyboard, the focus is stolen by the selected tab, making for a very poor user experience.