title: React.js - input losing focus when rerendering
body: <p>I am just writing to text input and in <code>onChange</code> event I call <code>setState</code>, so React re-renders my UI. The problem is that the text input always loses focus, so I need to focus it again for each letter :D.</p>
  <pre><code>var EditorContainer = React.createClass({
  
      componentDidMount: function () {
          $(this.getDOMNode()).slimScroll({height: this.props.height, distance: '4px', size: '8px'});
      },
  
      componentDidUpdate: function () {
          console.log(&quot;zde&quot;);
          $(this.getDOMNode()).slimScroll({destroy: true}).slimScroll({height: 'auto', distance: '4px', size: '8px'});
      },
  
      changeSelectedComponentName: function (e) {
          //this.props.editor.selectedComponent.name = $(e.target).val();
          this.props.editor.forceUpdate();
      },
  
      render: function () {
  
          var style = {
              height: this.props.height + 'px'
          };
          return (
              &lt;div className=&quot;container&quot; style={style}&gt;
                  &lt;div className=&quot;row&quot;&gt;
                      &lt;div className=&quot;col-xs-6&quot;&gt;
                      {this.props.selected ? &lt;h3&gt;{this.props.selected.name}&lt;/h3&gt; : ''}
                      {this.props.selected ? &lt;input type=&quot;text&quot; value={this.props.selected.name} onChange={this.changeSelectedComponentName} /&gt; : ''}
                      &lt;/div&gt;
                      &lt;div className=&quot;col-xs-6&quot;&gt;
                          &lt;ComponentTree editor={this.props.editor} components={this.props.components}/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  
  });
  </code></pre>