diff --git a/src/components/Filter/FilterAutocompleteField.tsx b/src/components/Filter/FilterAutocompleteField.tsx index 0d0b31aeb..7a909c899 100644 --- a/src/components/Filter/FilterAutocompleteField.tsx +++ b/src/components/Filter/FilterAutocompleteField.tsx @@ -1,5 +1,6 @@ import React from "react"; import FormControlLabel from "@material-ui/core/FormControlLabel"; +import Typography from "@material-ui/core/Typography"; import TextField from "@material-ui/core/TextField"; import makeStyles from "@material-ui/core/styles/makeStyles"; import { FormattedMessage } from "react-intl"; @@ -30,6 +31,9 @@ const useStyles = makeStyles( inputContainer: { marginBottom: theme.spacing(1) }, + noResults: { + marginTop: theme.spacing(1) + }, option: { left: -theme.spacing(0.5), position: "relative" @@ -56,9 +60,12 @@ const FilterAutocompleteField: React.FC = ({ displayValue => displayValue.value !== option.value ) ); + const displayNoResults = + availableOptions.length === 0 && fieldDisplayValues.length === 0; const displayHr = !( (fieldDisplayValues.length === 0 && availableOptions.length > 0) || - (availableOptions.length === 0 && fieldDisplayValues.length > 0) + (availableOptions.length === 0 && fieldDisplayValues.length > 0) || + displayNoResults ); const handleChange = (option: MultiAutocompleteChoiceType) => { @@ -110,6 +117,11 @@ const FilterAutocompleteField: React.FC = ({ ))} {displayHr &&
} + {displayNoResults && ( + + + + )} {availableOptions.map(option => (