fix: prevent keydown event when pressing escape to close autocomplete dialogs (#2824)

TheMightyPenguin · web-flow · commit 4e2f7ff99c57 · 2022-10-25T17:33:27.000+02:00
* fix: prevent keydown event when pressing escape to close autocomplete dialogs

* Fix changeset

* Colocate variable closer to usage
diff --git a/.changeset/wicked-jars-push.md b/.changeset/wicked-jars-push.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+fix: prevent key down events when pressing escape to close autocomplete dialogs
diff --git a/packages/graphiql-react/src/editor/query-editor.tsx b/packages/graphiql-react/src/editor/query-editor.tsx
@@ -223,6 +223,25 @@ export function useQueryEditor(
         }
       });
 
+      let showingHints = false;
+
+      // fired whenever a hint dialog opens
+      newEditor.on('startCompletion', () => {
+        showingHints = true;
+      });
+
+      // the codemirror hint extension fires this anytime the dialog is closed
+      // via any method (e.g. focus blur, escape key, ...)
+      newEditor.on('endCompletion', () => {
+        showingHints = false;
+      });
+
+      newEditor.on('keydown', (editorInstance, event) => {
+        if (event.key === 'Escape' && showingHints) {
+          event.stopPropagation();
+        }
+      });
+
       newEditor.on('beforeChange', (editorInstance, change) => {
         // The update function is only present on non-redo, non-undo events.
         if (change.origin === 'paste') {
diff --git a/packages/graphiql/cypress/integration/keyboard.spec.ts b/packages/graphiql/cypress/integration/keyboard.spec.ts
@@ -0,0 +1,36 @@
+describe('GraphiQL keyboard interactions', () => {
+  it('Does not prevent the escape key from being handled outside the editor', () => {
+    cy.visit('/');
+    const mockFn = cy.stub().as('escapeHandler');
+    cy.document().then(doc => {
+      doc.addEventListener('keydown', event => {
+        if (event.key === 'Escape') {
+          mockFn();
+        }
+      });
+    });
+
+    cy.get('.graphiql-query-editor textarea').type('{esc}', { force: true });
+
+    cy.get('@escapeHandler').should('have.been.called');
+  });
+
+  it('Does prevent the escape key from being handled outside the editor if closing the autocomplete dialog', () => {
+    cy.visit('/').wait(3000);
+    const mockFn = cy.stub().as('escapeHandler');
+    cy.document().then(doc => {
+      doc.addEventListener('keydown', event => {
+        if (event.key === 'Escape') {
+          mockFn();
+        }
+      });
+    });
+
+    cy.get('.graphiql-query-editor textarea')
+      .type('{\n  t', { force: true })
+      .wait(500)
+      .type('{esc}');
+
+    cy.get('@escapeHandler').should('not.have.been.called');
+  });
+});

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@graphiql/react': patch
 +---
++
 +fix: prevent key down events when pressing escape to close autocomplete dialogs