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