enable to submit with a search button

src/client/js/components/SearchForm.js

@@ -68,10 +68,10 @@ export default class SearchForm extends React.Component {
 
     return (
       <SearchTypeahead
-        ref = 'searchTypeahead'
         crowi={this.props.crowi}
         onChange={this.onChange}
         onSubmit={this.props.onSubmit}
+        onInputChange={this.props.onInputChange}
         onSearchError={this.onSearchError}
         emptyLabel={emptyLabel}
         placeholder="Search ..."
@@ -86,6 +86,7 @@ SearchForm.propTypes = {
   crowi: PropTypes.object.isRequired,
   keyword: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func,
 };
 
 SearchForm.defaultProps = {

src/client/js/components/SearchPage/SearchPageForm.js

@@ -9,10 +9,13 @@ export default class SearchPageForm extends React.Component {
     super(props);
 
     this.state = {
+      keyword: this.props.keyword,
       searchedKeyword: this.props.keyword,
     };
 
     this.search = this.search.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+    this.onInputChange = this.onInputChange.bind(this);
   }
 
   search(keyword) {
@@ -22,6 +25,15 @@ export default class SearchPageForm extends React.Component {
     }
   }
 
+  onSubmit(event) { // submit with button
+    event.preventDefault(); // prevent refreshing page
+    this.search(this.state.keyword);
+  }
+
+  onInputChange(input) {
+    this.setState({keyword: input});
+  }
+
   render() {
     return (
       <form ref='form'
@@ -29,10 +41,10 @@ export default class SearchPageForm extends React.Component {
         onSubmit={this.onSubmit}
       >
         <SearchForm
-          ref='searchForm'
           crowi={this.props.crowi}
           onSubmit={this.search}
           keyword={this.state.searchedKeyword}
+          onInputChange={this.onInputChange}
         />
         <span className="input-group-btn">
           <button type="submit" className="btn btn-default">

src/client/js/components/SearchTypeahead.js

@@ -92,6 +92,7 @@ export default class SearchTypeahead extends React.Component {
 
   onInputChange(text) {
     this.setState({input: text});
+    this.props.onInputChange(text);
     if (text === '') {
       this.setState({pages: []});
     }
@@ -186,6 +187,7 @@ SearchTypeahead.propTypes = {
   onSearchError:   PropTypes.func,
   onChange:        PropTypes.func,
   onSubmit:        PropTypes.func,
+  onInputChange:   PropTypes.func,
   emptyLabel:      PropTypes.string,
   placeholder:     PropTypes.string,
   keywordOnInit:   PropTypes.string,