577 close modals by esc-key (#585)

SAP · Jun 24, 2019 · 65c19e2 · 65c19e2
1 parent 3488afc
commit 65c19e2
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 0 deletions.
diff --git a/core/examples/luigi-sample-angular/e2e/tests/luigi-client-ux-manager-features.spec.js b/core/examples/luigi-sample-angular/e2e/tests/luigi-client-ux-manager-features.spec.js
@@ -69,6 +69,25 @@ describe('Luigi client ux manager features', () => {
         .contains('Luigi confirmation modal has been confirmed');
     });
 
+    it('Close Luigi Client generic confirmation modal by esc keypress', () => {
+      cy.goToUxManagerMethods($iframeBody);
+
+      cy.get('[data-cy=luigi-confirmation-modal]').should('not.be.visible');
+      cy.wrap($iframeBody)
+        .find('[data-cy=show-luigi-confirmation-modal]')
+        .click();
+      cy.get('[data-cy=luigi-confirmation-modal]').should('be.visible');
+
+      cy.get('[data-cy=luigi-modal-dismiss]').trigger('keydown', {
+        keyCode: 27,
+        which: 27
+      });
+      cy.get('[data-cy=luigi-confirmation-modal]').should('not.be.visible');
+      cy.wrap($iframeBody)
+        .find('[data-cy=luigi-confirmation-modal-result]')
+        .contains('Luigi confirmation modal has been dismissed');
+    });
+
     it('loading indicator', () => {
       Cypress.currentTest.retries(3);
       cy.get('.fd-shellbar')

diff --git a/core/src/ConfirmationModal.html b/core/src/ConfirmationModal.html
@@ -1,3 +1,4 @@
+<svelte:window on:keydown="handleKeydown(event)"/>
 <div class="fd-ui__overlay fd-overlay fd-overlay--modal" aria-hidden="false">
   <div class="fd-modal" data-cy="luigi-confirmation-modal">
     <div class="fd-modal__content" role="document">
@@ -47,6 +48,13 @@ <h1 class="fd-modal__title">{settings.header}</h1>
       } catch (e) {
         console.warn("Couldn't focus confirmation button in modal");
       }
+    },
+    methods: {
+      handleKeydown(event) {
+        if (event.keyCode === 27) {
+          this.fire('modalDismiss');
+        }
+      }
     }
   };
 </script>

diff --git a/core/src/Modal.html b/core/src/Modal.html
@@ -1,3 +1,4 @@
+<svelte:window on:keydown="handleKeydown(event)"/>
 <div class="fd-ui__overlay fd-overlay fd-overlay--modal" style="z-index:999">
   <div class="fd-modal" data-e2e="modal-mf">
     <div class="fd-modal__content" style="height:100%">
@@ -99,6 +100,13 @@ <h1 class="fd-modal__title">{modalSettings.title}</h1>
       return {
         isDataPrepared: false
       };
+    },
+    methods: {
+      handleKeydown(event) {
+        if (event.keyCode === 27) {
+          this.fire('close');
+        }
+      }
     }
   };
 </script>