add missing effect deps for keyMap prop (#2561)

graphql · Jul 11, 2022 · 08346cb · 08346cb
1 parent 54654c0
commit 08346cb
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/wild-wasps-retire.md b/.changeset/wild-wasps-retire.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Add missing effect dependencies to make sure editors are recreated when changing the `keyMap` prop
diff --git a/packages/graphiql-react/src/editor/header-editor.tsx b/packages/graphiql-react/src/editor/header-editor.tsx
@@ -103,7 +103,7 @@ export function useHeaderEditor({
     return () => {
       isActive = false;
     };
-  }, [editorTheme, initialHeaders, readOnly, setHeaderEditor]);
+  }, [editorTheme, initialHeaders, keyMap, readOnly, setHeaderEditor]);
 
   useChangeHandler(
     headerEditor,

diff --git a/packages/graphiql-react/src/editor/query-editor.tsx b/packages/graphiql-react/src/editor/query-editor.tsx
@@ -219,7 +219,7 @@ export function useQueryEditor({
     return () => {
       isActive = false;
     };
-  }, [editorTheme, initialQuery, readOnly, setQueryEditor]);
+  }, [editorTheme, initialQuery, keyMap, readOnly, setQueryEditor]);
 
   /**
    * We don't use the generic `useChangeHandler` hook here because we want to

diff --git a/packages/graphiql-react/src/editor/variable-editor.tsx b/packages/graphiql-react/src/editor/variable-editor.tsx
@@ -120,7 +120,7 @@ export function useVariableEditor({
     return () => {
       isActive = false;
     };
-  }, [editorTheme, initialVariables, readOnly, setVariableEditor]);
+  }, [editorTheme, initialVariables, keyMap, readOnly, setVariableEditor]);
 
   useChangeHandler(
     variableEditor,