From 9c963d0593396904676e92f09903710f75fa9d0c Mon Sep 17 00:00:00 2001
From: Matt Stenerson <stenerson.matt@gmail.com>
Date: Thu, 15 Dec 2016 10:49:51 -0600
Subject: [PATCH] Add option to show new creatable item as first or last option

---
 README.md              |  1 +
 src/Creatable.js       | 14 ++++++++++++--
 test/Creatable-test.js | 11 +++++++++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 34c096ca2b..e49b7e0ffc 100644
--- a/README.md
+++ b/README.md
@@ -224,6 +224,7 @@ Property | Type | Description
 `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` |
+`showNewOptionAtTop` | bool | `true`: (Default) Show new option at top of list <br> `false`: Show new option at bottom of list |
 
 ### Combining Async and Creatable
 
diff --git a/src/Creatable.js b/src/Creatable.js
index 3f2f473e28..a497bb69ef 100644
--- a/src/Creatable.js
+++ b/src/Creatable.js
@@ -49,6 +49,11 @@ const Creatable = React.createClass({
 
 		// Decides if a keyDown event (eg its `keyCode`) should result in the creation of a new option.
 		shouldKeyDownEventCreateNewOption: React.PropTypes.func,
+
+		// Creates prompt/placeholder option text.
+		// true: new option prompt at top of list (default)
+		// false: new option prompt at bottom of list
+		showNewOptionAtTop: React.PropTypes.bool,
 	},
 
 	// Default prop methods
@@ -68,6 +73,7 @@ const Creatable = React.createClass({
 			menuRenderer: defaultMenuRenderer,
 			newOptionCreator,
 			promptTextCreator,
+			showNewOptionAtTop: true,
 			shouldKeyDownEventCreateNewOption,
 		};
 	},
@@ -99,7 +105,7 @@ const Creatable = React.createClass({
 	},
 
 	filterOptions (...params) {
-		const { filterOptions, isValidNewOption, options, promptTextCreator } = this.props;
+		const { filterOptions, isValidNewOption, options, promptTextCreator, showNewOptionAtTop } = this.props;
 
 		// TRICKY Check currently selected options as well.
 		// Don't display a create-prompt for a value that's selected.
@@ -133,7 +139,11 @@ const Creatable = React.createClass({
 					valueKey: this.valueKey
 				});
 
-				filteredOptions.unshift(this._createPlaceholderOption);
+				if (showNewOptionAtTop) {
+					filteredOptions.unshift(this._createPlaceholderOption);
+				} else {
+					filteredOptions.push(this._createPlaceholderOption);
+				}
 			}
 		}
 
diff --git a/test/Creatable-test.js b/test/Creatable-test.js
index 968478fd9a..51b5b19fc4 100644
--- a/test/Creatable-test.js
+++ b/test/Creatable-test.js
@@ -68,6 +68,17 @@ describe('Creatable', () => {
 		expect(creatableNode.querySelector('.Select-create-option-placeholder'), 'to have text', Select.Creatable.promptTextCreator('foo'));
 	});
 
+	it('should add a placeholder "create..." prompt as last option when showNewOptionAtTop is false', () => {
+		createControl({
+			showNewOptionAtTop: false
+		});
+		const searchTerm = 'Th';
+		typeSearchText(searchTerm);
+		let nodes = creatableNode.querySelectorAll('.Select-option');
+		expect(nodes, 'to have length', 2); // [Three, Create "th"?]
+		expect(nodes[nodes.length-1], 'to have text', Select.Creatable.promptTextCreator(searchTerm));
+	});
+
 	it('should not show a "create..." prompt if current filter text is an exact match for an existing option', () => {
 		createControl({
 			isOptionUnique: () => false