fix: useKeyMap unmount removes keys (3778)

packages/graphiql-react/src/editor/__tests__/hooks.spec.ts

@@ -0,0 +1,31 @@
+import { renderHook } from '@testing-library/react';
+import { useKeyMap } from '../hooks';
+import { CodeMirrorEditor, KeyMap } from '../types';
+
+describe('hooks', () => {
+  describe('useKeyMap', () => {
+    it('works correctly', () => {
+      type KeyMap = Record<string, typeof jest.fn>;
+      let keys: KeyMap = {};
+      const editor: Pick<CodeMirrorEditor, 'addKeyMap' | 'removeKeyMap'> = {
+        addKeyMap: jest.fn(keyMap => {
+          keys = { ...keys, ...(keyMap as KeyMap) };
+        }),
+        removeKeyMap: jest.fn((key: string) => {
+          delete keys[key];
+        }),
+      };
+      const callback = jest.fn();
+      const { unmount } = renderHook(() =>
+        useKeyMap(
+          editor as unknown as CodeMirrorEditor,
+          ['foo', 'bar'],
+          callback,
+        ),
+      );
+      expect(Object.keys(keys).length).toBe(2);
+      unmount();
+      expect(Object.keys(keys).length).toBe(0);
+    });
+  });
+});

packages/graphiql-react/src/editor/hooks.ts

@@ -136,9 +136,12 @@ export function useKeyMap(
     if (!editor) {
       return;
     }
-    for (const key of keys) {
-      editor.removeKeyMap(key);
-    }
+    const handleRemoveKeys = () => {
+      for (const key of keys) {
+        editor.removeKeyMap(key);
+      }
+    };
+    handleRemoveKeys();
 
     if (callback) {
       const keyMap: Record<string, EmptyCallback> = {};
@@ -147,6 +150,7 @@ export function useKeyMap(
       }
       editor.addKeyMap(keyMap);
     }
+    return handleRemoveKeys;
   }, [editor, keys, callback]);
 }