title: this.textInput.focus is not a function - React
body: <p>I have FormControl for password input with icon that toggles the mask, so u cant see the characters you are inputting. But whenever I toggle this mask I also want to re-focus the input field.</p>
  
  <pre><code>&lt;FormGroup
      className="input-text input-text--password"
      controlId={id}
      validationState={submitFailed &amp;&amp; touched &amp;&amp; error ? 'error' : validationState}
    &gt;
  
      &lt;FormControl
        {...input}
        disabled={disabled}
        className="input-text__input"
        autoFocus={autoFocus}
        type={maskEnabled ? 'password' : 'input'}
        onChange={this.handleFormControlChange}
        maxLength={maxLength}
        ref = { ref =&gt; this.textInput = ref }
      /&gt;
      &lt;div
          className={'input-text__button ' + (maskEnabled ? 'mask-enabled' : 'mask-disabled')}
          onClick={this.handleToggleInputMode}
      /&gt;
  </code></pre>
  
  <p>... I use this method to focus:</p>
  
  <pre><code>handleToggleInputMode() {
    let newMaskEnabled = !this.state.maskEnabled;
    this.setState({maskEnabled: newMaskEnabled});
    this.textInput.focus();
  }
  </code></pre>
  
  <p>But i keep getting error </p>
  
  <blockquote>
    <p>Uncaught TypeError: this.textInput.focus is not a function</p>
  </blockquote>
  
  <p>So i tried to put it in ComponentDidMount but then the whole componend stopped responding (didnt accept any char I typed in).
  What am i missing?</p>