in src/amo/components/AutoSearchInput/index.js [197:312]
iconUrl: getAddonIconUrl(),
name: this.props.i18n.gettext('Loading'),
promoted: null,
url: undefined,
});
}
return this.props.suggestions;
}
handleSearch: HTMLElementEventHandler = (event: ElementEvent) => {
event.preventDefault();
if (this.searchInput) {
// When submitting the form to view all search results, blurring
// the input will hide the suggestion results menu.
//
// TODO: We may be able to blur this without relying on a ref soon:
// https://github.com/moroshko/react-autosuggest/issues/370
//
// The method for obtaining this ref is undocumented but the
// library author suggests it in this comment:
// https://github.com/moroshko/react-autosuggest/issues/158#issuecomment-219322960
this.searchInput.blur();
}
const { onSearch } = this.props;
if (onSearch) {
const filters = this.createFiltersFromQuery(
this.state.searchValue.trim(),
);
onSearch(filters);
}
};
handleSearchChange: (event: ElementEvent, OnSearchChangeParams) => void = (
event: ElementEvent,
{ newValue }: OnSearchChangeParams,
) => {
const searchValue = newValue || '';
if (searchValue.trim().length <= SEARCH_TERM_MAX_LENGTH) {
this.setState({ searchValue });
}
};
handleSuggestionSelected: (
event: ElementEvent,
{| suggestion: SuggestionType |},
) => void = (
event: ElementEvent,
{ suggestion }: {| suggestion: SuggestionType |},
) => {
event.preventDefault();
if (this.props.loadingSuggestions) {
log.debug('Ignoring a click on the suggestion while loading');
return;
}
this.setState({ autocompleteIsOpen: false, searchValue: '' });
this.props.onSuggestionSelected(suggestion);
};
renderSuggestion: (suggestion: SuggestionType) => React.Node = (
suggestion: SuggestionType,
) => {
const { loadingSuggestions, selectSuggestionText } = this.props;
return (
<SearchSuggestion
arrowAlt={selectSuggestionText}
loading={loadingSuggestions}
suggestion={suggestion}
/>
);
};
render(): React.Node {
const {
errorHandler,
i18n,
inputLabelText,
inputName,
inputPlaceholder,
showInputLabel,
} = this.props;
const autocompleteIsOpen =
this.state.autocompleteIsOpen &&
// This prevents the input to look like Autosuggest is open when
// there are no results coming from the API.
this.getSuggestions().length > 0;
const inputProps = {
className: 'AutoSearchInput-query',
id: `AutoSearchInput-${inputName}`,
maxLength: SEARCH_TERM_MAX_LENGTH,
minLength: SEARCH_TERM_MIN_LENGTH,
name: inputName,
onChange: this.handleSearchChange,
placeholder: inputPlaceholder || i18n.gettext('Find add-ons'),
type: 'search',
value: this.state.searchValue,
};
const theme = {
suggestionContainer: 'AutoSearchInput-suggestions',
suggestionsList: 'AutoSearchInput-suggestions-list',
suggestion: 'AutoSearchInput-suggestions-item',
suggestionHighlighted: 'AutoSearchInput-suggestions-item--highlighted',
};
return (
<div
className={makeClassName('AutoSearchInput', {