Bug: Undo/Redo not behaving as expected for controlled input when state is updated from an async callback

[VektorTech]

Undo/Redo doesn't work correctly inside controlled input when its value is updated from an asynchronous callback or indirectly from its onChange handler.

React version: 18.1.0 & 18.2.0 Chrome 122.0.6261.49 (arm64)

Link to code example:

1. https://stackblitz.com/edit/react-gtqvnu?file=src%2FApp.js
2. codesandbox.io

Steps to reproduce

1. Navigate to either of the above links
2. Focus the input and enter some random text
3. Try undoing the changes (CMD+Z or Ctrl+Z or Edit>Undo)
4. Now notice that the value remains the same

The current behaviour

Hitting CMD+Z doesn't fire the onChange event. Hitting it several times in succession may eventually bring the caret to the start of the input and sometimes appends the previous value onto the current value, eg.: this is a testthis is a te.

The expected behaviour

Replace current value with previous value before last interaction with input.

[pwbriggs]

I'm seeing the same behavior in Chrome 123.0.6300.3. and Edge 121.0.2277.128. In Firefox, ctrl+Z has no effect, even when pressed multiple times.

I checked each of those browsers with a plain HTML <input>—ctrl+Z works as expected.

[rickhanlonii]

The setTimeout breaks the controlled input, remove the setTimeout and undo/redo work as expected. If you need this to work, you'll need to implement undo/redo within the component yourself.

[VektorTech]

The setTimeout breaks the controlled input, remove the setTimeout and undo/redo work as expected. If you need this to work, you'll need to implement undo/redo within the component yourself.

@rickhanlonii Might I ask why it breaks the input?

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!