* ============LICENSE_END=========================================================
*/
import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
import {Button} from 'react-bootstrap';
import AutoSuggest from 'react-autosuggest';
import Highlighter from 'react-highlight-words';
export default class AutoCompleteSearchBar extends Component {
static propTypes = {
- value: React.PropTypes.string,
- suggestions: React.PropTypes.array,
- cachedSuggestions: React.PropTypes.array,
- suggestionName: React.PropTypes.string
+ value: PropTypes.string,
+ suggestions: PropTypes.array,
+ cachedSuggestions: PropTypes.array,
+ suggestionName: PropTypes.string
};
componentWillMount() {
render() {
const {
- value, suggestions,
- suggestionName, cachedSuggestions,
- onInputChange, onInvalidSearch,
- onClearSuggestionsTextFieldRequested,
- onSuggestionsClearRequested,
- dispatchAnalytics
- } = this.props;
+ value, suggestions,
+ suggestionName, cachedSuggestions,
+ onInputChange, onInvalidSearch,
+ onClearSuggestionsTextFieldRequested,
+ onSuggestionsClearRequested,
+ dispatchAnalytics
+ } = this.props;
const inputProps = {
placeholder: SEARCH_PLACEHOLDER_TEXT,
value,
<Highlighter key={arrayIndex + 'high'}
highlightClassName='highlight'
searchWords={toHighLightArray}
- textToHighlight={suggestionTextArray[arrayIndex]}/>
+ textToHighlight={suggestionTextArray[arrayIndex]}
+ autoEscape={true}/>
{ ++arrayIndex ? ' ' : ' '}
</span>);
<Highlighter key={arrayIndex + 'high'}
highlightClassName='highlight'
searchWords={toHighLightArray}
- textToHighlight={suggestionTextArray[arrayIndex]}/>
+ textToHighlight={suggestionTextArray[arrayIndex]}
+ autoEscape={true}/>
{ ++arrayIndex ? ' ' : ' '}
</span>);
rest.className = 'react-autosuggest__suggestions-containerCopy';
}
return (
- <div {...rest}>
+ <div {...rest.containerProps} {...rest}>
{children}
</div>
);