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

Created on 15 Feb 2019 · 13Comments · Source: facebook/react

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/

Switch IME(input method editor) into Chinese
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

update:
It's wired that use React as a

All 13 comments

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.

apyrkh on 18 Feb 2019

👍11

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...

nhunzaker on 20 Feb 2019

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

ref https://github.com/ant-design/ant-design/issues/14931

afc163 on 20 Feb 2019

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

otakustay on 21 Feb 2019

~~https://github.com/facebook/react/pull/14799 fires too mush performSyncWork?~~

~~Just guessing, I may be wrong.~~

dancerphil on 21 Feb 2019

@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 on 21 Feb 2019

Ah looks @gaearon is already on top of this:
https://github.com/facebook/react/pull/14914

nhunzaker on 21 Feb 2019

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)?

nhunzaker on 21 Feb 2019

@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.)