Search dropdown: clear search when closed

client/coral-admin/src/routes/Moderation/components/StorySearch.js

@@ -81,7 +81,7 @@ const StorySearch = (props) => {
           </div>
         </div>
       </div>
-      <div className={styles.overlay} onClick={props.closeSearch} />
+      <div className={styles.overlay} onClick={props.clearAndCloseSearch} />
     </div>
   );
 };
@@ -89,7 +89,7 @@ const StorySearch = (props) => {
 StorySearch.propTypes = {
   search: PropTypes.func.isRequired,
   goToStory: PropTypes.func.isRequired,
-  closeSearch: PropTypes.func.isRequired,
+  clearAndCloseSearch: PropTypes.func.isRequired,
   moderation: PropTypes.object.isRequired,
   handleSearchChange: PropTypes.func.isRequired,
   assetId: PropTypes.string

client/coral-admin/src/routes/Moderation/containers/StorySearch.js

@@ -13,6 +13,21 @@ class StorySearchContainer extends React.Component {
     };
   }
 
+  componentWillUnmount() {
+    this.props.storySearchChange('');
+  }
+
+  clearSearch = () => {
+    this.setState({searchValue: ''}, () => {
+      this.search();
+    });
+  }
+
+  clearAndCloseSearch = () => {
+    this.clearSearch();
+    this.props.closeSearch();
+  }
+
   handleSearchChange = (e) => {
     const {value} = e.target;
     this.setState({
@@ -23,7 +38,7 @@ class StorySearchContainer extends React.Component {
   handleEsc = (e) => {
     if (e.key === 'Escape') {
       e.preventDefault();
-      this.props.closeSearch();
+      this.clearAndCloseSearch();
     }
   }
 
@@ -40,15 +55,15 @@ class StorySearchContainer extends React.Component {
   }
 
   goToStory = (id) => {
-    const {router, closeSearch} = this.props;
+    const {router} = this.props;
     router.push(`/admin/moderate/all/${id}`);
-    closeSearch();
+    this.clearAndCloseSearch();
   }
 
   goToModerateAll = () => {
-    const {router, closeSearch} = this.props;
+    const {router} = this.props;
     router.push('/admin/moderate/all');
-    closeSearch();
+    this.clearAndCloseSearch();
   }
 
   render () {
@@ -61,6 +76,7 @@ class StorySearchContainer extends React.Component {
         handleEnter={this.handleEnter}
         searchValue={this.state.searchValue}
         handleSearchChange={this.handleSearchChange}
+        clearAndCloseSearch={this.clearAndCloseSearch}
         {...this.props}
       />
     );