From 50c8ab2d7be69c52ed8b9c1f7a625fcf859983e8 Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Fri, 28 May 2021 10:01:12 -0400
Subject: [PATCH] fix: close modal on escape keydown (#27758)

---
 .../learner_dashboard/EnterpriseLearnerPortalModal.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/lms/static/js/learner_dashboard/EnterpriseLearnerPortalModal.jsx b/lms/static/js/learner_dashboard/EnterpriseLearnerPortalModal.jsx
index 884718855f..49a63a5ca6 100644
--- a/lms/static/js/learner_dashboard/EnterpriseLearnerPortalModal.jsx
+++ b/lms/static/js/learner_dashboard/EnterpriseLearnerPortalModal.jsx
@@ -13,6 +13,7 @@ class EnterpriseLearnerPortalModal extends React.Component {
     this.openModal = this.openModal.bind(this);
     this.closeModal = this.closeModal.bind(this);
     this.handleClick = this.handleClick.bind(this);
+    this.handleEsc = this.handleEsc.bind(this);
   }
 
   componentDidMount() {
@@ -22,6 +23,7 @@ class EnterpriseLearnerPortalModal extends React.Component {
       this.openModal();
       document.addEventListener('mousedown', this.handleClick, false);
       window.sessionStorage.setItem(storageKey, true);
+      document.addEventListener('keydown', this.handleEsc, false);
     }
   }
 
@@ -41,6 +43,7 @@ class EnterpriseLearnerPortalModal extends React.Component {
     // remove the class to allow the dashboard content to scroll
     document.body.classList.remove('modal-open');
     document.removeEventListener('mousedown', this.handleClick, false);
+    document.removeEventListener('keydown', this.handleEsc, false);
   }
 
   handleClick(e) {
@@ -52,6 +55,13 @@ class EnterpriseLearnerPortalModal extends React.Component {
     this.closeModal();
   }
 
+  handleEsc(e) {
+    const { key } = e;
+    if (key === "Escape") {
+      this.closeModal();
+    }
+  }
+
   closeModal() {
     this.setState({
       isModalOpen: false,