onKeyDown\onChange\onInput on android device for controlled input work incorrectly

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

What is the current behavior? Character appears in input before onKeyDown handler is triggered.

Demo of what happens on android device (actual behavior): https://streamable.com/am8y4

Demo of what happens on PC (expected behavior): http://recordit.co/rX2V365iFI

Description and Example

1. Look at codesandbox: https://codesandbox.io/s/0x828l6q2w. See that input is controlled
2. Open https://0x828l6q2w.codesandbox.io/ on Android device.
3. Attach Chrome debugger
4. Add breakpoint to 5th line console.log("lalal");
5. Input any number to on mobile device after 5
6. See that number appeared in input alongside with breakpoint handler triggered

What is the expected behavior? … 6. Inputted number should not appear

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React: 16.6.0 Chrome android: 69.0.3497.100 Android: 9

List of devices where the issue was tested:

[Xizario]

You may want to use the onChange event or onInput.

The keydown, keypress and keyup are browser/device/os/culture specific. I would use them only for a keyboard navigation for example arrows, delete key etc. mdn is good reference point to start. Too much information to be explained, and this is really not the place for such discussion.

[Xizario]

Short answer:

If you have set value (thus you are in controlled mode) the react will keep overriding the value of the input element with the value of the value property. So kind of preventing the typing.

Long answer, TLDR:

The framework will not prevent the typing directly (like calling .preventDefault() on the native event) since the underlying input event is not cancelable. Instead, the framework restores the values after your code execution finishes. The onInput works pretty much the same on all modern browsers. (and there was not such event on older like IE6), so it is handy event to be used.

The keyDown can be prevented. But here is the issue: you don’t know what is typed on keyDown. Let me illustrate:

• person push some button of his keyboard.
• browser throws keyDown event with some keyCode (it is not character, just a code)
• Then this code is mapped by your OS preferences language, if shift or caps-lock is pressed etc.
• Then when character is available, the browser puts this character(s) into the element, and then throws you keyPress event. If you hold the key, multiple events will be fired.
• However if you have canceled the keyDown, the keyPress will never happen, same with the onInput.
• The user in the end release the key, and you get keyUp event.

So if you want to know what is typed, deleted, dragged, swiped, pasted, autocompleted, dictated, you need to allow it being entered into the input by the browser, and it will be visible at some point of the process (during your onChange event). If you don’t like what is typed, then you override it later with something else. (this is the part that react do automatically for you if you have set value) The key part is that the overriding must happen in shortest time possible: under 1/60s, a frame, so the end user not be able to see flickering of the text.

At the end: Should you be able to see the new value during onChange/onInput if you place debugger: Yes. Should the end user be able to see it: No

PS: I have simplified most of the stuff above, so it is not 100% technically correct, but short enough to be readable.