React: Synthetic KeyboardEvent should support KeyboardEvent.code

[jjspace]

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

What is the current behavior?
The current synthetic keyboard event does not support the KeyboardEvent.code property.

What is the expected behavior?
The synthetic keyboard event should pass along the KeyboardEvent.code property. This is currently in the WD of DOM Events but is part of replacing keyCode and charCode and is much more consistent and easy to use. This is currently only supported by FF and Chrome (CanIUse) so it may be a bit premature to fully integrate. However keyCode, charCode and which are being deprecated so this will eventually need to be added.

Edit: I spoke too quickly, CanIUse shows that FF, Chrome, Safari and Opera support it. IE, Edge and most mobile browsers do not.

[philipp-spiess]

Seems like Safari also supports this (looking at caniuse.com). Do you want to send a PR? 🙂

[charliesmart]

It seems like the KeyboardEvent.key property should also probably added. I'd be happy to send a PR for both if you don't hear back from @jjspace

[philipp-spiess]

@charliesmart We already have key but feel free to send a PR for code 🙂 https://github.com/facebook/react/blob/master/packages/react-dom/src/events/SyntheticKeyboardEvent.js#L18

[jjspace]

@philipp-spiess is right, key is already there and implemented correctly (this was what I adapted my code to use in lieu of code) I'm happy to take a look at adding code but I wont have much time until the weekend if @charliesmart or someone else wants to do it before then. It doesn't seem like a large change apart from browser support.

[jjspace]

I've created the PR to pass the code property along to the synthetic event. I looked into solutions to provide a polyfill to browsers without support like Edge and IE but the property is actually very complicated and needs access to the actual hardware keycodes as seen here so it's not really possible.

This should also have a change in the docs. How do I go about updating those? Also, when I do would it make sense to comment on the partial lack of browser support?

[mydiemho]

is there any updates on this?

[kgabryje]

Is anyone working on this? Or can I take it?

[pushpinder107]

You can access the native event using event.nativeEvent so event code is available at event.nativeEvent.code