From c9fb3c4c503e5de69a2ecda482969928f9c96390 Mon Sep 17 00:00:00 2001 From: Ayush Sharma Date: Sat, 11 May 2019 08:59:39 +0200 Subject: [PATCH] fix: search suggestion container height (#54) * fix: search suggestion container height * fix: updates snapshot --- src/webui/components/AutoComplete/index.js | 7 +++---- src/webui/components/AutoComplete/styles.js | 8 ++++++++ test/unit/components/__snapshots__/search.spec.js.snap | 2 +- 3 files changed, 12 insertions(+), 5 deletions(-) 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`] = `"
"`;