Merge pull request #1364 from leesiongchan/extend-creatable

Add onNewOptionClick handler

README.md

@@ -221,6 +221,7 @@ Property | Type | Description
 `isOptionUnique` | function | Searches for any matching option within the set of options. This function prevents duplicate options from being created. By default this is a basic, case-sensitive comparison of label and value. Expected signature: `({ option: Object, options: Array, labelKey: string, valueKey: string }): boolean` |
 `isValidNewOption` | function | Determines if the current input text represents a valid option. By default any non-empty string will be considered valid. Expected signature: `({ label: string }): boolean` |
 `newOptionCreator` | function | Factory to create new option. Expected signature: `({ label: string, labelKey: string, valueKey: string }): Object` |
+`onNewOptionClick` | function | new option click handler, it calls when new option has been selected. `function(option) {}` |
 `shouldKeyDownEventCreateNewOption` | function | Decides if a keyDown event (eg its `keyCode`) should result in the creation of a new option. ENTER, TAB and comma keys create new options by default. Expected signature: `({ keyCode: number }): boolean` |
 `promptTextCreator` | function | Factory for overriding default option creator prompt label. By default it will read 'Create option "{label}"'. Expected signature: `(label: String): String` |
 

src/Creatable.js

@@ -37,6 +37,9 @@ const Creatable = React.createClass({
 		// input keyDown handler: function (event) {}
 		onInputKeyDown: React.PropTypes.func,
 
+		// new option click handler: function (option) {}
+		onNewOptionClick: React.PropTypes.func,
+
 		// See Select.propTypes.options
 		options: React.PropTypes.array,
 
@@ -73,6 +76,7 @@ const Creatable = React.createClass({
 		const {
 			isValidNewOption,
 			newOptionCreator,
+			onNewOptionClick,
 			options = [],
 			shouldKeyDownEventCreateNewOption
 		} = this.props;
@@ -83,9 +87,13 @@ const Creatable = React.createClass({
 
 			// Don't add the same option twice.
 			if (isOptionUnique) {
-				options.unshift(option);
+				if (onNewOptionClick) {
+					onNewOptionClick(option);
+				} else {
+					options.unshift(option);
 
-				this.select.selectValue(option);
+					this.select.selectValue(option);
+				}
 			}
 		}
 	},