Connected text input cursor position reset on input

[thefloweringash]

I have an input field connected to a part of a redux store. When I type in the text field the cursor position is reset to the end of the text field. For example filling in "123", then attempting to insert "abc" at the beginning results in "a123bc". I've been unable to isolate the exact circumstances that cause this, but have a small reproduction at https://jsfiddle.net/1fm2cczq/. Occurs on 5.0.0-beta.3. Does not occur on 4.4.5.

[jimbolla]

Hmmm yeah good find. I can reproduce this in my own app. This seems related to facebook/react#955, and my first hunch is that changing the subscriptions from firing bottom-up to top-down reveals this behavior. Will need to investigate further.

[jimbolla]

As an experiment, I wrapped an <input> with this component to see what happens, and this does correct the behavior. So it seems to me that the issue is related to controlled inputs needing to be updated earlier or else React sorta goes off the rails with cursor position.

class Input extends React.Component {
  constructor(props, ...args) {
    super(props, ...args);
    this.state = { value: props.value };
  }

  componentWillReceiveProps(nextProps) {
    if (this.state.value !== nextProps.value) {
      this.setState({ value: nextProps.value });
    }
  }

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

  render() {
    return (<input {...this.props} {...this.state} onChange={this.onChange} />);
  }
}

[jimbolla]

I created a custom build of react-redux v5 that disables the top-down ordering so that subscriptions behave like v4. The cursor issue went away. So I think I know what the problem is, but I don't yet have a great solution. So far, the first idea I have is to provide another option for connect that tells it to prioritize its store subscription before those of its parents. This option would have to be enabled for controlled inputs and textareas (I'm assuming) as a workaround for facebook/react#955 until that's fixed (if ever.)

[markerikson]

Ew. This... sounds nasty.

[jimbolla]

@markerikson Indeed it is.

As another experiment, I just tried switching React for Preact in my own project and the bug goes away.

[markerikson]

Hmm. Pinging @gaearon and @timdorr for thoughts...

[jimbolla]

Is there a build of react master available somewhere? I'd like to test this against that because I know there are other bugfixes related to controlled inputs in master that are supposedly gonna land in react v16.

[jimbolla]

@johnnycopperstone From what I gather from facebook/react#955, there are (at least) 2 scenarios in which this bug manifests itself, one being not updating the input's value prop soon enough (which is what I think is happening with react-redux v5) and one related to updating the prop with a value different than what's in the textbox, typically because of data altering (input masking or whitespace stripping, for example). Are you doing anything like that?

[jonathancopperstone]

Hey @jimbolla Sorry didn't see your reply - I just removed my comment as I realised it was a different issue and didn't want to pollute this issue. I was still using 15.0.0 and the cursor fix was in 15.0.1

[timdorr]

As another experiment, I just tried switching React for Preact in my own project and the bug goes away.

Well, Preact is pretty awesome, so I would suspect it's not going to see issues like this 😄 (Also, it doesn't have the huge event model that React does. Simpler code == less bugs)

Is there a build of react master available somewhere? I'd like to test this against that because I know there are other bugfixes related to controlled inputs in master that are supposedly gonna land in react v16.

I'm not sure what's in it, but react@next is currently on 15.4.0-rc.4, so it might have some of that in there? It's from 10 days ago.

[jimbolla]

@timdorr True, but our answer can't just be "use Preact instead" unfortunately. What I'm thinking...

• IMO, the new top-down ordering is the "right" way to do it, and much of the perf gains and many of the bug fixes are because of it. We could remove it, but that undoes a lot of the benefits of v5.
• This does seem like a bug in React that the new subscription ordering is exposing, but one that doesn't seem easy to fix, and even if it was, that fix wouldn't make it to release in a timely fashion, such that we can ignore it. I did pull and build react master, and the bug still exists.
• I'm guessing this bug might manifest itself in react-redux v4 if redux were to fire subscriptions in reverse order because of how it relates to the timing of which components receive new props first. I might try test this just for awareness of the issue.
• If we keep top-down as the default behavior, we need to make it as painless as possible to work around this issue, and make devs aware of it.
  • While it's certainly solvable in userland using the code provided above, I'd hate to force that on everyone, lest we be accused of creating javascript fatigue. 👅
  • The best solution I have right now is for connect (actually connectAdvanced) to offer an opt-in option that would allow that component to skip the subscription tree and subscribe directly to the store, making it work like v4. Devs that are using controlled text inputs would have to set this option to true. I don't know what to name this option. Libraries like redux-form would have to handle this as well. Docs would have to stress this as it's a bug that isn't discovered easily, because I doubt many devs test entering values in the middle of an input.

[timdorr]

Oh no, I'm not suggesting everyone use Preact, just that it's awesome in its own right. That's ancillary to this issue.