Adds tag creator

examples/src/app.js

@@ -169,13 +169,47 @@ 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 (
+			<div>
+				<label>{this.props.label}</label>
+				<Select
+					onOptionLabelClick={this.onLabelClick}
+					value="chocolate,vanilla,strawberry"
+					delimiter=","
+					multi={true}
+					allowCreate={true}
+					placeholder="Select your favourite(s)"
+					options={ops}
+					onChange={logChange} />
+			</div>
+		);
+	}
+});
+
+
 
 React.render(
 	<div>
 		<StatesField />
 		<StatesField label="States (non-searchable):" searchable={false} />
 		<MultiSelectField label="Multiselect:"/>
 		<SelectedValuesField label="Clickable labels (labels as links):" />
+		<SelectedValuesFieldCreate label="Clickable labels + Creation(labels as links):" />
 		<RemoteSelectField label="Remote Options:"/>
 	</div>,
 	document.getElementById('example')

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 <a>label</a> 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 <div ref={ref} key={'option-' + op.value} className={optionClass}>{op.label}</div>;
 			} else {
-				return <div ref={ref} key={'option-' + op.value} className={optionClass} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave} onMouseDown={mouseDown} onClick={mouseDown}>{op.label}</div>;
+				return <div ref={ref} key={'option-' + op.value} className={optionClass} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave} onMouseDown={mouseDown} onClick={mouseDown}>{ op.create ? "Add "+op.label+" ?" : op.label}</div>;
 			}
 		}, this);