diff --git a/client/src/components/Autocomplete.js b/client/src/components/Autocomplete.js
index 927ae755c2..067fd006b2 100644
--- a/client/src/components/Autocomplete.js
+++ b/client/src/components/Autocomplete.js
@@ -5,6 +5,7 @@ import Autosuggest from 'react-autosuggest'
import autobind from 'autobind-decorator'
import _debounce from 'lodash/debounce'
import _isEqual from 'lodash/isEqual'
+import _isEmpty from 'lodash/isEmpty'
import API from 'api'
import utils from 'utils'
@@ -51,6 +52,7 @@ export default class Autocomplete extends Component {
super(props)
this.fetchSuggestionsDebounced = _debounce(this.fetchSuggestions, 200)
+ this.noSuggestions = No suggestions found
const selectedIds = this._getSelectedIds(props)
const value = this._getValue(props)
@@ -58,9 +60,7 @@ export default class Autocomplete extends Component {
this.state = {
suggestions: [],
- noSuggestions: false,
selectedIds: selectedIds,
- value: value,
stringValue: stringValue,
originalStringValue: stringValue,
}
@@ -106,19 +106,20 @@ export default class Autocomplete extends Component {
inputProps.onChange = this.onInputChange
inputProps.onBlur = this.onInputBlur
const { valueKey } = this.props
+ const renderSuggestion = this.props.template ? this.renderSuggestionTemplate : this.renderSuggestion
return
this.container = el}>
@@ -126,16 +127,16 @@ export default class Autocomplete extends Component {
@autobind
renderSuggestion(suggestion) {
- if (this.state.noSuggestions) {
- return No suggestions found
- }
+ return _isEmpty(suggestion)
+ ? this.noSuggestions
+ : {this.getStringValue(suggestion, this.props.valueKey)}
+ }
- let template = this.props.template
- if (template) {
- return template(suggestion)
- } else {
- return {this.getStringValue(suggestion, this.props.valueKey)}
- }
+ @autobind
+ renderSuggestionTemplate(suggestion) {
+ return _isEmpty(suggestion)
+ ? this.noSuggestions
+ : this.props.template(suggestion)
}
@autobind
@@ -156,8 +157,10 @@ export default class Autocomplete extends Component {
if (this.state.selectedIds) {
list = list.filter(suggestion => suggestion && suggestion.id && this.state.selectedIds.indexOf(suggestion.id) === -1)
}
- let noSuggestions = list.length === 0
- this.setState({suggestions: list, noSuggestions})
+ if (!list.length) {
+ list = [{}] // use an empty object so we render the 'noSuggestions' text
+ }
+ this.setState({suggestions: list})
}
@autobind
@@ -206,11 +209,8 @@ export default class Autocomplete extends Component {
event.preventDefault()
let stringValue = this.props.clearOnSelect ? '' : suggestionValue
-// if (this.state.noSuggestions && stringValue !== ''){
-// return
-// }
this.currentSelected = suggestion
- this.setState({value: suggestion, stringValue})
+ this.setState({stringValue: stringValue})
if (this.props.onChange) {
this.props.onChange(suggestion)
@@ -256,7 +256,7 @@ export default class Autocomplete extends Component {
if (val) {
if (val === this.state.originalStringValue) { return }
- this.setState({value: val, stringValue: val})
+ this.setState({stringValue: val})
if (this.props.onErrorChange) {
this.props.onErrorChange(true, val)
} else if (this.props.onChange) {