I'm trying to implement a textarea which automatcally inserts close parens in React, but whenever I modify the textarea's value property, the cursor jumps to the end of the text being edited.

Here's my onChange function:

    //on change
    function(event) {

        var newText =  event.target.value

        var cursorPosition = getCursorPosition(event.target)
        if(lastCharacterWasParen(newText, cursorPosition)){
            newText = newText.slice(0, cursorPosition) + ')' + newText.slice(cursorPosition)
        }

        this.setProps({text: newText}})

    }

This successfully inserts the paren, but how do I preserve the cursor position?

I'm trying to implement a textarea which automatcally inserts close parens in React, but whenever I modify the textarea's value property, the cursor jumps to the end of the text being edited.

Here's my onChange function:

    //on change
    function(event) {

        var newText =  event.target.value

        var cursorPosition = getCursorPosition(event.target)
        if(lastCharacterWasParen(newText, cursorPosition)){
            newText = newText.slice(0, cursorPosition) + ')' + newText.slice(cursorPosition)
        }

        this.setProps({text: newText}})

    }

This successfully inserts the paren, but how do I preserve the cursor position?

• javascript
• jquery
• reactjs

2 Answers 2

I am doing similar things before.

The way to change the cursor position is using: evt.target.selectionEnd

In your case, you can record down the selectionEnd before inserting, and after inserting, set the selectionEnd to the position it should be.

You can use selectionStart prop as described here to store and then reset cursor position

var cursorPosition = $('#myTextarea').prop("selectionStart");

Then use something like this to set cursor position