Cursor jumps to end of controlled input

[ericvicenti]

When an input element is "controlled" by a model, the cursor will jump to the end of the line on every change. This makes it impossible to edit text that is not at the end of the input.

A quick demo: https://gist.github.com/ericvicenti/46f97f47c1cfe46040c8

      var ExampleApplication = React.createClass({
        render: function() {
          var model = this.props.model;
          return <input onChange={this.nameChange} value={model.name} />;
        },
        nameChange: function(evt) {
          this.props.model.name = evt.target.value;
        }
      });
      var myModel = {
        name: 'Input is funky'
      };
      setInterval(function() {
        React.renderComponent(
          <ExampleApplication model={myModel} />,
          document.getElementById('container')
        );
      }, 50);

It should be noted that this is only when using an external model, not when using the view's state. Maybe there is something wrong with my usage here?

As a suggested fix, maybe the input should not be overridden unless the value differs? Otherwise, the cursor position should be manually preserved.

Also, see this SO entry which documents the ability to grab and preserve the cursor position: http://stackoverflow.com/questions/1080532/prevent-default-behavior-in-text-input-while-pressing-arrow-up

[sophiebits]

Your problem is that you're not rerendering with the new value. If you have React rerender with the new input value, then it'll know not to revert the value. (As it is, it will revert to the old value until it gets the new value after 50 ms. Changing 50 to a larger number like 1000 will make this much more apparent.) The following code should work:

var ExampleApplication = React.createClass({
  render: function() {
    var model = this.props.model;
    return <input onChange={this.nameChange} value={model.name} />;
  },
  nameChange: function(evt) {
    this.props.model.name = evt.target.value;
    rerender();
  }
});
var myModel = {
  name: 'Input is funky'
};
function rerender() {
  React.renderComponent(
    <ExampleApplication model={myModel} />,
    document.getElementById('container')
  );
}
setInterval(rerender, 50);

(The normal way to do this when making a reusable component is to pass down a callback in props to ask the parent component to rerender.)

[ericvicenti]

Ah, thanks for the help!

I'm not a big fan of passing a callback down, so I'm going to try and re-render from the parent immediately on model change events.

[sophiebits]

Great -- that should work too.

[marnusw]

I came across this problem when writing a Flux application. I updated the local state and dispatched an action to update the store. This local state update caused a re-render which still used the current "old" value in the store and thus changed the DOM and moved the cursor.

This Stack Overflow answer helped me understand what was going on, so I thought I'd reference it here since this was the first result I found on Google, but didn't quite help me understand what was going on.

[tsheaff]

@spicyj I'm seeing a similar issue of the cursor jumping to the end whenever I format / modify a controlled input's value between renders.

Here's my code:

export default class GiftPurchaseForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cardNumber: '',
    };
  }

  cardNumberChanged(event) {
    this.state.cardNumber = event.target.value;
    this.setState(this.state);
  }

  render() {
    return (
      <div id="gift-purchase-form">
        <input
          className="card-number"
          type="text"
          placeholder="Card Number"
          value={creditcard.parse(this.state.cardNumber).formatted}
          onChange={::this.cardNumberChanged}
        />
      </div>
    );
  }
}

creditcard.parse(*).formatted simply turns a number like 4444555566667777 into a card number like 4444 5555 6666 7777

If I remove call to creditcard.parse(*).formatted and just pass this.state.cardNumber the cursor doesn't jump. But the cursor still jumps even if I pass this.state.cardNumber + '5'; as the next value, so it seems any modification of the string between renders means middle edits (edits before modification point in string) cause cursor to jump to end.

I'm on react@0.14.0

[export-mike]

@tsheaff did you find a solution to this in the end? I'm also doing some onChange formatting to my text field.

[sophiebits]

@tsheaff @mikeljames The problem is that React doesn't have enough information to do something intelligent. Assuming ^ represents the cursor, suppose the input looks like

401^8 8888 8881 881

(that is, between "1" and "8" in "4018"). Then I type a "2". Momentarily, the input looks like

4012^8 8888 8881 881

but immediately, creditcard.parse(*).formatted returns

4012 8888 8888 1881

Where should the cursor go? Even as a human looking at this, it's unclear: it could go before or after the space:

4012^ 8888 8888 1881
4012 ^8888 8888 1881

Figuring this out programmatically seems impossible to me in the general case. Even if we were content to return either of those, it's hard for me to imagine an algorithm that might work reliably. Let me know if I'm missing something.

Because this is impossible and requires more knowledge about the specific problem space, React doesn't attempt to do anything intelligent with the cursor; you can set .selectionStart/.selectionEnd manually as appropriate for your domain. In the case of filtering out some characters it would be possible to write a more general solution but I think that may still be better left to a third-party component.

[tsheaff]

Yes @mikeljames it's impossible in general as @spicyj explains.

You can almost certainly do better than jumping to the end for your specific case of formatting using some simple heuristic. Doesn't make sense for React to burn extra cycles attempting to do this in general (e.g. formatting could be additive or subtractive).

Perhaps linking this issue or a related discussion could be helpful in the official docs as I'd imagine formatting (phone numbers, credit cards, SSNs) is quite common.

[sophiebits]

Actually: Stripe's jQuery.payment library preserves cursor position except if your cursor is already at the end, in which case it keeps your cursor at the end of the input. This generally feels pretty reasonable; try:

http://stripe.github.io/jquery.payment/example/

That example flickers but that's not inherent to the strategy so we could do better. This might be more predictable in the common case, at the expense of introducing edge-case bugs because you now don't need to think about what should happen. For example, this strategy does feel broken in the case that you're typing before a space. If you have:

4018^ 8888 8881 881

and type a 7 you have

40187^ 8888 8881 881

which gets changed to

4018 ^7888 8888 1881

which feels wrong because your cursor should be after the 7, not before. But maybe this behavior is still better.

cc @zpao for a second opinion.

[sophiebits]

That is: I'm entertaining the idea of React's <input> doing this by default.