From 4403decbe9d031c6f5b449159d7f1ff696c8764c Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 16 Jun 2017 15:50:58 -0300
Subject: [PATCH] Handling dropdown on Esc <3

---
 .../src/routes/Moderation/components/StorySearch.css      | 2 +-
 .../src/routes/Moderation/components/StorySearch.js       | 2 +-
 .../src/routes/Moderation/containers/StorySearch.js       | 8 ++++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/StorySearch.css b/client/coral-admin/src/routes/Moderation/components/StorySearch.css
index cbca8e17d..6dd5b1071 100644
--- a/client/coral-admin/src/routes/Moderation/components/StorySearch.css
+++ b/client/coral-admin/src/routes/Moderation/components/StorySearch.css
@@ -67,7 +67,7 @@
 }
 
 .story {
-  padding: 5px 63px;
+  padding: 7px 63px;
   border-bottom: 1px solid #ddd;
   cursor: pointer;
   display: block;
diff --git a/client/coral-admin/src/routes/Moderation/components/StorySearch.js b/client/coral-admin/src/routes/Moderation/components/StorySearch.js
index c174c892f..f42ceaadd 100644
--- a/client/coral-admin/src/routes/Moderation/components/StorySearch.js
+++ b/client/coral-admin/src/routes/Moderation/components/StorySearch.js
@@ -19,7 +19,7 @@ const StorySearch = (props) => {
 
   return (
     <div>
-      <div className={styles.container} role='alertdialog'>
+      <div className={styles.container} role='alertdialog' onKeyDown={props.handleEsc}>
         <div className={styles.positionShim}>
           <div className={styles.headInput}>
             <input
diff --git a/client/coral-admin/src/routes/Moderation/containers/StorySearch.js b/client/coral-admin/src/routes/Moderation/containers/StorySearch.js
index 334248e33..cf47ca662 100644
--- a/client/coral-admin/src/routes/Moderation/containers/StorySearch.js
+++ b/client/coral-admin/src/routes/Moderation/containers/StorySearch.js
@@ -20,6 +20,13 @@ class StorySearchContainer extends React.Component {
     });
   }
 
+  handleEsc = (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      this.props.closeSearch();
+    }
+  }
+
   handleEnter = (e) => {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -43,6 +50,7 @@ class StorySearchContainer extends React.Component {
       <StorySearch
         search={this.search}
         goToStory={this.goToStory}
+        handleEsc={this.handleEsc}
         handleEnter={this.handleEnter}
         searchValue={this.state.searchValue}
         handleSearchChange={this.handleSearchChange}