migrate react-bootstrap-typeahead to v2

resource/css/_search.scss

@@ -1,3 +1,6 @@
+// import react-bootstrap-typeahead
+@import "~react-bootstrap-typeahead/css/Typeahead";
+
 @import "./page_list";
 
 .search-listpage-icon {
@@ -41,7 +44,7 @@
 
   // using react-bootstrap-typeahead
   // see: https://github.com/ericgio/react-bootstrap-typeahead
-  .bootstrap-typeahead-menu {
+  .rbt-menu {
     li a span {
       .picture {
         width: 14px;
@@ -64,6 +67,10 @@
       }
     }
   }
+  // hide loading icon
+  .rbt-aux {
+    display: none;
+  }
 }
 
 
@@ -152,16 +159,16 @@
   @media (min-width: $screen-sm-max) {
     // using react-bootstrap-typeahead
     // see: https://github.com/ericgio/react-bootstrap-typeahead
-    .bootstrap-typeahead-input input {
-      width: 500px;
+    .rbt-input input {
+      width: 500px !important;
     }
   }
   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
     background-color: #0f0;
     // using react-bootstrap-typeahead
     // see: https://github.com/ericgio/react-bootstrap-typeahead
-    .bootstrap-typeahead-input input {
-      width: 270px;
+    .rbt-input input {
+      width: 270px !important;
     }
   }
   @media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
@@ -175,3 +182,4 @@
     min-width: 120px;
   }
 }
+

resource/css/crowi.scss

@@ -5,12 +5,6 @@
 $bootstrap-sass-asset-helper: true;
 @import "~bootstrap-sass/assets/stylesheets/bootstrap";
 
-// import react-bootstrap-typeahead styles
-@import '~react-bootstrap-typeahead/css/ClearButton';
-@import '~react-bootstrap-typeahead/css/Loader';
-@import '~react-bootstrap-typeahead/css/Token';
-@import '~react-bootstrap-typeahead/css/Typeahead';
-
 // import toastr styles
 @import '~toastr/build/toastr';
 

resource/js/components/HeaderSearchBox/SearchForm.js

@@ -21,6 +21,7 @@ export default class SearchForm extends React.Component {
       keyword: '',
       searchedKeyword: '',
       pages: [],
+      isLoading: false,
       searchError: null,
     };
 
@@ -48,15 +49,20 @@ export default class SearchForm extends React.Component {
       return;
     }
 
+    this.setState({isLoading: true});
+
     this.crowi.apiGet('/search', {q: keyword})
       .then(res => {
         this.setState({
+          isLoading: false,
           keyword: '',
           pages: res.data,
         });
-      }).catch(err => {
+      })
+      .catch(err => {
         this.setState({
-          searchError: err
+          isLoading: false,
+          searchError: err,
         });
       });
   }
@@ -80,10 +86,13 @@ export default class SearchForm extends React.Component {
     this.setState({input: text});
   }
 
-  onChange(options) {
-    const page = options[0];  // should be single page selected
+  onChange(selected) {
+    const page = selected[0];  // should be single page selected
+
     // navigate to page
-    window.location = page.path;
+    if (page != null) {
+      window.location = page.path;
+    }
   }
 
   renderMenuItemChildren(option, props, index) {
@@ -112,7 +121,7 @@ export default class SearchForm extends React.Component {
           <InputGroup>
             <AsyncTypeahead
               ref={ref => this._typeahead = ref}
-              name="q"
+              isLoading={this.state.isLoading}
               labelKey="path"
               minLength={2}
               options={this.state.pages}