Cannot type Chinese in <input /> under controlled mode + ReactDom 16.8.2

[youluna]

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

What is the current behavior?
Cannot type Chinese in <input /> under controlled mode when using react-dom 16.8.2 via CND

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

https://jsfiddle.net/youluna/egz9Lvrp/36/

1. Switch IME(input method editor) into Chinese
2. try type any letters, you can only get English letters but not Chinese characters
   

What is the expected behavior?
Can type Chinese characters

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Not worked in react-dom 16.8.2
But worked well in react-dom 16.8.1

related alibaba-fusion/next#324

update:
It's wired that use React as a <script> tag from a CDN doesn't work, but as a react package on npm worked well. Both are version 16.8.2

1. CDN: https://jsfiddle.net/youluna/6o3rhg7u/1/
2. npm: https://codesandbox.io/s/xp15m8woww

[apyrkh]

The problem is not only with Chinese.
When cursor is in the middle of input text and you're typing the cursor jumps to the end.

Reproduced on 16.8.2. Please check the pen
https://codepen.io/apyrkh/pen/GzPBpK

On 16.8.1 works correctly,

upd.:
when using webpack and bundling react/react-dom by webpack - works correctly.

[nhunzaker]

Yikes! This isn't good!

I can confirm with the DOM Test Fixtures that something changed between React 16.8.1 and 16.8.2 to break text selection restoration.

The module that usually handles this hasn't been updated since November:
https://github.com/facebook/react/commits/master/packages/react-dom/src/client/ReactDOMInput.js

I wonder what else it could be...

[afc163]

It breaks our <Input /> in codepen demo too: https://codepen.io/afc163/pen/bzZjLd

ref ant-design/ant-design#14931

[otakustay]

I wonder what else it could be...

One possible cause could be the fiber reconciler to break composition state of input, committing values in a wrong stage

[dancerphil]

#14799 fires too mush performSyncWork?

Just guessing, I may be wrong.

[nhunzaker]

@dancerphil I built a version of React that omits this addition and the problem persists, but thanks for taking a look!

Just to reiterate: this is only reproducible in the UMD builds of React 16.8.2, at least for the latin character set.

This Codesandbox is fine (CommonJS build)
https://codesandbox.io/s/6wm5wp98yk

However this JSFiddle is broken (UMD Build)
https://jsfiddle.net/j2o9g085/2/

Would anyone be willing to verify this for me with composable characters (like Chinese)?

[nhunzaker]

Ah looks @gaearon is already on top of this:
#14914

[nhunzaker]

I built a version of our DOM fixtures with this change:
https://react-dom-umd-fix.surge.sh/hydration

This is working for me with latin characters. Just for good measure: could someone confirm this with composable characters (like Chinese)?

[gaearon]

@nhunzaker For the future, please don't hesitate to reach out when you see a critical issue like this. I saw "Chinese" in the title and assumed this is some old IME bug. (Which is not to say we shouldn't look into it — but it wasn't obvious all inputs are broken by the latest patch.)

[nhunzaker]

@gaearon Sorry 😢. Will do.

[gaearon]

No problem, thanks for jumping on it anyway. :-)

[nhunzaker]

Confirmed this is a valid fix for composed Japanese too, 👍

[gaearon]

Fixed in 16.8.3.