Handling dropdown on Esc <3

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;

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

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}