title: Change the cursor position in a textarea with React
body: <p>I have a textarea in React that I want to turn into a "notepad". Which means I want the "tab" key to indent instead of unfocus. I looked at <a href="https://stackoverflow.com/questions/6140632/how-to-handle-tab-in-textarea">this answer</a>, but I can't get it to work with React. Here is my code:</p>
  
  <pre><code>handleKeyDown(event) {
      if (event.keyCode === 9) { // tab was pressed
          event.preventDefault();
          var val = this.state.scriptString,
              start = event.target.selectionStart,
              end = event.target.selectionEnd;
  
          this.setState({"scriptString": val.substring(0, start) + '\t' + val.substring(end)});
          // This line doesn't work. The caret position is always at the end of the line
          this.refs.input.selectionStart = this.refs.input.selectionEnd = start + 1;
      }
  }
  onScriptChange(event) {
     this.setState({scriptString: event.target.value});
  }
  render() {
      return (
          &lt;textarea rows="30" cols="100" 
                    ref="input"
                    onKeyDown={this.handleKeyDown.bind(this)}
                    onChange={this.onScriptChange.bind(this)} 
                    value={this.state.scriptString}/&gt;
      )
  }
  </code></pre>
  
  <p>When I run this code, even if I press the "tab" key in the middle of the string, my cursor always appears at the end of the string instead. Anyone knows how to correctly set the cursor position?</p>