Should use event.key not event.code

[nicksellen]

Summary:

In

react-modal/src/components/ModalPortal.js

Lines 25 to 26 in e7c4a63

	const isTabKey = event => event.code === "Tab" || event.keyCode === 9;
	const isEscKey = event => event.code === "Escape" || event.keyCode === 27;

to detect tab/esc keypress it uses event.code but should use event.key

See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code which says:

The KeyboardEvent.code property represents a physical key on the keyboard (as opposed to the character generated by pressing the key).

To determine what character corresponds with the key event, use the KeyboardEvent.key property instead.

And https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key says:

The KeyboardEvent interface's key read-only property returns the value of the key pressed by the user, taking into consideration the state of modifier keys such as Shift as well as the keyboard locale and layout.

Here's the event printed in my firefox developer console:

note: code is Escape, but key and keyCode do not correspond to escape.

Steps to reproduce:

(sorry, not the most helpful reproduction, but it's how I encountered it)

1. use https://github.com/fdw/rofimoji emoji picker
2. insert an emoji in a form field within the modal
3. the modal closes

Expected behavior:

the emoji would be inserted in the form field

Link to example of issue:

Additional notes:

I didn't provide a link to example of issue as I think it's explained by the mozilla docs quite decisively, and would just be a totally standard modal... it's dependent on the users input method.