diff --git a/src/webui/components/AutoComplete/index.js b/src/webui/components/AutoComplete/index.js
index 52ab90c..dbe7bbb 100644
--- a/src/webui/components/AutoComplete/index.js
+++ b/src/webui/components/AutoComplete/index.js
@@ -8,11 +8,10 @@ import type { Node } from 'react';
import Autosuggest from 'react-autosuggest';
import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';
-import Paper from '@material-ui/core/Paper';
import MenuItem from '@material-ui/core/MenuItem';
import { fontWeight } from '../../utils/styles/sizes';
-import { Wrapper, InputField } from './styles';
+import { Wrapper, InputField, SuggestionContainer } from './styles';
import { IProps } from './types';
const renderInputComponent = (inputProps): Node => {
@@ -110,12 +109,12 @@ const AutoComplete = ({
// this format avoid arrow function eslint rule
function renderSuggestionsContainer({ containerProps, children, query }) {
return (
-
+
{suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
{suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
{suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
{children}
-
+
);
}
diff --git a/src/webui/components/AutoComplete/styles.js b/src/webui/components/AutoComplete/styles.js
index c0e45de..d82c5e2 100644
--- a/src/webui/components/AutoComplete/styles.js
+++ b/src/webui/components/AutoComplete/styles.js
@@ -5,6 +5,7 @@
import React from 'react';
import styled, { css } from 'react-emotion';
+import Paper from '@material-ui/core/Paper';
import TextField from '../TextField';
import { IInputField } from './types';
@@ -50,3 +51,10 @@ export const InputField = ({ color, ...others }: IInputField) => (
}}
/>
);
+
+export const SuggestionContainer = styled(Paper)`
+ && {
+ max-height: 500px;
+ overflow-y: scroll;
+ }
+`;
diff --git a/test/unit/components/__snapshots__/search.spec.js.snap b/test/unit/components/__snapshots__/search.spec.js.snap
index baea56d..c77bd69 100644
--- a/test/unit/components/__snapshots__/search.spec.js.snap
+++ b/test/unit/components/__snapshots__/search.spec.js.snap
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[` component test should load the component in default state 1`] = `""`;
+exports[` component test should load the component in default state 1`] = `""`;