How to keep cursor position in a react input element

Question

The cursor keeps going to the end. How to keep the cursor position when editing from the the middle of the string?

Code that I am using is:

const rootElement = document.getElementById('root');

class MyFancyForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {myValue: ""};
    }

    handleCommaSeparatedChange = event => {
        const {value} = event.target;
        this.setState({myValue: value});
    };




    render() {
        return(
            <form >

                <div>
                    <label>
                        Cursor position looser
                        <br />
                        <input onChange={this.handleCommaSeparatedChange} value={this.state.myValue} />
                    </label>
                </div>


            </form>
        )
    }
}

const element = <MyFancyForm />;

ReactDOM.render(element, rootElement);

Any idea how could I achieve it?

I tried your exact code and I don't get this jumpy cursor behavior. What browser is this? — Chris
– Chris, Commented Feb 18, 2019 at 10:58
@Josep I actually do not see the problem at codesandbox.io/s/km35znxvx5 although i see it at the jsfiddle you posted. Could it be a bundler/version issue ? — Gabriele Petrioli
– Gabriele Petrioli, Commented Feb 18, 2019 at 11:46
@Vencovsky well it's not the browser, or the provided code, that means the only thing we are left with is versioning of the libraries. i think Gabriele Petrioli is on to something. — Timothy Groote
– Timothy Groote, Commented Feb 18, 2019 at 12:02
@redochka where were you running this code on? Your local environment or something like codepen or jsfiddle? — Chris
– Chris, Commented Feb 18, 2019 at 12:06

Waseem Raja Shaik · Accepted Answer · 2019-05-21 16:42:36Z

17

just change value into defaultValue - it worked both in codepen and codesandbox for me

class MyFancyForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {myValue: ""};
    }

    handleCommaSeparatedChange = event => {
        const {value} = event.target;
        this.setState({myValue: value});
    };




    render() {
        return(
            <form >

                <div>
                    <label>
                        Cursor position looser
                        <br />
                        <input onChange={this.handleCommaSeparatedChange} defaultValue={this.state.myValue} />
                    </label>
                </div>


            </form>
        )
    }
}


  ReactDOM.render(
    <MyFancyForm />,
    document.getElementById('root')
  );

answered May 21, 2019 at 16:42

Waseem Raja Shaik

3532 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Murtuza Over a year ago

Does not work when we are formatting the value by usint 'onChange' event.

Lewy Blue Over a year ago

This doesn't work if you change the value in any other way besides typing into the text box. The defaultValue sets the initial value but if you later change that value (besides typing) it doesn't get updated.

ius · Accepted Answer · 2021-12-30 10:17:26Z

4

I know it's an old post but this might help someone.

I found this snippet in one github issue and helped me to get around this problem.

onChange={(event) => {
  event.persist()
  const caretStart = event.target.selectionStart;
  const caretEnd = event.target.selectionEnd;
  // update the state and reset the caret
  this.updateState();
  event.target.setSelectionRange(caretStart, caretEnd);
}}

Quote from: https://github.com/facebook/react/issues/955#issuecomment-469344232

edited Dec 30, 2021 at 10:17

answered Dec 30, 2021 at 9:18

ius

1,6413 gold badges16 silver badges34 bronze badges

1 Comment

gimp3695 Over a year ago

The only problem is that setSelectionRange doesn't work on all input types. For example type=number or email.

Lewy Blue · Accepted Answer · 2022-07-07 12:12:44Z

4

I solved this by creating a TextInput component that wraps <input type="text"> and proxying the value in internal state.

function TextInput({ value, onChange }) {
    // Create a proxy value in internal state to prevent the caret from jumping to the end every time the value updates
    const [currentValue, setCurrentValue] = useState<string>(value);

    useEffect(() => {
        setCurrentValue(value);
    }, [value]);

    return (<input
                type="text"
                value={currentValue}
                onChange={(e) => {
                    setCurrentValue(e.target.value);

                    onChange(e.target.value);
                }}
            />);
}

Then I use it in a parent component like so. It works well so far.

<TextInput                  
    value={textValue}
    onChange={(e) => {
        setTextValue(e);
    }}
/>

answered Jul 7, 2022 at 12:12

Lewy Blue

6384 silver badges19 bronze badges

1 Comment

Nicolas Othmar Over a year ago

It would be nice if you could explain why this works!

Collectives™ on Stack Overflow

How to keep cursor position in a react input element

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related