replace rest of event.keyCode usages by event.code (#3136)

graphql · May 27, 2023 · 7bf9092 · 7bf9092
1 parent 431b7fe
commit 7bf9092
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/.changeset/shaggy-chairs-explode.md b/.changeset/shaggy-chairs-explode.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+replace rest of `event.keyCode` usages by `event.code`
diff --git a/packages/graphiql-react/src/editor/header-editor.ts b/packages/graphiql-react/src/editor/header-editor.ts
@@ -96,10 +96,10 @@ export function useHeaderEditor(
       });
 
       newEditor.on('keyup', (editorInstance, event) => {
-        const { keyCode, key, shiftKey } = event;
-        const isLetter = keyCode >= 65 && keyCode <= 90;
-        const isNumber = keyCode >= 48 && keyCode <= 57;
-        if (isLetter || (!shiftKey && isNumber) || key === '_' || key === '"') {
+        const { code, key, shiftKey } = event;
+        const isLetter = code.startsWith('Key');
+        const isNumber = !shiftKey && code.startsWith('Digit');
+        if (isLetter || isNumber || key === '_' || key === '"') {
           editorInstance.execCommand('autocomplete');
         }
       });

diff --git a/packages/graphiql-react/src/editor/variable-editor.ts b/packages/graphiql-react/src/editor/variable-editor.ts
@@ -116,10 +116,10 @@ export function useVariableEditor(
       });
 
       newEditor.on('keyup', (editorInstance, event) => {
-        const { keyCode, key, shiftKey } = event;
-        const isLetter = keyCode >= 65 && keyCode <= 90;
-        const isNumber = keyCode >= 48 && keyCode <= 57;
-        if (isLetter || (!shiftKey && isNumber) || key === '_' || key === '"') {
+        const { code, key, shiftKey } = event;
+        const isLetter = code.startsWith('Key');
+        const isNumber = !shiftKey && code.startsWith('Digit');
+        if (isLetter || isNumber || key === '_' || key === '"') {
           editorInstance.execCommand('autocomplete');
         }
       });