React: Undo behavior in controlled textareas works differently from the default behaviour in chrome

[fabsor]

If you control a textarea with value, it behaves differently when you use undo. When the textarea is controlled, you can only undo one letter at a time. This is not how undo works normally with an uncontrolled component. Undo seems to work as expected with input components.

With a controlled textarea component, you can only undo one letter at a time. The normal undo works with some kind of algorithm for how much is going to be un- or redone.

You can try the difference in this codepen:

https://codepen.io/fabsor/pen/LbmBOv

Tested with React 15.3.1 and Chrome 54 and Chrome Canary. Works as expected in Firefox and Safari. It might be a Chrome bug?

[syranide]

This is probably another side-effect oh React updating the value-attribute to reflect the value-property. I don't know the other issue numbers by memory now, but it was suggested that the value-reflecting behavior should be reverted.

cc @jimfb @spicyj

[aldendaniels]

I hit this as well. On chrome CMD+Z undoes one character at a time in a React-controlled textarea. On FireFox and Safari undo is still grouped as expected. Interestingly DOM.input() is not affected.

[aldendaniels]

For the record, this bug also appears to repro whenever the defaultValue changes, even though this value is only used at instantiation.

[nornagon]

Is there a known workaround for this? @syranide mentioned potentially reverting the value-reflecting behavior; would that work? What are the trade-offs there?

[nornagon]

Possibly related: https://bugs.chromium.org/p/chromium/issues/detail?id=746483