From 9b6612c1b5e5f8b335e1ad5226f9806f57a54053 Mon Sep 17 00:00:00 2001 From: Ayush Sharma Date: Fri, 10 May 2019 23:43:28 +0200 Subject: [PATCH 1/2] fix: search suggestion container height --- src/webui/components/AutoComplete/index.js | 7 +++---- src/webui/components/AutoComplete/styles.js | 8 ++++++++ 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/webui/components/AutoComplete/index.js b/src/webui/components/AutoComplete/index.js index 52ab90cdd..dbe7bbb5a 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 c0e45de11..d82c5e223 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; + } +`; From 7bf4a36ee38b2ba4f91e90940f068f7fd652112e Mon Sep 17 00:00:00 2001 From: Ayush Sharma Date: Fri, 10 May 2019 23:49:59 +0200 Subject: [PATCH 2/2] fix: updates snapshot --- test/unit/components/__snapshots__/search.spec.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/unit/components/__snapshots__/search.spec.js.snap b/test/unit/components/__snapshots__/search.spec.js.snap index baea56d22..c77bd6923 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`] = `"
"`;