diff --git a/src/components/AutosuggestTextBox/AutosuggestTextBox.js b/src/components/AutosuggestTextBox/AutosuggestTextBox.js index 446d4fdd7..6e9cff85b 100644 --- a/src/components/AutosuggestTextBox/AutosuggestTextBox.js +++ b/src/components/AutosuggestTextBox/AutosuggestTextBox.js @@ -96,26 +96,26 @@ export default class AutosuggestTextBox extends Component { dropdownItems(getItemProps) { const isChecked = (result) => { const isAllOption = result.id === FILTER_SEARCH_ALL - + if (this.props.multiselect) { const isItemSelected = this.props.multiselect.includes(result.id) const isPreferredTag = preferredResults.some((preferredResult) => preferredResult.id === result.id) - + if (!_isEmpty(preferredResults)) { return isPreferredTag && (this.props.multiselect.length === 0 || isItemSelected) } else { return this.props.multiselect.length === 0 ? isAllOption : isItemSelected } } - + return isAllOption } - + const generateResult = (result, className = "", index) => { if (this.state.highlightResult === index) { className += this.props.highlightClassName } - + return !_isEmpty(result) ? ( ) : null } - + let items = [] const searchResults = this.getSearchResults() const preferredResults = this.getPreferredResults() - + // Filter preferredResults based on user input const filteredPreferredResults = preferredResults.filter((result) => result.toLowerCase().includes(this.props.inputValue.toLowerCase()) ) - + searchResults.sort((a, b) => { if (a.id === FILTER_SEARCH_ALL) return -1 if (b.id === FILTER_SEARCH_ALL) return 1 @@ -160,13 +160,12 @@ export default class AutosuggestTextBox extends Component { if (b.name === this.props.inputValue) return 1 return isChecked(b) - isChecked(a) }) - + if (!_isEmpty(filteredPreferredResults)) { let className = "mr-font-medium" items = items.concat( _map(filteredPreferredResults, (result, index) => { - // Add a border bottom to the last entry if there are more - // search results. + // Add a border bottom to the last entry if there are more search results. if (index === filteredPreferredResults.length - 1 && filteredPreferredResults.length > 0) { className += " mr-border-b-2 mr-border-white-50 mr-mb-2 mr-pb-2" } @@ -174,36 +173,31 @@ export default class AutosuggestTextBox extends Component { }) ) } - - // Now concatenate all other search results, but the index will be offset by the - // preferred results length. - items = items.concat( - _map(searchResults, (result, index) => generateResult(result, "", index + filteredPreferredResults.length)) - ) - + + // Now concatenate all other search results, but the index will be offset by the preferred results length. + items = items.concat(_map(searchResults, + (result, index) => generateResult(result, "", index + filteredPreferredResults.length) + )) + return items } - + getPreferredResults = () => { // Filter out any tags that have already been selected. const preferredResults = _clone(this.props.preferredResults) || [] return _difference(preferredResults, _split(this.props.formData, ',')) } - + getSearchResults = () => { - // If we are limiting tags to just preferred we don't need to provide - // any search results + // If we are limiting tags to just preferred we don't need to provide any search results if (this.props.limitToPreferred) { return [] } - - // Filter out any of our original preferredResults tags so they don't show - // in the list twice. - return _filter(this.props.searchResults, - t => _indexOf(this.props.preferredResults, t.name) === -1) - + + // Filter out any of our original preferredResults tags so they don't show in the list twice. + return _filter(this.props.searchResults, t => _indexOf(this.props.preferredResults, t.name) === -1) } - + render() { return (