fix search form clearing

packages/vulcan-base-components/lib/common/SearchForm.jsx

@@ -1,9 +1,9 @@
-import { registerComponent } from 'meteor/vulcan:core';
+import { registerComponent, Components } from 'meteor/vulcan:core';
 import React, { PropTypes, Component } from 'react';
 import { intlShape } from 'react-intl';
 import Formsy from 'formsy-react';
 import FRC from 'formsy-react-components';
-import { withRouter } from 'react-router'
+import { withRouter, Link } from 'react-router'
 
 const Input = FRC.Input;
 
@@ -26,6 +26,7 @@ class SearchForm extends Component{
     }
   }
 
+  // note: why do we need this?
   componentWillReceiveProps(nextProps) {
     this.setState({
       search: this.props.router.location.query.query || ''
@@ -35,7 +36,10 @@ class SearchForm extends Component{
   search(data) {
 
     const router = this.props.router;
-    const query = data.searchQuery === '' ? router.location.query : {...router.location.query, query: data.searchQuery};
+    const routerQuery = _.clone(router.location.query);
+    delete routerQuery.query;
+
+    const query = data.searchQuery === '' ? routerQuery : {...routerQuery, query: data.searchQuery};
 
     delay(() => {
       router.push({pathname: "/", query: query});
@@ -44,6 +48,10 @@ class SearchForm extends Component{
   }
 
   render() {
+
+    const resetQuery = _.clone(this.props.location.query);
+    delete resetQuery.query;
+
     return (
       <div className="search-form">
         <Formsy.Form onChange={this.search}>
@@ -54,6 +62,7 @@ class SearchForm extends Component{
             type="text"
             layout="elementOnly"
           />
+          {this.state.search !== '' ? <Link className="search-form-reset" to={{pathname: '/', query: resetQuery}}><Components.Icon name="close" /></Link> : null}
         </Formsy.Form>
       </div>
     )

packages/vulcan-base-styles/lib/stylesheets/_forms.scss

@@ -101,4 +101,14 @@ div.ReactTags__suggestions mark{
   strong{
     font-weight: normal;
   }
+}
+
+.search-form{
+  position: relative;
+  .search-form-reset{
+    position: absolute;
+    top: 6px;
+    right: 5px;
+    color: $light-grey;
+  }
 }