From 06f429cf26cc77eef749c5ec52d4858daa87265d Mon Sep 17 00:00:00 2001
From: Ryan Zec <code@ryanzec.com>
Date: Wed, 1 Jun 2016 14:34:06 -0400
Subject: [PATCH 1/6] adding back in the allowCreate functionality

---
 examples/src/app.js                    |  2 +
 examples/src/components/AllowCreate.js | 61 ++++++++++++++++++++++++++
 src/Option.js                          | 25 ++++++-----
 src/Select.js                          | 27 ++++++++++--
 test/Select-test.js                    | 29 +++---------
 5 files changed, 106 insertions(+), 38 deletions(-)
 create mode 100644 examples/src/components/AllowCreate.js

diff --git a/examples/src/app.js b/examples/src/app.js
index bfda0ce816..628f34b60f 100644
--- a/examples/src/app.js
+++ b/examples/src/app.js
@@ -12,6 +12,7 @@ import Multiselect from './components/Multiselect';
 import NumericSelect from './components/NumericSelect';
 import Virtualized from './components/Virtualized';
 import States from './components/States';
+import AllowCreate from './components/AllowCreate';
 
 ReactDOM.render(
 	<div>
@@ -26,6 +27,7 @@ ReactDOM.render(
 		{/*
 		<SelectedValuesField label="Option Creation (tags mode)" options={FLAVOURS} allowCreate hint="Enter a value that's NOT in the list, then hit return" />
 		*/}
+		<AllowCreate label="Option Creation (tags mode)" allowCreate />
 	</div>,
 	document.getElementById('example')
 );
diff --git a/examples/src/components/AllowCreate.js b/examples/src/components/AllowCreate.js
new file mode 100644
index 0000000000..4cab93a320
--- /dev/null
+++ b/examples/src/components/AllowCreate.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import Select from 'react-select';
+
+const FLAVOURS = [
+	{ label: 'Chocolate', value: 'chocolate' },
+	{ label: 'Vanilla', value: 'vanilla' },
+	{ label: 'Strawberry', value: 'strawberry' },
+	{ label: 'Caramel', value: 'caramel' },
+	{ label: 'Cookies and Cream', value: 'cookiescream' },
+	{ label: 'Peppermint', value: 'peppermint' },
+];
+
+var AllowCreate = React.createClass({
+	displayName: 'AllowCreate',
+
+	propTypes: {
+		allowCreate: React.PropTypes.bool,
+		label: React.PropTypes.string,
+	},
+
+	getInitialState () {
+		return {
+			disabled: false,
+			crazy: false,
+			options: FLAVOURS,
+			value: [],
+		};
+	},
+
+	onLabelClick (data, event) {
+		console.log(data, event);
+	},
+
+	handleSelectChange (value){
+		this.setState({ value });
+	},
+
+	renderHint () {
+		return (
+			<div className="hint">Create options in tag mode</div>
+		);
+	},
+
+	render () {
+		return (
+			<div className="section">
+				<h3 className="section-heading">{this.props.label}</h3>
+				<Select
+					allowCreate={this.props.allowCreate}
+					value={this.state.value}
+					multi
+					placeholder="Select your favourite(s)"
+					options={this.state.options}
+					onChange={this.handleSelectChange} />
+				{this.renderHint()}
+			</div>
+		);
+	}
+});
+
+module.exports = AllowCreate;
diff --git a/src/Option.js b/src/Option.js
index 3ab7b481c2..1ea0ca2079 100644
--- a/src/Option.js
+++ b/src/Option.js
@@ -3,18 +3,20 @@ import classNames from 'classnames';
 
 const Option = React.createClass({
 	propTypes: {
+		addLabelText: React.PropTypes.string,               // text to display with value while creating new option
 		children: React.PropTypes.node,
-		className: React.PropTypes.string,             // className (based on mouse position)
+		className: React.PropTypes.string,                  // className (based on mouse position)
 		instancePrefix: React.PropTypes.string.isRequired,  // unique prefix for the ids (used for aria)
-		isDisabled: React.PropTypes.bool,              // the option is disabled
-		isFocused: React.PropTypes.bool,               // the option is focused
-		isSelected: React.PropTypes.bool,              // the option is selected
-		onFocus: React.PropTypes.func,                 // method to handle mouseEnter on option element
-		onSelect: React.PropTypes.func,                // method to handle click on option element
-		onUnfocus: React.PropTypes.func,               // method to handle mouseLeave on option element
-		option: React.PropTypes.object.isRequired,     // object that is base for that option
-		optionIndex: React.PropTypes.number,           // index of the option, used to generate unique ids for aria
+		isDisabled: React.PropTypes.bool,                   // the option is disabled
+		isFocused: React.PropTypes.bool,                    // the option is focused
+		isSelected: React.PropTypes.bool,                   // the option is selected
+		onFocus: React.PropTypes.func,                      // method to handle mouseEnter on option element
+		onSelect: React.PropTypes.func,                     // method to handle click on option element
+		onUnfocus: React.PropTypes.func,                    // method to handle mouseLeave on option element
+		option: React.PropTypes.object.isRequired,          // object that is base for that option
+		optionIndex: React.PropTypes.number                 // index of the option, used to generate unique ids for aria
 	},
+
 	blockEvent (event) {
 		event.preventDefault();
 		event.stopPropagation();
@@ -68,7 +70,6 @@ const Option = React.createClass({
 	render () {
 		var { option, instancePrefix, optionIndex } = this.props;
 		var className = classNames(this.props.className, option.className);
-
 		return option.disabled ? (
 			<div className={className}
 				onMouseDown={this.blockEvent}
@@ -79,7 +80,7 @@ const Option = React.createClass({
 			<div className={className}
 				style={option.style}
 				role="option"
-				 onMouseDown={this.handleMouseDown}
+				onMouseDown={this.handleMouseDown}
 				onMouseEnter={this.handleMouseEnter}
 				onMouseMove={this.handleMouseMove}
 				onTouchStart={this.handleTouchStart}
@@ -87,7 +88,7 @@ const Option = React.createClass({
 				onTouchEnd={this.handleTouchEnd}
 				id={instancePrefix + '-option-' + optionIndex}
 				title={option.title}>
-				{this.props.children}
+				{ option.create ? this.props.addLabelText.replace('{label}', option.label) : this.props.children }
 			</div>
 		);
 	}
diff --git a/src/Select.js b/src/Select.js
index fd58056552..fe6af7c95b 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -798,9 +798,11 @@ const Select = React.createClass({
 
 	filterOptions (excludeOptions) {
 		var filterValue = this.state.inputValue;
+		var originalFilterValue = filterValue;
 		var options = this.props.options || [];
+		var filteredOptions = [];
 		if (typeof this.props.filterOptions === 'function') {
-			return this.props.filterOptions.call(this, options, filterValue, excludeOptions);
+			filteredOptions = this.props.filterOptions.call(this, options, filterValue, excludeOptions);
 		} else if (this.props.filterOptions) {
 			if (this.props.ignoreAccents) {
 				filterValue = stripDiacritics(filterValue);
@@ -809,7 +811,7 @@ const Select = React.createClass({
 				filterValue = filterValue.toLowerCase();
 			}
 			if (excludeOptions) excludeOptions = excludeOptions.map(i => i[this.props.valueKey]);
-			return options.filter(option => {
+			filteredOptions = options.filter(option => {
 				if (excludeOptions && excludeOptions.indexOf(option[this.props.valueKey]) > -1) return false;
 				if (this.props.filterOption) return this.props.filterOption.call(this, option, filterValue);
 				if (!filterValue) return true;
@@ -832,8 +834,26 @@ const Select = React.createClass({
 				);
 			});
 		} else {
-			return options;
+			filteredOptions = options;
 		}
+		if (this.props.allowCreate && filterValue) {
+			let addNewOption = true;
+			//NOTE: only add the "Add" option if none of the options are an exact match
+			filteredOptions.map(option => {
+				if (option.label.toLowerCase() === filterValue || option.value.toLowerCase() === filterValue) {
+					addNewOption = false;
+				}
+			});
+			if (addNewOption) {
+				let newOption = this.props.newOptionCreator ? this.props.newOptionCreator(originalFilterValue) : {
+					value: originalFilterValue,
+					label: originalFilterValue,
+					create: true
+				};
+				filteredOptions.unshift(newOption);
+			}
+		}
+		return filteredOptions;
 	},
 
 	renderMenu (options, valueArray, focusedOption) {
@@ -873,6 +893,7 @@ const Select = React.createClass({
 							onSelect={this.selectValue}
 							onFocus={this.focusOption}
 							option={option}
+							addLabelText={this.props.addLabelText}
 							isSelected={isSelected}
 							ref={optionRef}
 							>
diff --git a/test/Select-test.js b/test/Select-test.js
index aa96fd8511..56aed6cb89 100644
--- a/test/Select-test.js
+++ b/test/Select-test.js
@@ -1273,10 +1273,6 @@ describe('Select', () => {
 	});
 
 	describe('with allowCreate=true', () => {
-
-		// TODO: allowCreate hasn't been implemented yet in 1.x
-		return;
-
 		beforeEach(() => {
 
 			options = [
@@ -1309,17 +1305,18 @@ describe('Select', () => {
 		it('fires an onChange with the new value when selecting the Add option', () => {
 
 			typeSearchText('xyz');
-			TestUtils.Simulate.click(ReactDOM.findDOMNode(instance).querySelector('.Select-menu .Select-option'));
+			console.log(ReactDOM.findDOMNode(instance).querySelector('.Select-menu .Select-option').outerHTML);
+			TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(instance).querySelector('.Select-menu .Select-option'));
 
-			expect(onChange, 'was called with', 'xyz');
+			expect(onChange, 'was called with', { value: 'xyz', label: 'xyz', create: true });
 		});
 
 		it('allows updating the options with a new label, following the onChange', () => {
 
 			typeSearchText('xyz');
-			TestUtils.Simulate.click(ReactDOM.findDOMNode(instance).querySelector('.Select-menu .Select-option'));
+			TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(instance).querySelector('.Select-menu .Select-option'));
 
-			expect(onChange, 'was called with', 'xyz');
+			expect(onChange, 'was called with', { value: 'xyz', label: 'xyz', create: true });
 
 			// Now the client adds the option, with a new label
 			wrapper.setPropsForChild({
@@ -1358,28 +1355,14 @@ describe('Select', () => {
 				'to have text', 'Add test to values?');
 		});
 
-		it('does not display the option label when an existing value is entered', () => {
+		it('does not display the add option label when an existing value is entered', () => {
 
 			typeSearchText('zzzzz');
 
 			expect(ReactDOM.findDOMNode(instance).querySelectorAll('.Select-menu .Select-option'),
 				'to have length', 1);
 			expect(ReactDOM.findDOMNode(instance), 'queried for first', '.Select-menu .Select-option',
-				'to have text', 'Add zzzzz to values?');
-		});
-
-		it('renders the existing option and an add option when an existing display label is entered', () => {
-
-			typeSearchText('test value');
-
-			// First item should be the add option (as the "value" is not in the collection)
-			expect(ReactDOM.findDOMNode(instance).querySelectorAll('.Select-menu .Select-option')[0],
-				'to have text', 'Add test value to values?');
-			// Second item should be the existing option with the matching label
-			expect(ReactDOM.findDOMNode(instance).querySelectorAll('.Select-menu .Select-option')[1],
 				'to have text', 'test value');
-			expect(ReactDOM.findDOMNode(instance).querySelectorAll('.Select-menu .Select-option'),
-				'to have length', 2);
 		});
 	});
 

From a0704664fae2ba7dbff630aba5d47adc3999de43 Mon Sep 17 00:00:00 2001
From: Ryan Zec <code@ryanzec.com>
Date: Thu, 2 Jun 2016 06:10:49 -0400
Subject: [PATCH 2/6] added support for custom add item key code

---
 examples/src/components/AllowCreate.js |  5 +++-
 src/Select.js                          | 20 +++++++-------
 test/Select-test.js                    | 36 +++++++++++++++++++++++++-
 3 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/examples/src/components/AllowCreate.js b/examples/src/components/AllowCreate.js
index 4cab93a320..debe56704d 100644
--- a/examples/src/components/AllowCreate.js
+++ b/examples/src/components/AllowCreate.js
@@ -51,7 +51,10 @@ var AllowCreate = React.createClass({
 					multi
 					placeholder="Select your favourite(s)"
 					options={this.state.options}
-					onChange={this.handleSelectChange} />
+					onChange={this.handleSelectChange}
+					addItemOnKeyCode={188}
+				/>
+
 				{this.renderHint()}
 			</div>
 		);
diff --git a/src/Select.js b/src/Select.js
index fe6af7c95b..b2b0da9855 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -29,6 +29,7 @@ const Select = React.createClass({
 	displayName: 'Select',
 
 	propTypes: {
+		addItemOnKeyCode: React.PropTypes.number,   // The key code number that should trigger adding a tag if multi and allowCreate are enabled
 		addLabelText: React.PropTypes.string,       // placeholder displayed when you want to add a label on a multi-value input
 		allowCreate: React.PropTypes.bool,          // whether to allow creation of new entries
 		'aria-label': React.PropTypes.string,		// Aria label (for assistive tech)
@@ -102,6 +103,7 @@ const Select = React.createClass({
 	getDefaultProps () {
 		return {
 			addLabelText: 'Add "{label}"?',
+			addItemOnKeyCode: null,
 			autosize: true,
 			allowCreate: false,
 			backspaceRemoves: true,
@@ -437,17 +439,15 @@ const Select = React.createClass({
 			break;
 			case 36: // home key
 				this.focusStartOption();
+			default:
+				if (this.props.allowCreate && this.props.multi && event.keyCode === this.props.addItemOnKeyCode) {
+					event.preventDefault();
+					event.stopPropagation();
+					this.selectFocusedOption();
+				} else {
+					return;
+				}
 			break;
-			// case 188: // ,
-			// 	if (this.props.allowCreate && this.props.multi) {
-			// 		event.preventDefault();
-			// 		event.stopPropagation();
-			// 		this.selectFocusedOption();
-			// 	} else {
-			// 		return;
-			// 	}
-			// break;
-			default: return;
 		}
 		event.preventDefault();
 	},
diff --git a/test/Select-test.js b/test/Select-test.js
index 56aed6cb89..8430ab1b51 100644
--- a/test/Select-test.js
+++ b/test/Select-test.js
@@ -68,6 +68,10 @@ describe('Select', () => {
 		TestUtils.Simulate.keyDown(searchInputNode, { keyCode: 65, key: 'a' });
 	};
 
+	var pressCommaToAccept = ()  =>{
+		TestUtils.Simulate.keyDown(searchInputNode, { keyCode: 188, key: 'Comma' });
+	};
+
 	var pressEnterToAccept = () => {
 		TestUtils.Simulate.keyDown(searchInputNode, { keyCode: 13, key: 'Enter' });
 	};
@@ -1305,7 +1309,6 @@ describe('Select', () => {
 		it('fires an onChange with the new value when selecting the Add option', () => {
 
 			typeSearchText('xyz');
-			console.log(ReactDOM.findDOMNode(instance).querySelector('.Select-menu .Select-option').outerHTML);
 			TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(instance).querySelector('.Select-menu .Select-option'));
 
 			expect(onChange, 'was called with', { value: 'xyz', label: 'xyz', create: true });
@@ -1366,6 +1369,37 @@ describe('Select', () => {
 		});
 	});
 
+	describe('with addItemOnKeyCode=188', () => {
+		beforeEach(() => {
+
+			options = [
+				{ value: 'one', label: 'One' },
+				{ value: 'two', label: 'Two' },
+				{ value: 'got spaces', label: 'Label for spaces' },
+				{ value: 'gotnospaces', label: 'Label for gotnospaces' },
+				{ value: 'abc 123', label: 'Label for abc 123' },
+				{ value: 'three', label: 'Three' },
+				{ value: 'zzzzz', label: 'test value' }
+			];
+
+			// Render an instance of the component
+			wrapper = createControlWithWrapper({
+				value: [],
+				options: options,
+				allowCreate: true,
+				multi: true,
+				searchable: true,
+				addLabelText: 'Add {label} to values?',
+				addItemOnKeyCode: 188
+			});
+		});
+
+		it('has an "Add xyz" option when entering xyz', () => {
+			typeSearchText('xyz');
+			pressCommaToAccept();
+			expect(onChange, 'was called with', [{ value: 'xyz', label: 'xyz', create: true }]);
+		});
+	});
 
 	describe('with multi-select', () => {
 

From 77fbe105ff1702a7e38549600bb71d85d4dad1a1 Mon Sep 17 00:00:00 2001
From: Ryan Zec <code@ryanzec.com>
Date: Thu, 9 Jun 2016 07:27:50 -0400
Subject: [PATCH 3/6] fixed issues when using allowCreate and simpleValue
 together fixed issues with delete tags that created by the user with
 allowCreate

---
 src/Select.js | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/Select.js b/src/Select.js
index b2b0da9855..c026661bfb 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -492,7 +492,11 @@ const Select = React.createClass({
 		let { options, valueKey } = this.props;
 		if (!options) return;
 		for (var i = 0; i < options.length; i++) {
-			if (options[i][valueKey] === value) return options[i];
+			if (options[i][valueKey] === value) {
+				return options[i]
+			} else if (this.props.allowCreate && value !== '') {
+				return this.createNewOption(value);
+			}
 		}
 	},
 
@@ -543,7 +547,13 @@ const Select = React.createClass({
 
 	removeValue (value) {
 		var valueArray = this.getValueArray(this.props.value);
-		this.setValue(valueArray.filter(i => i !== value));
+		this.setValue(valueArray.filter(i => {
+			if (i.create) {
+				return i[this.props.valueKey] !== value[this.props.valueKey] && i[this.props.labelKey] !== value[this.props.labelKey];
+			} else {
+				return i !== value;
+			}
+		}));
 		this.focus();
 	},
 
@@ -660,6 +670,16 @@ const Select = React.createClass({
 		}
 	},
 
+	createNewOption (value) {
+		if (this.props.newOptionCreator) return this.props.newOptionCreator(value);
+		let newOption = {
+			create: true
+		};
+		newOption[this.props.valueKey] = value;
+		newOption[this.props.labelKey] = value;
+		return newOption;
+	},
+
 	renderLoading () {
 		if (!this.props.isLoading) return;
 		return (
@@ -845,12 +865,7 @@ const Select = React.createClass({
 				}
 			});
 			if (addNewOption) {
-				let newOption = this.props.newOptionCreator ? this.props.newOptionCreator(originalFilterValue) : {
-					value: originalFilterValue,
-					label: originalFilterValue,
-					create: true
-				};
-				filteredOptions.unshift(newOption);
+				filteredOptions.unshift(this.createNewOption(originalFilterValue));
 			}
 		}
 		return filteredOptions;

From 2fee64c808cd3932376abe049f7a73560183eb3f Mon Sep 17 00:00:00 2001
From: Ryan Zec <code@ryanzec.com>
Date: Thu, 9 Jun 2016 07:49:08 -0400
Subject: [PATCH 4/6] fixed code based on failing test

---
 src/Select.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/Select.js b/src/Select.js
index c026661bfb..38db0d866f 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -493,11 +493,13 @@ const Select = React.createClass({
 		if (!options) return;
 		for (var i = 0; i < options.length; i++) {
 			if (options[i][valueKey] === value) {
-				return options[i]
-			} else if (this.props.allowCreate && value !== '') {
-				return this.createNewOption(value);
+				return options[i];
 			}
 		}
+
+		if (this.props.allowCreate && value !== '') {
+			return this.createNewOption(value);
+		}
 	},
 
 	setValue (value) {
@@ -673,10 +675,12 @@ const Select = React.createClass({
 	createNewOption (value) {
 		if (this.props.newOptionCreator) return this.props.newOptionCreator(value);
 		let newOption = {
+			value: value,
+			label: value,
 			create: true
 		};
-		newOption[this.props.valueKey] = value;
-		newOption[this.props.labelKey] = value;
+		// newOption[this.props.valueKey] = value;
+		// newOption[this.props.labelKey] = value;
 		return newOption;
 	},
 

From 8f52d461c5fc1b720c58d6534c5c68b96f4b329c Mon Sep 17 00:00:00 2001
From: Ryan Zec <code@ryanzec.com>
Date: Fri, 24 Jun 2016 13:22:08 -0400
Subject: [PATCH 5/6] refactored createNewOption to always add create: true
 property

---
 src/Select.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/Select.js b/src/Select.js
index 38db0d866f..9e96906f62 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -673,14 +673,17 @@ const Select = React.createClass({
 	},
 
 	createNewOption (value) {
-		if (this.props.newOptionCreator) return this.props.newOptionCreator(value);
-		let newOption = {
-			value: value,
-			label: value,
-			create: true
-		};
-		// newOption[this.props.valueKey] = value;
-		// newOption[this.props.labelKey] = value;
+		let newOption = {};
+
+		if (this.props.newOptionCreator) {
+			newOption = this.props.newOptionCreator(value);
+		} else {
+			newOption[this.props.valueKey] = value;
+			newOption[this.props.labelKey] = value;
+		}
+
+		newOption.create = true;
+
 		return newOption;
 	},
 

From aa7f000fafe70d83656b92b2cfd0543659041a53 Mon Sep 17 00:00:00 2001
From: Nadav Spiegelman <me@nadav.name>
Date: Wed, 13 Jul 2016 16:16:59 -0400
Subject: [PATCH 6/6] Fix filter for numerical options

Prevent a filtering error when allowCreate is true and an option has a numeric
label or value.
---
 examples/src/components/AllowCreate.js | 2 +-
 src/Select.js                          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/src/components/AllowCreate.js b/examples/src/components/AllowCreate.js
index debe56704d..73d729c619 100644
--- a/examples/src/components/AllowCreate.js
+++ b/examples/src/components/AllowCreate.js
@@ -2,7 +2,7 @@ import React from 'react';
 import Select from 'react-select';
 
 const FLAVOURS = [
-	{ label: 'Chocolate', value: 'chocolate' },
+	{ label: 'Chocolate', value: 42 },
 	{ label: 'Vanilla', value: 'vanilla' },
 	{ label: 'Strawberry', value: 'strawberry' },
 	{ label: 'Caramel', value: 'caramel' },
diff --git a/src/Select.js b/src/Select.js
index 9e96906f62..3b198b827c 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -867,7 +867,7 @@ const Select = React.createClass({
 			let addNewOption = true;
 			//NOTE: only add the "Add" option if none of the options are an exact match
 			filteredOptions.map(option => {
-				if (option.label.toLowerCase() === filterValue || option.value.toLowerCase() === filterValue) {
+				if (String(option.label).toLowerCase() === filterValue || String(option.value).toLowerCase() === filterValue) {
 					addNewOption = false;
 				}
 			});