Add scroll bar to geotags autosuggest

src/components/add-tag-modal/form/geotag/select.js

@@ -66,7 +66,7 @@ export default class GeotagSelect extends Component {
     const client = new ApiClient(API_HOST);
     const response = await client.searchGeotags(value.trim());
 
-    this.setState({ suggestions: response.geotags.slice(0, 5) });
+    this.setState({ suggestions: response.geotags });
   }, 300);
 
   _getSuggestionValue = (geotag) => geotag.name;
@@ -114,6 +114,10 @@ export default class GeotagSelect extends Component {
       value: this.state.value
     };
 
+    const theme = {
+      suggestionsContainer: 'autosuggest__suggestions_container autosuggest__suggestions_container-with-scroll'
+    };
+
     return (
       <div>
         <input name="geotag" type="hidden" value={this.state.geotagId} />
@@ -122,6 +126,7 @@ export default class GeotagSelect extends Component {
           inputProps={inputProps}
           renderSuggestion={this._renderSuggestion}
           suggestions={this.state.suggestions}
+          theme={theme}
           onSuggestionSelected={this._handleSelect}
           onSuggestionsUpdateRequested={this._getSuggestions}
           {...this.props}

src/components/autosuggest.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactAutosuggest from 'react-autosuggest';
-
+import { omit } from 'lodash';
 
 const theme = {
   container: 'autosuggest__container',
@@ -14,8 +14,15 @@ const theme = {
   sectionSuggestionsContainer: 'autosuggest__section_suggestions_container'
 };
 
-export default function Autosuggest(props) {
+function Autosuggest(props) {
+  const combinedTheme = Object.assign(theme, props.theme);
+  props = omit(props, 'theme');
+
   return (
-    <ReactAutosuggest theme={theme} {...props} />
+    <ReactAutosuggest theme={combinedTheme} {...props} />
   );
 }
+
+Autosuggest.propTypes = ReactAutosuggest.propTypes;
+
+export default Autosuggest;

src/less/blocks/autosuggest.less

@@ -28,6 +28,11 @@
     border-bottom-left-radius: @border-radius;
     border-bottom-right-radius: @border-radius;
     z-index: 1000;
+
+    &-with-scroll {
+      max-height: 200px;
+      overflow-y: scroll;
+    }
   }
 
   &__section {