diff --git a/src/Autosuggest.js b/src/Autosuggest.js
index 90c172c7..433e43c9 100644
--- a/src/Autosuggest.js
+++ b/src/Autosuggest.js
@@ -42,6 +42,7 @@ export default class Autosuggest extends Component {
);
}
},
+ shouldKeepSuggestionsOnSelect: PropTypes.func,
onSuggestionSelected: PropTypes.func,
onSuggestionHighlighted: PropTypes.func,
renderInputComponent: PropTypes.func,
@@ -101,6 +102,7 @@ export default class Autosuggest extends Component {
shouldRenderSuggestions: defaultShouldRenderSuggestions,
alwaysRenderSuggestions: false,
multiSection: false,
+ shouldKeepSuggestionsOnSelect: () => false,
focusInputOnSuggestionClick: true,
highlightFirstSuggestion: false,
theme: defaultTheme,
@@ -415,7 +417,11 @@ export default class Autosuggest extends Component {
onSuggestionSelected && onSuggestionSelected(event, data);
- if (alwaysRenderSuggestions) {
+ const keepSuggestionsOnSelect = this.props.shouldKeepSuggestionsOnSelect(
+ data.suggestion
+ );
+
+ if (alwaysRenderSuggestions || keepSuggestionsOnSelect) {
onSuggestionsFetchRequested({
value: data.suggestionValue,
reason: REASON_SUGGESTION_SELECTED,
@@ -446,7 +452,11 @@ export default class Autosuggest extends Component {
method: 'click',
});
- if (!alwaysRenderSuggestions) {
+ const keepSuggestionsOnSelect = this.props.shouldKeepSuggestionsOnSelect(
+ clickedSuggestion
+ );
+
+ if (!(alwaysRenderSuggestions || keepSuggestionsOnSelect)) {
this.closeSuggestions();
}
diff --git a/test/keep-suggestions-on-select/AutosuggestApp.js b/test/keep-suggestions-on-select/AutosuggestApp.js
new file mode 100644
index 00000000..8890944c
--- /dev/null
+++ b/test/keep-suggestions-on-select/AutosuggestApp.js
@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import Autosuggest from '../../src/Autosuggest';
+import { escapeRegexCharacters } from '../../demo/src/components/utils/utils';
+import languages from '../plain-list/languages';
+import sinon from 'sinon';
+import { addEvent } from '../helpers';
+
+const getMatchingLanguages = (value) => {
+ const escapedValue = escapeRegexCharacters(value.trim());
+ const regex = new RegExp('^' + escapedValue, 'i');
+
+ return languages.filter((language) => regex.test(language.name));
+};
+
+let app = null;
+
+export const getSuggestionValue = (suggestion) => suggestion.name;
+
+export const renderSuggestion = (suggestion) => {suggestion.name};
+
+export const onChange = sinon.spy((event, { newValue }) => {
+ addEvent('onChange');
+
+ app.setState({
+ value: newValue,
+ });
+});
+
+export const onSuggestionsFetchRequested = ({ value }) => {
+ app.setState({
+ suggestions: getMatchingLanguages(value),
+ });
+};
+
+export const onSuggestionsClearRequested = () => {
+ app.setState({
+ suggestions: [],
+ });
+};
+
+export const shouldKeepSuggestionsOnSelect = (suggestion) => {
+ return suggestion.name.toLowerCase().startsWith('clo');
+};
+
+export default class AutosuggestApp extends Component {
+ constructor() {
+ super();
+
+ app = this;
+
+ this.state = {
+ value: '',
+ suggestions: [],
+ };
+ }
+
+ render() {
+ const { value, suggestions } = this.state;
+ const inputProps = {
+ value,
+ onChange,
+ };
+
+ return (
+
+ );
+ }
+}
diff --git a/test/keep-suggestions-on-select/AutosuggestApp.test.js b/test/keep-suggestions-on-select/AutosuggestApp.test.js
new file mode 100644
index 00000000..ae5df40d
--- /dev/null
+++ b/test/keep-suggestions-on-select/AutosuggestApp.test.js
@@ -0,0 +1,34 @@
+import {
+ clickSuggestion,
+ focusAndSetInputValue,
+ getSuggestions,
+ init,
+} from '../helpers';
+import TestUtils from 'react-dom/test-utils';
+import AutosuggestApp from './AutosuggestApp';
+import { expect } from 'chai';
+import React from 'react';
+
+describe('Autosuggest with custom shouldKeepSuggestionsOnSelect', () => {
+ beforeEach(() => {
+ init(TestUtils.renderIntoDocument());
+ });
+
+ describe('when keep opened for starts with `clo` suggestions', () => {
+ it('should keep suggestions on select', () => {
+ focusAndSetInputValue('clo');
+ clickSuggestion(0);
+ const suggestions = getSuggestions();
+
+ expect(suggestions.length).to.equal(1);
+ });
+
+ it('should not suggestions on select', () => {
+ focusAndSetInputValue('php');
+ clickSuggestion(0);
+ const suggestions = getSuggestions();
+
+ expect(suggestions.length).to.equal(0);
+ });
+ });
+});