From add0d20e04fd815bdd85c37a63e71f3f42630825 Mon Sep 17 00:00:00 2001
From: Gertjan van Oosten <gertjan@west.nl>
Date: Tue, 31 Jul 2018 15:57:12 +0200
Subject: [PATCH] NCI-Agency/anet#767: Optimise autosuggest rendering

Remove some unused state, and optimise the rendering of suggestions a bit.
Attempts to address dropped keystrokes under IE11 as reported in NCI-Agency/anet#767
---
 client/src/components/Autocomplete.js | 40 +++++++++++++--------------
 1 file changed, 20 insertions(+), 20 deletions(-)

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 = <span><i>No suggestions found</i></span>
 
 		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 <div style={{position: 'relative'}} ref={(el) => this.container = el}>
 			<img src={SEARCH_ICON} className="form-control-icon" alt="" onClick={this.focus} />
 
 			<Autosuggest
-				suggestions={this.state.noSuggestions ? [{}] : this.state.suggestions}
+				suggestions={this.state.suggestions}
 				onSuggestionsFetchRequested={this.fetchSuggestionsDebounced}
 				onSuggestionsClearRequested={this.clearSuggestions}
 				onSuggestionSelected={this.onSuggestionSelected}
 				getSuggestionValue={this.getStringValue.bind(this, valueKey)}
 				inputProps={inputProps}
 				renderInputComponent={this.renderInputComponent}
-				renderSuggestion={this.renderSuggestion}
+				renderSuggestion={renderSuggestion}
 				focusInputOnSuggestionClick={false}
 			/>
 		</div>
@@ -126,16 +127,16 @@ export default class Autocomplete extends Component {
 
 	@autobind
 	renderSuggestion(suggestion) {
-		if (this.state.noSuggestions) {
-			return <span><i>No suggestions found</i></span>
-		}
+		return _isEmpty(suggestion)
+				? this.noSuggestions
+				: <span>{this.getStringValue(suggestion, this.props.valueKey)}</span>
+	}
 
-		let template = this.props.template
-		if (template) {
-			return template(suggestion)
-		} else {
-			return <span>{this.getStringValue(suggestion, this.props.valueKey)}</span>
-		}
+	@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) {