Input field caret position always resets to the end of the input

The bug is testable with the Scrollable container example on http://react-autosuggest.js.org/

To reproduce:

1. Focus on the input field
2. Type ac
3. Place the caret between a and c
4. Type b

Observed behavior:

The caret jumps to the end.

Expected behavior:

The caret should stay between b and c.

[zushenyan]

I happened to encounter this behavior recently. If your are using react-autosuggest with redux-form, here is a workaround for you.

Thanks to advices from https://github.com/facebook/react/issues/955

Demo

https://codesandbox.io/s/0o7wpk6ywv

Code

Wrapping react-autosuggest in component:

class MyInput extends React.PureComponent {
  state = { value: "" };

  UNSAFE_componentWillReceiveProps = props => {
    this.setState({ value: props.input.value });
  };

  onChange = (e, { newValue }) => {
    e.persist();
    this.setState({ value: newValue }, () => {
      this.props.input.onChange(e, newValue);
    });
  };

  render() {
    const inputProps = {
      ...this.props.input,
      value: this.state.value,
      onChange: this.onChange
    };
    return (
      <Autosuggest
        suggestions={[]}
        onSuggestionsFetchRequested={() => {}}
        onSuggestionsClearRequested={() => {}}
        inputProps={inputProps}
      />
    );
  }
}

And combining with redux-form:

const SimpleForm = props => {
  const { handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>First Name</label>
        <div>
          <Field name="firstName" component={MyInput} />
        </div>
      </div>
    </form>
  );
};

export default reduxForm({
  form: "simple" // a unique identifier for this form
})(SimpleForm);

This should be enough for handling change of value with keyboard events or redux-form’s action creator (e.g. change, initialize, reset…).

Remember it’s still not working with normalization since normalization is a totally new transformation for the value.

Note

UNSAFE_componentWillReceiveProps is intentionally used here. For some unknown reasons it doesn’t work with static getDerivedStateFromProps(props, state).

[ghost]

I have a very similar caret behaviour To reproduce:

Focus on the input field Type ac Place the caret between a and c delete a Observed behavior:

The caret jumps to the end.