title: React Input with disabled
body: <p>I have an input with the disabled boolean propagated from the props.  I've found that with that disabled variable being set, even when it's true I cannot type into the input.  I can, however, type into the input if I hold the mouse down on it and keep it down as I type.</p>
  
  <p>This happens when I render the component as both controlled and uncontrolled.</p>
  
  <p>The only way to fix it is to either removing <code>disabled</code> or setting <code>disabled={false}</code> -- but I need it to be variabled.</p>
  
  <p>This is my input:</p>
  
  <pre><code>  class DashboardWidgetTitle extends React.Component {
  
      constructor(props) {
        super(props);
        this.state = {};
        this.state.title = props.widget.getTitle();
      }
  
      render () {
        return &lt;input className="title"
                      value={this.state.title}
                      disabled={!this.props.isEditMode}
                      onChange={this._onInputChange.bind(this)}/&gt;
      }
  
      _onInputChange(e) {
        logit("input change");
        this.setState({title: e.target.value});
      }
  
    }
  </code></pre>
  
  <p>Thanks!</p>
  
  <p>EDIT: Extra info --</p>
  
  <ul>
  <li>This is used in a widget within an implementation of <a href="https://github.com/STRML/react-grid-layout" rel="nofollow noreferrer">ReactGridLayout</a>.</li>
  <li>The component is rendered by a widget that is rendered by the implementation of react grid layout, the "dashboard".  That Dashboard has <code>isEditMode</code> as a state that's changed externally via a toggle in Angular (we use React within Angular).</li>
  <li>If I switch tabs and come back, the focus remains.  Otherwise whenever I type a letter, the input becomes unfocused.</li>
  <li>The input isn't disabled when it shouldn't be, it just has focusing issues -- however removing the <code>disabled</code> attribute or setting it as a static variable, the issue doesn't remain.</li>
  <li>When I switch the disabled toggle to be <code>isEditMode</code> rather than <code>!isEditMode</code>, everything works.  It seems to be there's an onclick on the draggable/resizable portion of the ReactGridLayout that's causing some issues.  </li>
  </ul>