React: event.key = Unidentified, event.keyCode = 229

[lzszone]

Happy new year

---

feature or a bug?
Maybe it's a bug.

---

What is the current behavior?
I'm a Chinese developer, our character looks like 你 好,.
To input those characters, we have a program to process combinations of the single key down.
For example, I want to input 你, I will input a combination of keys ni, and then select the character 你 from the program. In the browser environment this cannot be seen(if I'm inputting in an input DOM, the value of it will not be changed until the last step).

I simplified the problem and put it on the codesandbox
code

I just listen to the input's 'keydown' event through the onKeyDown and print what key I've pressed.
In chrome, the key is Unidentified, keyCode is 229, In firefox key is Process.
ONLY a-zA-z0-9 behave unusual, keys like ctrl, shift work fine.

My input program has two modes, one is English, another is Chinese.
And I find that if I turn my input program on, no matter what mode it is, my code works weird as above.
If I turn the input program off, my code works fine.
In my view, with the input program on and set it to English mode, has no differences with turn it off

I also tried add listener on a normal html page like

window.addEventListener('keydown', function(e) {console.log(e.key, e.keyCode)})

This works fine with my input program on.

---

versions

OS: Ubuntu 18.04 with the latest update
Input program: Ibus-libpinyin(github)
Browser: Chrome 71.0.3578.98, Firefox 64.0
React: 16.7.0

[Jessidhia]

That is how the key event API works, anything written while the IME is active will have keyCode = 229.

You have to use the input events (onChange in React terms), and also check if their isComposing property is true. I don't think React's synthetic event has all the relevant properties so you probably need to work with the nativeEvent.

[nhunzaker]

@Jessidhia what relevant properties would we need to add?

[lzszone]

@Jessidhia You're right, I don't know the difference when keydown event between input element and normal DOM element.

@nhunzaker It's my problem, the synthetic event works fine.

Thank you guys.

[threepointone]

I hope the issue's resolved for you @lzszone? closing this, please reopen if not. thanks!