Merge pull request moroshko#780 from moofspb/master

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();
     }
 

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) => <span>{suggestion.name}</span>;
+
+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 (
+      <Autosuggest
+        suggestions={suggestions.slice()}
+        onSuggestionsFetchRequested={onSuggestionsFetchRequested}
+        onSuggestionsClearRequested={onSuggestionsClearRequested}
+        getSuggestionValue={getSuggestionValue}
+        renderSuggestion={renderSuggestion}
+        inputProps={inputProps}
+        shouldKeepSuggestionsOnSelect={shouldKeepSuggestionsOnSelect}
+      />
+    );
+  }
+}

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(<AutosuggestApp />));
+  });
+
+  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);
+    });
+  });
+});