Add create option to autocomplete

components/autocomplete/Autocomplete.js

@@ -27,6 +27,7 @@ const factory = (Chip, Input) => {
      showSuggestionsWhenValueIsSet: PropTypes.bool,
      source: PropTypes.any,
      suggestionMatch: PropTypes.oneOf(['start', 'anywhere', 'word']),
+     create: PropTypes.bool,
      theme: PropTypes.shape({
        active: PropTypes.string,
        autocomplete: PropTypes.string,
@@ -117,6 +118,9 @@ const factory = (Chip, Input) => {
        let target = this.state.active;
        if (!target) {
          target = [...this.suggestions().keys()][0];
+         if (this.props.create && !target){
+           target = this.state.query;
+         }
          this.setState({active: target});
        }
        this.select(target, event);
@@ -272,7 +276,7 @@ const factory = (Chip, Input) => {
      const {
       error, label, source, suggestionMatch,           //eslint-disable-line no-unused-vars
       selectedPosition, showSuggestionsWhenValueIsSet, //eslint-disable-line no-unused-vars
-      theme, ...other
+      theme, create, ...other
     } = this.props;
      const className = classnames(theme.autocomplete, {
        [theme.focus]: this.state.focus

components/autocomplete/readme.md

@@ -55,6 +55,7 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 | `showSuggestionsWhenValueIsSet` | `Bool`     | `false`         | If true, the list of suggestions will not be filtered when a value is selected, until the query is modified. |
 | `suggestionMatch`   | `String`               | `start`         | Determines how suggestions are supplied. It can be `start` (query matches the start of a suggestion), `anywhere` (query matches anywhere inside the suggestion), or `word` (query matches the start of a word in the suggestion). |
 | `value`             | `String` or `Array`    |                 | Value or array of values currently selected component.|
+| `create`            | `Bool`  | `false` | Determines if user can create a new option by typing in the field
 
 Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
 

lib/autocomplete/Autocomplete.js

@@ -104,6 +104,9 @@ var factory = function factory(Chip, Input) {
           var target = _this.state.active;
           if (!target) {
             target = [].concat(_toConsumableArray(_this.suggestions().keys()))[0];
+            if (_this.props.create && !target) {
+              target = _this.state.query;
+            }
             _this.setState({ active: target });
           }
           _this.select(target, event);
@@ -158,7 +161,8 @@ var factory = function factory(Chip, Input) {
     }, {
       key: 'query',
       value: function query(key) {
-        return !this.props.multiple && key ? this.source().get(key) : '';
+        var value = this.props.create && !this.source().get(key) ? key : this.source().get(key);
+        return !this.props.multiple && key ? value : '';
       }
     }, {
       key: 'suggestions',
@@ -397,8 +401,9 @@ var factory = function factory(Chip, Input) {
         var selectedPosition = _props.selectedPosition;
         var showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet;
         var theme = _props.theme;
+        var create = _props.create;
 
-        var other = _objectWithoutProperties(_props, ['error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme']);
+        var other = _objectWithoutProperties(_props, ['error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme', 'create']);
 
         var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);
 
@@ -439,6 +444,7 @@ var factory = function factory(Chip, Input) {
     showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
     source: _react.PropTypes.any,
     suggestionMatch: _react.PropTypes.oneOf(['start', 'anywhere', 'word']),
+    create: _react.PropTypes.bool,
     theme: _react.PropTypes.shape({
       active: _react.PropTypes.string,
       autocomplete: _react.PropTypes.string,

spec/components/autocomplete.js

@@ -1,19 +1,24 @@
 import React from 'react';
 import Autocomplete from '../../components/autocomplete';
 
-const countriesArray = ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'];
-const countriesObject = {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England',
-  'EN-en': 'United States of America', 'EN-nz': 'New Zealand'};
-
 class AutocompleteTest extends React.Component {
   state = {
     simple: 'Spain',
     simpleShowAll: 'England',
-    multiple: ['ES-es', 'TH-th']
+    multiple: ['ES-es', 'TH-th'],
+    countriesArray: ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'],
+    countriesObject: {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England',
+      'EN-en': 'United States of America', 'EN-nz': 'New Zealand'}
   };
 
   handleMultipleChange = (value) => {
-    this.setState({multiple: value});
+    this.setState({
+      multiple: value,
+      countriesObject: {
+        ...this.state.countriesObject,
+        ...!this.state.countriesObject[value[0]] ? {[value[0]]: value[0]} : {}
+      }
+    });
   };
 
   handleSimpleChange = (value) => {
@@ -33,9 +38,10 @@ class AutocompleteTest extends React.Component {
         <Autocomplete
           onChange={this.handleMultipleChange}
           label="Pick multiple elements..."
-          source={countriesObject}
+          source={this.state.countriesObject}
           value={this.state.multiple}
           suggestionMatch="anywhere"
+          create={true}
         />
 
         <Autocomplete
@@ -43,7 +49,7 @@ class AutocompleteTest extends React.Component {
           hint="Elements up to you..."
           multiple={false}
           onChange={this.handleSimpleChange}
-          source={countriesArray}
+          source={this.state.countriesArray}
           value={this.state.simple}
         />
 
@@ -52,7 +58,7 @@ class AutocompleteTest extends React.Component {
           hint="Elements up to you..."
           multiple={false}
           onChange={this.handleSimpleShowAllChange}
-          source={countriesArray}
+          source={this.state.countriesArray}
           value={this.state.simpleShowAll}
           showSuggestionsWhenValueIsSet
         />