[TextField] Cursor jumps to the end when async update

[strblr]

Description

Here is my case : I have a TextField that updates with the user input only after server validation. So onChange makes a socket request to the server, and the server sends the validated typed value back. Only then, the TextField is updated with the validated value. Performance is not the issue : this is almost as fast as typing in a TextField updated with classic setState. But I can't figure out why the cursor is always jumping to the end. This makes inner and front text edits a big deal.

After some researchs, I found this guy who had the same issue on InfernoJS :
infernojs/inferno#738

And it seems like a bug due to async updates. On the same thread, they gave two turnarounds :

• Using setStateSync (sadly only available in Inferno, not React)
• Using defaultValue instead of value prop to set the TextField value. This is my current "solution". It's not perfect since it doesn't seem to update when a new defaultValue prop is passed without having typed anything.

Maybe this can give an insight too : facebook/react#955
https://stackoverflow.com/questions/28922275/in-reactjs-why-does-setstate-behave-differently-when-called-synchronously/28922465#28922465

Edit: I found a good explanation here : https://stackoverflow.com/a/28922465
I'm wondering if there is any easy trick to solve this. Any advice ?

Version

• React - 16
• React-MD - 1.1.7
• Browser - Chrome 61.0.3163.79

[strblr]

I found a solution. I'll explain the whole thing here, maybe this can save some people's time.

The problem of seeing the cursor jump to the end actually happens each time a controlled input gets its new value asynchronously. To sumup some of my researchs, here is what happens :

Explanation

When the input is controlled synchronously (cursor doesn't jump) :

• input.value is 'Hello' (cursor in the middle)
• You type 'X'
• input.value is 'HelXlo' (cursor in the middle)
• Call of setState({ value: 'HelXlo' })
• The virtual dom says the input value should be 'HelXlo'
• input.value is actually 'HelXlo'
• No action is taken, cursor stays in the middle

When the input is controlled asynchronously (cursor jumps) :

• input.value is 'Hello' (cursor in the middle)
• You type 'X'
• input.value is 'HelXlo' (cursor in the middle)
• You don't call setState but call your async onChange('HelXlo')
• The virtual dom says the input value should be 'Hello' (last known prop)
• React sets input.value to 'Hello'
• Cursor jumps to the end (side-effect of setting input.value). By the way, this is why the cursor jumps to the end when you provide a value prop without any onChange prop.
• ...
• Then later, when onChange is done :
• Call of componentWillReceiveProps({ value: 'HelXlo' })
• Call of setState({ value: 'HelXlo' })
• The virtual dom says the input value should be 'HelXlo'
• React sets input.value to 'HelXlo'
• Cursor re-jumps to the end (side-effect of setting input.value)

Solution

The solution is to do both sync and async control in a little wrapper. You call prop onChange (for async control) only when the setState (sync control) is done. This gives you the following scenario :

• input.value is 'Hello' (cursor in the middle)
• You type 'X'
• input.value is 'HelXlo' (cursor in the middle)
• Call of setState({ value: 'HelXlo' }), then call of onChange('HelXlo')
• The virtual dom says the input value should be 'HelXlo'
• input.value is actually 'HelXlo'
• No action is taken, cursor stays in the middle
• ...
• Then later, when onChange is done :
• Call of componentWillReceiveProps({ value: 'HelXlo' })
• Call of setState({ value: 'HelXlo' })
• The virtual dom says the input value should be 'HelXlo'
• input.value is actually 'HelXlo'
• No action is taken, cursor stays in the middle

And here is the wrapper :

class AsyncTextField extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = { value: this.props.value }
    }

    componentWillReceiveProps(newProps) {
        this.setState({ value: newProps.value });
    }

    onChange(value) {
        this.setState({ value }, () => this.props.onChange(value));
    }

    render() {
        let { value, onChange, ...props } = this.props;
        return (
            <TextField value={ this.state.value } onChange={ ::this.onChange } { ...props }/>
        );
    }
}

This can be easily adapted to other input components.
It can also be used for concurrent editing of the same TextField. The only limit in that case is that when A types, B sees his cursor jumping to the end. At least, A's cursor doesn't jump anymore. There's pretty much nothing you can do about this issue without controlling the cursor manually.

Hope this will help.

[jbetancur]

I am having the same issue but when using TextField with redux-form. Interestingly though, if I pull out maxLength this issues goes away

const InputField = ({ input, meta: { touched, error }, maxLength, ...others }) => (
  <TextField
    id={input.name}
    error={touched && !!error}
    errorText={error}
    {...input}
    {...others}
  />
);

[jbetancur]

Redux-Form Workaround

This one has been a doozy, but I figured out a workaround for this when using redux-form. Hopefully, this helps folks that have this same issue.

Note this only happens when using maxLength on a TextField and it does not happen on a textarea input (i.e. TextField with rows)

import React, { PureComponent } from 'react';
import { TextField } from 'react-md';

/* eslint-disable react/prop-types */
class InputField extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      value: props.input.value,
    };
  }

  handleInputChange = (value) => {
    const { input: { onChange } } = this.props;

    this.setState({ value });

    if (onChange) {
      onChange(event);
    }
  }

  render() {
    const { input: { value, onChange, ...input }, meta: { touched, error }, ...others } = this.props;

    return (
      <TextField
        id={input.name}
        error={touched && !!error}
        errorText={error}
        onChange={this.handleInputChange}
        value={this.state.value}
        {...input}
        {...others}
      />
    );
  }
}

export default InputField;