Add showSuggestionsWhenValueIsSet prop, used to control autocomplete filter behaviour when multiple=false

components/autocomplete/Autocomplete.js

@@ -22,6 +22,7 @@ class Autocomplete extends React.Component {
    multiple: React.PropTypes.bool,
    onChange: React.PropTypes.func,
    selectedPosition: React.PropTypes.oneOf(['above', 'below']),
+   showSuggestionsWhenValueIsSet: React.PropTypes.bool,
    source: React.PropTypes.any,
    value: React.PropTypes.any
  };
@@ -31,13 +32,14 @@ class Autocomplete extends React.Component {
    direction: 'auto',
    selectedPosition: 'above',
    multiple: true,
+   showSuggestionsWhenValueIsSet: false,
    source: {}
  };
 
  state = {
    direction: this.props.direction,
    focus: false,
-   showAllSuggestions: true,
+   showAllSuggestions: this.props.showSuggestionsWhenValueIsSet,
    query: this.query(this.props.value)
  };
 
@@ -63,7 +65,7 @@ class Autocomplete extends React.Component {
    const query = this.query(key);
    if (this.props.onChange) this.props.onChange(key, event);
    this.setState(
-     {focus: false, query, showAllSuggestions: true},
+     {focus: false, query, showAllSuggestions: this.props.showSuggestionsWhenValueIsSet},
      () => { this.refs.input.blur(); }
    );
  };

components/autocomplete/readme.md

@@ -50,6 +50,7 @@ class AutocompleteTest extends React.Component {
 | `onChange`          | `Function`             |                 | Callback function that is fired when the components's value changes.|
 | `source`            | `Object` or `Array`    |                 | Object of key/values or array representing all items suggested. |
 | `selectedPosition`  | `String`               |  `above`        | Determines if the selected list is shown above or below input. It can be `above` or `below`. |
+| `showSuggestionsWhenValueIsSet` | `Bool`     | `false`         | If true, the list of suggestions will not be filtered when a value is selected, until the query is modified. |
 | `value`             | `String` or `Array`    |                 | Value or array of values currently selected component.|
 
 Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.

react-toolbox.d.ts

@@ -171,6 +171,11 @@ declare namespace __RT {
          *  Object of key/values or array representing all items suggested.
          */
         source: Object | Array<any>,
+        /**
+         * If true, the list of suggestions will not be filtered when a value is selected, until the query is modified.
+         * @default false
+         */
+        showSuggestionsWhenValueIsSet?: boolean,
         /**
          * Type of the input element. It can be a valid HTML5 input type
          * @default text

spec/components/autocomplete.js

@@ -38,6 +38,7 @@ class AutocompleteTest extends React.Component {
           onChange={this.handleSimpleChange}
           source={countriesArray}
           value={this.state.simple}
+          showSuggestionsWhenValueIsSet
         />
       </section>
     );