diff --git a/README.md b/README.md
index f6e3148b5f..ad2fb2be84 100644
--- a/README.md
+++ b/README.md
@@ -429,6 +429,7 @@ function onInputKeyDown(event) {
| `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` | boolean | `true`: (Default) Show new option at top of list
`false`: Show new option at bottom of list |
### Methods
diff --git a/examples/src/components/Creatable.js b/examples/src/components/Creatable.js
index 50a8baaf2b..6082241873 100644
--- a/examples/src/components/Creatable.js
+++ b/examples/src/components/Creatable.js
@@ -11,6 +11,7 @@ var CreatableDemo = createClass({
},
getInitialState () {
return {
+ atTop: true,
multi: true,
multiValue: [],
options: [
@@ -30,7 +31,7 @@ var CreatableDemo = createClass({
}
},
render () {
- const { multi, multiValue, options, value } = this.state;
+ const { atTop, multi, multiValue, options, value } = this.state;
return (
);
}
diff --git a/src/Creatable.js b/src/Creatable.js
index 76cd7754bc..f45ac11e74 100644
--- a/src/Creatable.js
+++ b/src/Creatable.js
@@ -42,7 +42,7 @@ class CreatableSelect extends React.Component {
}
filterOptions (...params) {
- const { filterOptions, isValidNewOption, promptTextCreator } = this.props;
+ const { filterOptions, isValidNewOption, promptTextCreator, showNewOptionAtTop } = this.props;
// TRICKY Check currently selected options as well.
// Don't display a create-prompt for a value that's selected.
@@ -76,7 +76,11 @@ class CreatableSelect extends React.Component {
valueKey: this.valueKey
});
- filteredOptions.unshift(this._createPlaceholderOption);
+ if (showNewOptionAtTop) {
+ filteredOptions.unshift(this._createPlaceholderOption);
+ } else {
+ filteredOptions.push(this._createPlaceholderOption);
+ }
}
}
@@ -251,7 +255,8 @@ CreatableSelect.defaultProps = {
menuRenderer: defaultMenuRenderer,
newOptionCreator,
promptTextCreator,
- shouldKeyDownEventCreateNewOption
+ shouldKeyDownEventCreateNewOption,
+ showNewOptionAtTop: true
};
CreatableSelect.propTypes = {
@@ -299,6 +304,11 @@ CreatableSelect.propTypes = {
// Decides if a keyDown event (eg its `keyCode`) should result in the creation of a new option.
shouldKeyDownEventCreateNewOption: PropTypes.func,
+
+ // Where to show 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,
};
diff --git a/test/Creatable-test.js b/test/Creatable-test.js
index f22c51cf59..03d530b7f0 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