From 84a04661770ce30e1846882925869cffdffe4de0 Mon Sep 17 00:00:00 2001
From: Josh Newman <josh.newman4390@gmail.com>
Date: Mon, 24 Jul 2017 10:16:12 -0500
Subject: [PATCH] Add state to Creatable to avoid mutating the options prop

---
 src/Creatable.js       | 14 ++++++++++++--
 test/Creatable-test.js | 14 ++++++++------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/Creatable.js b/src/Creatable.js
index 2f1d843a0b..10ee6f3920 100644
--- a/src/Creatable.js
+++ b/src/Creatable.js
@@ -74,6 +74,12 @@ const Creatable = createClass({
 		};
 	},
 
+	getInitialState () {
+		return {
+			newOptions: []
+		};
+	},
+
 	createNewOption () {
 		const {
 			isValidNewOption,
@@ -92,7 +98,7 @@ const Creatable = createClass({
 				if (onNewOptionClick) {
 					onNewOptionClick(option);
 				} else {
-					options.unshift(option);
+					this.setState({ newOptions: [option, ...this.state.newOptions] });
 
 					this.select.selectValue(option);
 				}
@@ -101,7 +107,7 @@ const Creatable = createClass({
 	},
 
 	filterOptions (...params) {
-		const { filterOptions, isValidNewOption, options, promptTextCreator } = this.props;
+		const { filterOptions, isValidNewOption, promptTextCreator } = this.props;
 
 		// TRICKY Check currently selected options as well.
 		// Don't display a create-prompt for a value that's selected.
@@ -213,6 +219,7 @@ const Creatable = createClass({
 		const {
 			newOptionCreator,
 			shouldKeyDownEventCreateNewOption,
+			options: propOptions = [],
 			...restProps
 		} = this.props;
 
@@ -225,8 +232,11 @@ const Creatable = createClass({
 			children = defaultChildren;
 		}
 
+		const options = [...this.state.newOptions, ...propOptions];
+
 		const props = {
 			...restProps,
+			options,
 			allowCreate: true,
 			filterOptions: this.filterOptions,
 			menuRenderer: this.menuRenderer,
diff --git a/test/Creatable-test.js b/test/Creatable-test.js
index 08118d62a4..bf2ad292cb 100644
--- a/test/Creatable-test.js
+++ b/test/Creatable-test.js
@@ -126,9 +126,10 @@ describe('Creatable', () => {
 		});
 		typeSearchText('foo');
 		TestUtils.Simulate.mouseDown(creatableNode.querySelector('.Select-create-option-placeholder'));
-		expect(options, 'to have length', 1);
-		expect(options[0].label, 'to equal', 'foo');
-		expect(selectedOption, 'to be', options[0]);
+		const newOptions = creatableInstance.state.newOptions;
+		expect(newOptions, 'to have length', 1);
+		expect(newOptions[0].label, 'to equal', 'foo');
+		expect(selectedOption, 'to equal', newOptions[0]);
 	});
 
 	it('should create (and auto-select) a new option when ENTER is pressed while placeholder option is selected', () => {
@@ -141,9 +142,10 @@ describe('Creatable', () => {
 		});
 		typeSearchText('foo');
 		TestUtils.Simulate.keyDown(filterInputNode, { keyCode: 13 });
-		expect(options, 'to have length', 1);
-		expect(options[0].label, 'to equal', 'foo');
-		expect(selectedOption, 'to be', options[0]);
+		const newOptions = creatableInstance.state.newOptions;
+		expect(newOptions, 'to have length', 1);
+		expect(newOptions[0].label, 'to equal', 'foo');
+		expect(selectedOption, 'to be', newOptions[0]);
 	});
 
 	it('should not create a new option if the placeholder option is not selected but should select the focused option', () => {