React controlled input cursor jumps

Question

I am using React and have formatted a controlled input field, which works fine when I write some numbers and click outside the input field. However, when I want to edit the input, the cursor jumps to the front of the value in the input field. This only occur in IE, and not in e.g. Chrome. I've seen that for some programmers the cursor jumps to the back of the value. So I think the reason that my cursor is jumping to the front is because the value is aligned to the right instead of to the left in the input field. Here is a senario:

My first input is 1000 Then I want to edit it to 10003, but the result is 31000

Is there a way to controll that the cursor should not jump?

Answer 1

Taking a guess by your question, your code most likely looks similar to this:

    <input
        autoFocus="autofocus"
        type="text"
        value={this.state.value}
        onChange={(e) => this.setState({value: e.target.value})}
    />

This may vary in behaviour if your event is handled with onBlur but essentially its the same issue. The behaviour here, which many have stated as a React "bug", is actually expected behaviour.

Your input control's value is not an initial value of the control when its loaded, but rather an underlying value bound to this.state. And when the state changes the control is re-rendered by React.

Essentially this means that the control is recreated by React and populated by the state's value. The problem is that it has no way of knowing what the cursor position was before it was recreated.

One way of solving this which I found to work is remembering the cursor position before it was re-rendered as follows:

    <input
        autoFocus="autofocus"
        type="text"
        value={this.state.value}
        onChange={(e) => {
            this.cursor = e.target.selectionStart;
            this.setState({value: e.target.value});
        }}
        onFocus={(e) => {
            e.target.selectionStart = this.cursor;
        }}
    />

Answer 2

Here's a drop-in replacement for the <input/> tag. It's a simple functional component that uses hooks to preserve and restore the cursor position:

import React, { useEffect, useRef, useState } from 'react';

const ControlledInput = (props) => {
   const { value, onChange, ...rest } = props;
   const [cursor, setCursor] = useState(null);
   const ref = useRef(null);

   useEffect(() => {
      const input = ref.current;
      if (input) input.setSelectionRange(cursor, cursor);
   }, [ref, cursor, value]);

   const handleChange = (e) => {
      setCursor(e.target.selectionStart);
      onChange && onChange(e);
   };

   return <input ref={ref} value={value} onChange={handleChange} {...rest} />;
};

export default ControlledInput;