Redux form - cursor jumping to the end of the input field

Question

I have a following class

export default class TestInput extends Component {

    state = {
         modified: false
    };

    change = e => {
         this.setState({ modified: true });
         this.props.input.onChange(e.target.value);
    };

     render() {
        return (
            <input type="text" value={this.props.input.value} onChange={this.change} className={!this.state.modified && this.props.meta.pristine ? 'default' : 'modified'} />
        );
    }
}

that I'm using like this

<Field component={TestInput} name="testProp" />

Whenever I place a cursor in the middle of the text in the field and write a letter, the letter appears at the right place but the cursor jumps to the end of the field. This is caused by the line this.setState({ modified: true }); and subsequent class change. If I comment out this line, this is not happening. I don't understand it. What am I doing wrong? Can I do something about it?

Answer 1

I am encountering this issue right now.

Here is how I am solving it. Most modern browsers including ie11 support a property on input dom nodes called selectionStart, this property indicates where cursor position is, (note it is not 0 indexed, but begins at 1). The sibling setter property is setSelectionRange(begin, end). If you can capture the actual node's cursor position when its change event is fired, you can set the node's cursor position after the component has rendered, and the input thinks it has received new text input moving its cursor to the end of the new input.

Disclaimer: YOU WILL HAVE TO USE REACT REFS

Depending on your stack, the code might look like this.

class MyForm extends React.Component {
   constructor(props) {
      super(props)
      this.state = { selectionStart }
      this.inputElRef = React.createRef();
      this.preserveCursor = this.preserveCursor.bind(this)
      this.setCursor = this.setCursor.bind(this)
      this.handleOnChange = this.handleOnChange.bind(this)
   }
   preserveCursor() {
      this.setState({ selectionStart: this.inputElRef.current.selectionStart })
   }
   setCursor() {
      this.inputElRef.current.setSelectionRange(
         this.state.selectionStart,
         this.state.selectionStart,
      )
   }
   handleOnChange() {
      this.preserveCursor()
   }
   componentDidUpdate() {
      this.setCursor()
   }
   render() {
     const { ...props } = this.props;
     <div>
       <form>
          <input ref={this.inputElRef} { ...props } onChange={this.handleOnChange} name="foo" />
      </form>

   }
}
export default connect()(reduxForm({ name: 'MyForm' })(MyForm)

Note: If you use something like react-toolbox instead of a raw dom input you will need to pass innerRef instead of ref, and that value should be a bound function of the form (el) => { this.myProperty = el }, which will give you access to the ref even though react-toolbox does not have awareness of ref, the extend react component has awareness of innerRef...

Answer 2

If you are using a value from the redux store in the textfield and updating the value of the redux store onChange. The problem is observed from react-redux version 6.0.1 and higher. Change your react-redux version to 6.0.0 and the cursor jumping problem should be solved.

Answer 3

This happens on the onChange event, i.e, every time you try to change the value of the input your change() function gets fired, in which you have a this.setState({ modified: true }) as you might know that this.setState forces the component to rerender, and know this time since !this.state.modified will return false, so the class gets changed to modified, which means it is working just fine, the cursor jumping to the end might have something to do your modified class, other than that nothing's wrong.

You might need to look and rephrase your question, what is it that you want should happen?

Answer 4

Just change value to defaultValue. It will work perfectly.