search

reactjs / react-modal

Accessible modal dialog component for React
http://reactcommunity.org/react-modal
MIT License
7.37k stars 809 forks source link

Should use event.key not event.code #1030

Open nicksellen opened 1 year ago

nicksellen commented 1 year ago

Summary:

In https://github.com/reactjs/react-modal/blob/e7c4a63eb5f19dd85d03b83cb25566fafe7b85ae/src/components/ModalPortal.js#L25-L26 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.

image

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.