Caret misplaced after preventDefault in onBeforeInput

[ouchxp]

Do you want to request a feature or report a bug?
BUG

What is the current behavior?
When using e.preventDefault to omit some emoji input from MacOS's emoji picker, the caret still moving as if the character already been input.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem
https://jsfiddle.net/m6z0xn4r/181/

As we can see from the gif, I prevent everything in onBeforeInput. I'm trying to insert an emoji using MacOS's emoji picker. The caret then moved to the wrong position.

This issue is not only happen to contentEditable element but also apply to input element as well.

What is the expected behavior?
Caret should stay still if the input being blocked in onBeforeInput.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Tested react 15.3 and above, Chrome on MacOS is affected.

[ouchxp]

After digging some code, I found that the root of this problem is a chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=709857 but I'm not sure if there are any workaround.

[aweary]

@ouchxp great find. I don't think we need to address this in React in that case. Thanks for looking into it!