[fixed] switched from KeyboardEvent.keyCode to KeyboardEvent.code

KeyboardEvent.keyCode is deprecated. Since React 18 dropped support for IE, we don't need to fall back on it and can simply switch to the new property, KeyboardEvent.code.
reactjs · Oct 14, 2022 · f3a19fc · f3a19fc
1 parent aca5261
commit f3a19fc
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/specs/helper.js b/specs/helper.js
@@ -182,7 +182,7 @@ const dispatchMockEvent = eventCtor => (key, code) => (element, opts) =>
       {},
       {
         key: key,
-        keyCode: code,
+        code: code,
         which: code
       },
       opts
@@ -194,11 +194,11 @@ const dispatchMockKeyDownEvent = dispatchMockEvent(Simulate.keyDown);
 /**
  * Dispatch an 'esc' key down event from an element.
  */
-export const escKeyDown = dispatchMockKeyDownEvent("ESC", 27);
+export const escKeyDown = dispatchMockKeyDownEvent("ESC", "Escape");
 /**
  * Dispatch a 'tab' key down event from an element.
  */
-export const tabKeyDown = dispatchMockKeyDownEvent("TAB", 9);
+export const tabKeyDown = dispatchMockKeyDownEvent("TAB", "Tab");
 /**
  * Dispatch a 'click' event at a node.
  */

diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js
@@ -17,9 +17,6 @@ const CLASS_NAMES = {
   content: "ReactModal__Content"
 };
 
-const TAB_KEY = 9;
-const ESC_KEY = 27;
-
 let ariaHiddenInstances = 0;
 
 export default class ModalPortal extends Component {
@@ -284,11 +281,11 @@ export default class ModalPortal extends Component {
   };
 
   handleKeyDown = event => {
-    if (event.keyCode === TAB_KEY) {
+    if (event.code === "Tab") {
       scopeTab(this.content, event);
     }
 
-    if (this.props.shouldCloseOnEsc && event.keyCode === ESC_KEY) {
+    if (this.props.shouldCloseOnEsc && event.code === "Escape") {
       event.stopPropagation();
       this.requestClose(event);
     }