Add option to show new creatable item as first or last option

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
 

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);
+				}
 			}
 		}
 

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