diff --git a/examples/src/.npmignore b/examples/src/.npmignore
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/examples/src/app.js b/examples/src/app.js
index 382db2b45c..9ce1803d30 100644
--- a/examples/src/app.js
+++ b/examples/src/app.js
@@ -169,6 +169,39 @@ var SelectedValuesField = React.createClass({
}
});
+var SelectedValuesFieldCreate = React.createClass({
+
+ onLabelClick: function (data, event) {
+ console.log(data, event);
+ },
+
+ render: function() {
+ var ops = [
+ { 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' }
+ ];
+ return (
+
+
+
+
+ );
+ }
+});
+
+
React.render(
@@ -176,6 +209,7 @@ React.render(
+
,
document.getElementById('example')
diff --git a/src/Select.js b/src/Select.js
index 2e7772dd33..ba943ac87c 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -34,7 +34,7 @@ var Select = React.createClass({
matchPos: React.PropTypes.string, // (any|start) match the start or entire string when filtering
matchProp: React.PropTypes.string, // (any|label|value) which option property to filter on
inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
-
+ allowCreate: React.PropTypes.bool, // wether to allow creation of new entries
/*
* Allow user to make option label clickable. When this handler is defined we should
* wrap label into label tag.
@@ -66,6 +66,7 @@ var Select = React.createClass({
matchPos: 'any',
matchProp: 'any',
inputProps: {},
+ allowCreate: false,
onOptionLabelClick: undefined
};
@@ -383,6 +384,14 @@ var Select = React.createClass({
this.focusNextOption();
break;
+ case 188: // ,
+ if (this.props.allowCreate) {
+ event.preventDefault();
+ event.stopPropagation();
+ this.selectFocusedOption();
+ };
+ break;
+
default: return;
}
@@ -516,6 +525,9 @@ var Select = React.createClass({
},
selectFocusedOption: function() {
+ if (this.props.allowCreate && !this.state.focusedOption) {
+ return this.selectValue(this.state.inputValue);
+ };
return this.selectValue(this.state.focusedOption);
},
@@ -592,6 +604,15 @@ var Select = React.createClass({
if(this.state.filteredOptions.length > 0) {
focusedValue = focusedValue == null ? this.state.filteredOptions[0] : focusedValue;
}
+ // Add the current value to the filtered options in last resort
+ if (this.props.allowCreate && !this.state.filteredOptions.length) {
+ var inputValue = this.state.inputValue;
+ this.state.filteredOptions.push({
+ value: inputValue,
+ label: inputValue,
+ create: true
+ })
+ };
var ops = Object.keys(this.state.filteredOptions).map(function(key) {
var op = this.state.filteredOptions[key];
@@ -612,7 +633,7 @@ var Select = React.createClass({
if (op.disabled) {
return {op.label}
;
} else {
- return {op.label}
;
+ return { op.create ? "Add "+op.label+" ?" : op.label}
;
}
}, this);