react-select - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

dist/react-select.js

@@ -10,3 +10,3 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Select = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
     Input = (typeof window !== "undefined" ? window.AutosizeInput : typeof global !== "undefined" ? global.AutosizeInput : null),
-    classes = (typeof window !== "undefined" ? window.classnames : typeof global !== "undefined" ? global.classnames : null),
+    classes = (typeof window !== "undefined" ? window.classNames : typeof global !== "undefined" ? global.classNames : null),
     Value = require("./Value");
@@ -47,8 +47,8 @@
 		/*
-  
   * Allow user to make option label clickable. When this handler is defined we should
   * wrap label into <a>label</a> tag.
-  * 
+  *
   * onOptionLabelClick handler: function (value, event) {}
-  * */
+  *
+  */
 		onOptionLabelClick: React.PropTypes.func
@@ -183,3 +183,3 @@ },
 		while (eventTarget != null) {
-			if (eventTarget == element) {
+			if (eventTarget === element) {
 				return false;
@@ -192,3 +192,2 @@ }eventTarget = eventTarget.offsetParent;
 	getStateFromValue: function getStateFromValue(value, options) {
-
 		if (!options) {
@@ -217,5 +216,4 @@ options = this.state.options;
 	initValuesArray: function initValuesArray(values, options) {
-
 		if (!Array.isArray(values)) {
-			if ("string" === typeof values) {
+			if (typeof values === "string") {
 				values = values.split(this.props.delimiter);
@@ -227,5 +225,5 @@ } else {
 
-		return values.map((function (val) {
-			return "string" === typeof val ? val = _.findWhere(options, { value: val }) || { value: val, label: val } : val;
-		}).bind(this));
+		return values.map(function (val) {
+			return typeof val === "string" ? val = _.findWhere(options, { value: val }) || { value: val, label: val } : val;
+		});
 	},
@@ -265,3 +263,3 @@
 		// button, ignore it.
-		if (event && event.type == "mousedown" && event.button !== 0) {
+		if (event && event.type === "mousedown" && event.button !== 0) {
 			return;
@@ -290,3 +288,3 @@ }
 		// button, or if the component is disabled, ignore it.
-		if (this.props.disabled || event.type == "mousedown" && event.button !== 0) {
+		if (this.props.disabled || event.type === "mousedown" && event.button !== 0) {
 			return;
@@ -340,3 +338,2 @@ }
 	handleKeyDown: function handleKeyDown(event) {
-
 		if (this.state.disabled) {
@@ -352,3 +349,2 @@ return;
 				return;
-				break;
 
@@ -395,3 +391,2 @@ case 9:
 	handleInputChange: function handleInputChange(event) {
-
 		// assign an internal variable because we need to use
@@ -426,3 +421,2 @@ // the latest value before setState() has completed.
 	loadAsyncOptions: function loadAsyncOptions(input, state) {
-
 		var thisRequestId = this._currentRequestId = requestId++;
@@ -434,5 +428,8 @@
 				var options = this._optionsCache[cacheKey].options;
+				var filteredOptions = this.filterOptions(options);
+
 				this.setState(_.extend({
 					options: options,
-					filteredOptions: this.filterOptions(options)
+					filteredOptions: filteredOptions,
+					focusedOption: _.contains(filteredOptions, this.state.focusedOption) ? this.state.focusedOption : filteredOptions[0]
 				}, state));
@@ -445,2 +442,4 @@ return;
 
+			if (err) throw err;
+
 			this._optionsCache[input] = data;
@@ -451,6 +450,8 @@
 			}
+			var filteredOptions = this.filterOptions(data.options);
 
 			this.setState(_.extend({
 				options: data.options,
-				filteredOptions: this.filterOptions(data.options)
+				filteredOptions: filteredOptions,
+				focusedOption: _.contains(filteredOptions, this.state.focusedOption) ? this.state.focusedOption : filteredOptions[0]
 			}, state));
@@ -556,5 +557,8 @@ }).bind(this));
 	buildMenu: function buildMenu() {
-
 		var focusedValue = this.state.focusedOption ? this.state.focusedOption.value : null;
 
+		if (this.state.filteredOptions.length > 0) {
+			focusedValue = focusedValue == null ? this.state.filteredOptions[0] : focusedValue;
+		}
+
 		var ops = _.map(this.state.filteredOptions, function (op) {
@@ -597,3 +601,2 @@ var isFocused = focusedValue === op.value;
 	render: function render() {
-
 		var selectClass = classes("Select", this.props.className, {
@@ -700,4 +703,3 @@ "is-multi": this.props.multi,
 
-var _ = (typeof window !== "undefined" ? window._ : typeof global !== "undefined" ? global._ : null),
-    React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
+var React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
 
@@ -704,0 +706,0 @@ var Option = React.createClass({

dist/react-select.min.js

@@ -1,1 +0,1 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Select=e()}}(function(){return function e(t,s,i){function n(a,l){if(!s[a]){if(!t[a]){var r="function"==typeof require&&require;if(!l&&r)return r(a,!0);if(o)return o(a,!0);var u=new Error("Cannot find module '"+a+"'");throw u.code="MODULE_NOT_FOUND",u}var p=s[a]={exports:{}};t[a][0].call(p.exports,function(e){var s=t[a][1][e];return n(s?s:e)},p,p.exports,e,t,s,i)}return s[a].exports}for(var o="function"==typeof require&&require,a=0;a<i.length;a++)n(i[a]);return n}({1:[function(e,t){(function(s){"use strict";var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var i in s)Object.prototype.hasOwnProperty.call(s,i)&&(e[i]=s[i])}return e},n="undefined"!=typeof window?window._:"undefined"!=typeof s?s._:null,o="undefined"!=typeof window?window.React:"undefined"!=typeof s?s.React:null,a="undefined"!=typeof window?window.AutosizeInput:"undefined"!=typeof s?s.AutosizeInput:null,l="undefined"!=typeof window?window.classnames:"undefined"!=typeof s?s.classnames:null,r=e("./Value"),u=0,p=o.createClass({displayName:"Select",propTypes:{value:o.PropTypes.any,multi:o.PropTypes.bool,disabled:o.PropTypes.bool,options:o.PropTypes.array,delimiter:o.PropTypes.string,asyncOptions:o.PropTypes.func,autoload:o.PropTypes.bool,placeholder:o.PropTypes.string,noResultsText:o.PropTypes.string,clearable:o.PropTypes.bool,clearValueText:o.PropTypes.string,clearAllText:o.PropTypes.string,searchable:o.PropTypes.bool,searchPromptText:o.PropTypes.string,name:o.PropTypes.string,onChange:o.PropTypes.func,onFocus:o.PropTypes.func,onBlur:o.PropTypes.func,className:o.PropTypes.string,filterOption:o.PropTypes.func,filterOptions:o.PropTypes.func,matchPos:o.PropTypes.string,matchProp:o.PropTypes.string,inputProps:o.PropTypes.object,onOptionLabelClick:o.PropTypes.func},getDefaultProps:function(){return{value:void 0,options:[],disabled:!1,delimiter:",",asyncOptions:void 0,autoload:!0,placeholder:"Select...",noResultsText:"No results found",clearable:!0,clearValueText:"Clear value",clearAllText:"Clear all",searchable:!0,searchPromptText:"Type to search",name:void 0,onChange:void 0,className:void 0,matchPos:"any",matchProp:"any",inputProps:{},onOptionLabelClick:void 0}},getInitialState:function(){return{options:this.props.options,isFocused:!1,isOpen:!1,isLoading:!1}},componentWillMount:function(){this._optionsCache={},this._optionsFilterString="",this.setState(this.getStateFromValue(this.props.value)),this.props.asyncOptions&&this.props.autoload&&this.autoloadAsyncOptions(),this._closeMenuIfClickedOutside=function(e){var t=this.refs.selectMenuContainer.getDOMNode(),s=this.refs.control.getDOMNode(),i=this.clickedOutsideElement(t,e),n=this.clickedOutsideElement(s,e);i&&n&&this.setState({isOpen:!1},this._unbindCloseMenuIfClickedOutside)}.bind(this),this._bindCloseMenuIfClickedOutside=function(){document.addEventListener("click",this._closeMenuIfClickedOutside)},this._unbindCloseMenuIfClickedOutside=function(){document.removeEventListener("click",this._closeMenuIfClickedOutside)}},componentWillUnmount:function(){clearTimeout(this._blurTimeout),clearTimeout(this._focusTimeout),this.state.isOpen&&this._unbindCloseMenuIfClickedOutside()},componentWillReceiveProps:function(e){e.value!==this.state.value&&this.setState(this.getStateFromValue(e.value,e.options)),JSON.stringify(e.options)!==JSON.stringify(this.props.options)&&this.setState({options:e.options,filteredOptions:this.filterOptions(e.options)})},componentDidUpdate:function(){if(this._focusAfterUpdate&&(clearTimeout(this._blurTimeout),this._focusTimeout=setTimeout(function(){this.getInputNode().focus(),this._focusAfterUpdate=!1}.bind(this),50)),this._focusedOptionReveal){if(this.refs.focused&&this.refs.menu){var e=this.refs.focused.getDOMNode(),t=this.refs.menu.getDOMNode(),s=e.getBoundingClientRect(),i=t.getBoundingClientRect();(s.bottom>i.bottom||s.top<i.top)&&(t.scrollTop=e.offsetTop+e.clientHeight-t.offsetHeight)}this._focusedOptionReveal=!1}},clickedOutsideElement:function(e,t){for(var s=t.target?t.target:t.srcElement;null!=s;){if(s==e)return!1;s=s.offsetParent}return!0},getStateFromValue:function(e,t){t||(t=this.state.options),this._optionsFilterString="";var s=this.initValuesArray(e,t),i=this.filterOptions(t,s);return{value:s.map(function(e){return e.value}).join(this.props.delimiter),values:s,inputValue:"",filteredOptions:i,placeholder:!this.props.multi&&s.length?s[0].label:this.props.placeholder,focusedOption:!this.props.multi&&s.length?s[0]:i[0]}},initValuesArray:function(e,t){return Array.isArray(e)||(e="string"==typeof e?e.split(this.props.delimiter):e?[e]:[]),e.map(function(e){return"string"==typeof e?e=n.findWhere(t,{value:e})||{value:e,label:e}:e}.bind(this))},setValue:function(e){this._focusAfterUpdate=!0;var t=this.getStateFromValue(e);t.isOpen=!1,this.fireChangeEvent(t),this.setState(t)},selectValue:function(e){this.props.multi?e&&this.addValue(e):this.setValue(e),this._unbindCloseMenuIfClickedOutside()},addValue:function(e){this.setValue(this.state.values.concat(e))},popValue:function(){this.setValue(n.initial(this.state.values))},removeValue:function(e){this.setValue(n.without(this.state.values,e))},clearValue:function(e){e&&"mousedown"==e.type&&0!==e.button||this.setValue(null)},resetValue:function(){this.setValue(this.state.value)},getInputNode:function(){var e=this.refs.input;return this.props.searchable?e:e.getDOMNode()},fireChangeEvent:function(e){e.value!==this.state.value&&this.props.onChange&&this.props.onChange(e.value,e.values)},handleMouseDown:function(e){this.props.disabled||"mousedown"==e.type&&0!==e.button||(e.stopPropagation(),e.preventDefault(),this.state.isFocused?this.setState({isOpen:!0},this._bindCloseMenuIfClickedOutside):(this._openAfterFocus=!0,this.getInputNode().focus()))},handleInputFocus:function(e){var t=this.state.isOpen||this._openAfterFocus;this.setState({isFocused:!0,isOpen:t},function(){t?this._bindCloseMenuIfClickedOutside():this._unbindCloseMenuIfClickedOutside()}),this._openAfterFocus=!1,this.props.onFocus&&this.props.onFocus(e)},handleInputBlur:function(e){this._blurTimeout=setTimeout(function(){this._focusAfterUpdate||this.setState({isFocused:!1})}.bind(this),50),this.props.onBlur&&this.props.onBlur(e)},handleKeyDown:function(e){if(!this.state.disabled){switch(e.keyCode){case 8:return void(this.state.inputValue||this.popValue());case 9:if(e.shiftKey||!this.state.isOpen||!this.state.focusedOption)return;this.selectFocusedOption();break;case 13:this.selectFocusedOption();break;case 27:this.state.isOpen?this.resetValue():this.clearValue();break;case 38:this.focusPreviousOption();break;case 40:this.focusNextOption();break;default:return}e.preventDefault()}},handleInputChange:function(e){if(this._optionsFilterString=e.target.value,this.props.asyncOptions)this.setState({isLoading:!0,inputValue:e.target.value}),this.loadAsyncOptions(e.target.value,{isLoading:!1,isOpen:!0},this._bindCloseMenuIfClickedOutside);else{var t=this.filterOptions(this.state.options);this.setState({isOpen:!0,inputValue:e.target.value,filteredOptions:t,focusedOption:n.contains(t,this.state.focusedOption)?this.state.focusedOption:t[0]},this._bindCloseMenuIfClickedOutside)}},autoloadAsyncOptions:function(){this.loadAsyncOptions("",{},function(){})},loadAsyncOptions:function(e,t){for(var s=this._currentRequestId=u++,i=0;i<=e.length;i++){var o=e.slice(0,i);if(this._optionsCache[o]&&(e===o||this._optionsCache[o].complete)){var a=this._optionsCache[o].options;return void this.setState(n.extend({options:a,filteredOptions:this.filterOptions(a)},t))}}this.props.asyncOptions(e,function(i,o){this._optionsCache[e]=o,s===this._currentRequestId&&this.setState(n.extend({options:o.options,filteredOptions:this.filterOptions(o.options)},t))}.bind(this))},filterOptions:function(e,t){if(!this.props.searchable)return e;var s=this._optionsFilterString,i=(t||this.state.values).map(function(e){return e.value});if(this.props.filterOptions)return this.props.filterOptions.call(this,e,s,i);var o=function(e){if(this.props.multi&&n.contains(i,e.value))return!1;if(this.props.filterOption)return this.props.filterOption.call(this,e,s);var t=String(e.value),o=String(e.label);return s&&"start"!==this.props.matchPos?"label"!==this.props.matchProp&&t.toLowerCase().indexOf(s.toLowerCase())>=0||"value"!==this.props.matchProp&&o.toLowerCase().indexOf(s.toLowerCase())>=0:"label"!==this.props.matchProp&&t.toLowerCase().substr(0,s.length)===s||"value"!==this.props.matchProp&&o.toLowerCase().substr(0,s.length)===s};return n.filter(e,o,this)},selectFocusedOption:function(){return this.selectValue(this.state.focusedOption)},focusOption:function(e){this.setState({focusedOption:e})},focusNextOption:function(){this.focusAdjacentOption("next")},focusPreviousOption:function(){this.focusAdjacentOption("previous")},focusAdjacentOption:function(e){this._focusedOptionReveal=!0;var t=this.state.filteredOptions;if(!this.state.isOpen)return void this.setState({isOpen:!0,inputValue:"",focusedOption:this.state.focusedOption||t["next"===e?0:t.length-1]},this._bindCloseMenuIfClickedOutside);if(t.length){for(var s=-1,i=0;i<t.length;i++)if(this.state.focusedOption===t[i]){s=i;break}var n=t[0];"next"===e&&s>-1&&s<t.length-1?n=t[s+1]:"previous"===e&&(n=s>0?t[s-1]:t[t.length-1]),this.setState({focusedOption:n})}},unfocusOption:function(e){this.state.focusedOption===e&&this.setState({focusedOption:null})},buildMenu:function(){var e=this.state.focusedOption?this.state.focusedOption.value:null,t=n.map(this.state.filteredOptions,function(t){var s=e===t.value,i=l({"Select-option":!0,"is-focused":s}),n=s?"focused":null,a=this.focusOption.bind(this,t),r=this.unfocusOption.bind(this,t),u=this.selectValue.bind(this,t);return o.createElement("div",{ref:n,key:"option-"+t.value,className:i,onMouseEnter:a,onMouseLeave:r,onMouseDown:u,onClick:u},t.label)},this);return t.length?t:o.createElement("div",{className:"Select-noresults"},this.props.asyncOptions&&!this.state.inputValue?this.props.searchPromptText:this.props.noResultsText)},handleOptionLabelClick:function(e,t){var s=this.props.onOptionLabelClick;s&&s(e,t)},render:function(){var e=l("Select",this.props.className,{"is-multi":this.props.multi,"is-searchable":this.props.searchable,"is-open":this.state.isOpen,"is-focused":this.state.isFocused,"is-loading":this.state.isLoading,"is-disabled":this.props.disabled,"has-value":this.state.value}),t=[];this.props.multi&&this.state.values.forEach(function(e){var s=n.extend({key:e.value,optionLabelClick:!!this.props.onOptionLabelClick,onOptionLabelClick:this.handleOptionLabelClick.bind(this,e),onRemove:this.removeValue.bind(this,e)},e);t.push(o.createElement(r,s))},this),!this.props.disabled&&(this.state.inputValue||this.props.multi&&t.length)||t.push(o.createElement("div",{className:"Select-placeholder",key:"placeholder"},this.state.placeholder));var s,u,p=this.state.isLoading?o.createElement("span",{className:"Select-loading","aria-hidden":"true"}):null,c=this.props.clearable&&this.state.value&&!this.props.disabled?o.createElement("span",{className:"Select-clear",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onClick:this.clearValue,dangerouslySetInnerHTML:{__html:"&times;"}}):null;this.state.isOpen&&(u={ref:"menu",className:"Select-menu"},this.props.multi&&(u.onMouseDown=this.handleMouseDown),s=o.createElement("div",{ref:"selectMenuContainer",className:"Select-menu-outer"},o.createElement("div",u,this.buildMenu())));var h,d=n.extend({ref:"input",className:"Select-input",tabIndex:this.props.tabIndex||0,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur},this.props.inputProps);return h=this.props.searchable&&!this.props.disabled?o.createElement(a,i({value:this.state.inputValue,onChange:this.handleInputChange,minWidth:"5"},d)):o.createElement("div",d," "),o.createElement("div",{ref:"wrapper",className:e},o.createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:this.state.value,disabled:this.props.disabled}),o.createElement("div",{className:"Select-control",ref:"control",onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onTouchEnd:this.handleMouseDown},t,h,o.createElement("span",{className:"Select-arrow"}),p,c),s)}});t.exports=p}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Value":2}],2:[function(e,t){(function(e){"use strict";var s=("undefined"!=typeof window?window._:"undefined"!=typeof e?e._:null,"undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null),i=s.createClass({displayName:"Value",propTypes:{label:s.PropTypes.string.isRequired},blockEvent:function(e){e.stopPropagation()},render:function(){var e=this.props.label;return this.props.optionLabelClick&&(e=s.createElement("a",{className:"Select-item-label__a",onMouseDown:this.blockEvent,onTouchEnd:this.props.onOptionLabelClick,onClick:this.props.onOptionLabelClick},e)),s.createElement("div",{className:"Select-item"},s.createElement("span",{className:"Select-item-icon",onMouseDown:this.blockEvent,onClick:this.props.onRemove,onTouchEnd:this.props.onRemove},"×"),s.createElement("span",{className:"Select-item-label"},e))}});t.exports=i}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Select=e()}}(function(){return function e(t,s,i){function n(a,l){if(!s[a]){if(!t[a]){var r="function"==typeof require&&require;if(!l&&r)return r(a,!0);if(o)return o(a,!0);var u=new Error("Cannot find module '"+a+"'");throw u.code="MODULE_NOT_FOUND",u}var p=s[a]={exports:{}};t[a][0].call(p.exports,function(e){var s=t[a][1][e];return n(s?s:e)},p,p.exports,e,t,s,i)}return s[a].exports}for(var o="function"==typeof require&&require,a=0;a<i.length;a++)n(i[a]);return n}({1:[function(e,t){(function(s){"use strict";var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var i in s)Object.prototype.hasOwnProperty.call(s,i)&&(e[i]=s[i])}return e},n="undefined"!=typeof window?window._:"undefined"!=typeof s?s._:null,o="undefined"!=typeof window?window.React:"undefined"!=typeof s?s.React:null,a="undefined"!=typeof window?window.AutosizeInput:"undefined"!=typeof s?s.AutosizeInput:null,l="undefined"!=typeof window?window.classNames:"undefined"!=typeof s?s.classNames:null,r=e("./Value"),u=0,p=o.createClass({displayName:"Select",propTypes:{value:o.PropTypes.any,multi:o.PropTypes.bool,disabled:o.PropTypes.bool,options:o.PropTypes.array,delimiter:o.PropTypes.string,asyncOptions:o.PropTypes.func,autoload:o.PropTypes.bool,placeholder:o.PropTypes.string,noResultsText:o.PropTypes.string,clearable:o.PropTypes.bool,clearValueText:o.PropTypes.string,clearAllText:o.PropTypes.string,searchable:o.PropTypes.bool,searchPromptText:o.PropTypes.string,name:o.PropTypes.string,onChange:o.PropTypes.func,onFocus:o.PropTypes.func,onBlur:o.PropTypes.func,className:o.PropTypes.string,filterOption:o.PropTypes.func,filterOptions:o.PropTypes.func,matchPos:o.PropTypes.string,matchProp:o.PropTypes.string,inputProps:o.PropTypes.object,onOptionLabelClick:o.PropTypes.func},getDefaultProps:function(){return{value:void 0,options:[],disabled:!1,delimiter:",",asyncOptions:void 0,autoload:!0,placeholder:"Select...",noResultsText:"No results found",clearable:!0,clearValueText:"Clear value",clearAllText:"Clear all",searchable:!0,searchPromptText:"Type to search",name:void 0,onChange:void 0,className:void 0,matchPos:"any",matchProp:"any",inputProps:{},onOptionLabelClick:void 0}},getInitialState:function(){return{options:this.props.options,isFocused:!1,isOpen:!1,isLoading:!1}},componentWillMount:function(){this._optionsCache={},this._optionsFilterString="",this.setState(this.getStateFromValue(this.props.value)),this.props.asyncOptions&&this.props.autoload&&this.autoloadAsyncOptions(),this._closeMenuIfClickedOutside=function(e){var t=this.refs.selectMenuContainer.getDOMNode(),s=this.refs.control.getDOMNode(),i=this.clickedOutsideElement(t,e),n=this.clickedOutsideElement(s,e);i&&n&&this.setState({isOpen:!1},this._unbindCloseMenuIfClickedOutside)}.bind(this),this._bindCloseMenuIfClickedOutside=function(){document.addEventListener("click",this._closeMenuIfClickedOutside)},this._unbindCloseMenuIfClickedOutside=function(){document.removeEventListener("click",this._closeMenuIfClickedOutside)}},componentWillUnmount:function(){clearTimeout(this._blurTimeout),clearTimeout(this._focusTimeout),this.state.isOpen&&this._unbindCloseMenuIfClickedOutside()},componentWillReceiveProps:function(e){e.value!==this.state.value&&this.setState(this.getStateFromValue(e.value,e.options)),JSON.stringify(e.options)!==JSON.stringify(this.props.options)&&this.setState({options:e.options,filteredOptions:this.filterOptions(e.options)})},componentDidUpdate:function(){if(this._focusAfterUpdate&&(clearTimeout(this._blurTimeout),this._focusTimeout=setTimeout(function(){this.getInputNode().focus(),this._focusAfterUpdate=!1}.bind(this),50)),this._focusedOptionReveal){if(this.refs.focused&&this.refs.menu){var e=this.refs.focused.getDOMNode(),t=this.refs.menu.getDOMNode(),s=e.getBoundingClientRect(),i=t.getBoundingClientRect();(s.bottom>i.bottom||s.top<i.top)&&(t.scrollTop=e.offsetTop+e.clientHeight-t.offsetHeight)}this._focusedOptionReveal=!1}},clickedOutsideElement:function(e,t){for(var s=t.target?t.target:t.srcElement;null!=s;){if(s===e)return!1;s=s.offsetParent}return!0},getStateFromValue:function(e,t){t||(t=this.state.options),this._optionsFilterString="";var s=this.initValuesArray(e,t),i=this.filterOptions(t,s);return{value:s.map(function(e){return e.value}).join(this.props.delimiter),values:s,inputValue:"",filteredOptions:i,placeholder:!this.props.multi&&s.length?s[0].label:this.props.placeholder,focusedOption:!this.props.multi&&s.length?s[0]:i[0]}},initValuesArray:function(e,t){return Array.isArray(e)||(e="string"==typeof e?e.split(this.props.delimiter):e?[e]:[]),e.map(function(e){return"string"==typeof e?e=n.findWhere(t,{value:e})||{value:e,label:e}:e})},setValue:function(e){this._focusAfterUpdate=!0;var t=this.getStateFromValue(e);t.isOpen=!1,this.fireChangeEvent(t),this.setState(t)},selectValue:function(e){this.props.multi?e&&this.addValue(e):this.setValue(e),this._unbindCloseMenuIfClickedOutside()},addValue:function(e){this.setValue(this.state.values.concat(e))},popValue:function(){this.setValue(n.initial(this.state.values))},removeValue:function(e){this.setValue(n.without(this.state.values,e))},clearValue:function(e){e&&"mousedown"===e.type&&0!==e.button||this.setValue(null)},resetValue:function(){this.setValue(this.state.value)},getInputNode:function(){var e=this.refs.input;return this.props.searchable?e:e.getDOMNode()},fireChangeEvent:function(e){e.value!==this.state.value&&this.props.onChange&&this.props.onChange(e.value,e.values)},handleMouseDown:function(e){this.props.disabled||"mousedown"===e.type&&0!==e.button||(e.stopPropagation(),e.preventDefault(),this.state.isFocused?this.setState({isOpen:!0},this._bindCloseMenuIfClickedOutside):(this._openAfterFocus=!0,this.getInputNode().focus()))},handleInputFocus:function(e){var t=this.state.isOpen||this._openAfterFocus;this.setState({isFocused:!0,isOpen:t},function(){t?this._bindCloseMenuIfClickedOutside():this._unbindCloseMenuIfClickedOutside()}),this._openAfterFocus=!1,this.props.onFocus&&this.props.onFocus(e)},handleInputBlur:function(e){this._blurTimeout=setTimeout(function(){this._focusAfterUpdate||this.setState({isFocused:!1})}.bind(this),50),this.props.onBlur&&this.props.onBlur(e)},handleKeyDown:function(e){if(!this.state.disabled){switch(e.keyCode){case 8:return void(this.state.inputValue||this.popValue());case 9:if(e.shiftKey||!this.state.isOpen||!this.state.focusedOption)return;this.selectFocusedOption();break;case 13:this.selectFocusedOption();break;case 27:this.state.isOpen?this.resetValue():this.clearValue();break;case 38:this.focusPreviousOption();break;case 40:this.focusNextOption();break;default:return}e.preventDefault()}},handleInputChange:function(e){if(this._optionsFilterString=e.target.value,this.props.asyncOptions)this.setState({isLoading:!0,inputValue:e.target.value}),this.loadAsyncOptions(e.target.value,{isLoading:!1,isOpen:!0},this._bindCloseMenuIfClickedOutside);else{var t=this.filterOptions(this.state.options);this.setState({isOpen:!0,inputValue:e.target.value,filteredOptions:t,focusedOption:n.contains(t,this.state.focusedOption)?this.state.focusedOption:t[0]},this._bindCloseMenuIfClickedOutside)}},autoloadAsyncOptions:function(){this.loadAsyncOptions("",{},function(){})},loadAsyncOptions:function(e,t){for(var s=this._currentRequestId=u++,i=0;i<=e.length;i++){var o=e.slice(0,i);if(this._optionsCache[o]&&(e===o||this._optionsCache[o].complete)){var a=this._optionsCache[o].options,l=this.filterOptions(a);return void this.setState(n.extend({options:a,filteredOptions:l,focusedOption:n.contains(l,this.state.focusedOption)?this.state.focusedOption:l[0]},t))}}this.props.asyncOptions(e,function(i,o){if(i)throw i;if(this._optionsCache[e]=o,s===this._currentRequestId){var a=this.filterOptions(o.options);this.setState(n.extend({options:o.options,filteredOptions:a,focusedOption:n.contains(a,this.state.focusedOption)?this.state.focusedOption:a[0]},t))}}.bind(this))},filterOptions:function(e,t){if(!this.props.searchable)return e;var s=this._optionsFilterString,i=(t||this.state.values).map(function(e){return e.value});if(this.props.filterOptions)return this.props.filterOptions.call(this,e,s,i);var o=function(e){if(this.props.multi&&n.contains(i,e.value))return!1;if(this.props.filterOption)return this.props.filterOption.call(this,e,s);var t=String(e.value),o=String(e.label);return s&&"start"!==this.props.matchPos?"label"!==this.props.matchProp&&t.toLowerCase().indexOf(s.toLowerCase())>=0||"value"!==this.props.matchProp&&o.toLowerCase().indexOf(s.toLowerCase())>=0:"label"!==this.props.matchProp&&t.toLowerCase().substr(0,s.length)===s||"value"!==this.props.matchProp&&o.toLowerCase().substr(0,s.length)===s};return n.filter(e,o,this)},selectFocusedOption:function(){return this.selectValue(this.state.focusedOption)},focusOption:function(e){this.setState({focusedOption:e})},focusNextOption:function(){this.focusAdjacentOption("next")},focusPreviousOption:function(){this.focusAdjacentOption("previous")},focusAdjacentOption:function(e){this._focusedOptionReveal=!0;var t=this.state.filteredOptions;if(!this.state.isOpen)return void this.setState({isOpen:!0,inputValue:"",focusedOption:this.state.focusedOption||t["next"===e?0:t.length-1]},this._bindCloseMenuIfClickedOutside);if(t.length){for(var s=-1,i=0;i<t.length;i++)if(this.state.focusedOption===t[i]){s=i;break}var n=t[0];"next"===e&&s>-1&&s<t.length-1?n=t[s+1]:"previous"===e&&(n=s>0?t[s-1]:t[t.length-1]),this.setState({focusedOption:n})}},unfocusOption:function(e){this.state.focusedOption===e&&this.setState({focusedOption:null})},buildMenu:function(){var e=this.state.focusedOption?this.state.focusedOption.value:null;this.state.filteredOptions.length>0&&(e=null==e?this.state.filteredOptions[0]:e);var t=n.map(this.state.filteredOptions,function(t){var s=e===t.value,i=l({"Select-option":!0,"is-focused":s}),n=s?"focused":null,a=this.focusOption.bind(this,t),r=this.unfocusOption.bind(this,t),u=this.selectValue.bind(this,t);return o.createElement("div",{ref:n,key:"option-"+t.value,className:i,onMouseEnter:a,onMouseLeave:r,onMouseDown:u,onClick:u},t.label)},this);return t.length?t:o.createElement("div",{className:"Select-noresults"},this.props.asyncOptions&&!this.state.inputValue?this.props.searchPromptText:this.props.noResultsText)},handleOptionLabelClick:function(e,t){var s=this.props.onOptionLabelClick;s&&s(e,t)},render:function(){var e=l("Select",this.props.className,{"is-multi":this.props.multi,"is-searchable":this.props.searchable,"is-open":this.state.isOpen,"is-focused":this.state.isFocused,"is-loading":this.state.isLoading,"is-disabled":this.props.disabled,"has-value":this.state.value}),t=[];this.props.multi&&this.state.values.forEach(function(e){var s=n.extend({key:e.value,optionLabelClick:!!this.props.onOptionLabelClick,onOptionLabelClick:this.handleOptionLabelClick.bind(this,e),onRemove:this.removeValue.bind(this,e)},e);t.push(o.createElement(r,s))},this),!this.props.disabled&&(this.state.inputValue||this.props.multi&&t.length)||t.push(o.createElement("div",{className:"Select-placeholder",key:"placeholder"},this.state.placeholder));var s,u,p=this.state.isLoading?o.createElement("span",{className:"Select-loading","aria-hidden":"true"}):null,c=this.props.clearable&&this.state.value&&!this.props.disabled?o.createElement("span",{className:"Select-clear",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onClick:this.clearValue,dangerouslySetInnerHTML:{__html:"&times;"}}):null;this.state.isOpen&&(u={ref:"menu",className:"Select-menu"},this.props.multi&&(u.onMouseDown=this.handleMouseDown),s=o.createElement("div",{ref:"selectMenuContainer",className:"Select-menu-outer"},o.createElement("div",u,this.buildMenu())));var h,d=n.extend({ref:"input",className:"Select-input",tabIndex:this.props.tabIndex||0,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur},this.props.inputProps);return h=this.props.searchable&&!this.props.disabled?o.createElement(a,i({value:this.state.inputValue,onChange:this.handleInputChange,minWidth:"5"},d)):o.createElement("div",d," "),o.createElement("div",{ref:"wrapper",className:e},o.createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:this.state.value,disabled:this.props.disabled}),o.createElement("div",{className:"Select-control",ref:"control",onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onTouchEnd:this.handleMouseDown},t,h,o.createElement("span",{className:"Select-arrow"}),p,c),s)}});t.exports=p}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Value":2}],2:[function(e,t){(function(e){"use strict";var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,i=s.createClass({displayName:"Value",propTypes:{label:s.PropTypes.string.isRequired},blockEvent:function(e){e.stopPropagation()},render:function(){var e=this.props.label;return this.props.optionLabelClick&&(e=s.createElement("a",{className:"Select-item-label__a",onMouseDown:this.blockEvent,onTouchEnd:this.props.onOptionLabelClick,onClick:this.props.onOptionLabelClick},e)),s.createElement("div",{className:"Select-item"},s.createElement("span",{className:"Select-item-icon",onMouseDown:this.blockEvent,onClick:this.props.onRemove,onTouchEnd:this.props.onRemove},"×"),s.createElement("span",{className:"Select-item-label"},e))}});t.exports=i}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});

examples/src/app.js

@@ -0,1 +1,6 @@
+/*
+Note: ESLint is currently misreporting unused / undeclared variables for JSX.
+These errors can be ignored until the bug has been fixed.
+ */
+
 var React = require('react'),
@@ -19,3 +24,3 @@ Select = require('react-select');
 });
- 
+
 var StatesField = React.createClass({
@@ -25,6 +30,5 @@ getDefaultProps: function () {
 			searchable: true,
-			label: 'States:',
+			label: 'States:'
 		};
 	},
-
 	getInitialState: function() {
@@ -64,8 +68,7 @@ return {
 });
- 
+
 var RemoteSelectField = React.createClass({
 	loadOptions: function(input, callback) {
-		
 		input = input.toLowerCase();
-		
+
 		var rtn = {
@@ -79,5 +82,5 @@ options: [
 		};
-		
-		if (input.slice(0,1) === 'a') {
-			if (input.slice(0,2) === 'ab') {
+
+		if (input.slice(0, 1) === 'a') {
+			if (input.slice(0, 2) === 'ab') {
 				rtn = {
@@ -104,13 +107,14 @@ options: [
 		}
-		
+
 		setTimeout(function() {
 			callback(null, rtn);
 		}, 500);
-		
 	},
 	render: function() {
-		return <div>
-			<label>{this.props.label}</label>
-			<Select asyncOptions={this.loadOptions} className="remote-example" />
-		</div>;
+		return (
+			<div>
+				<label>{this.props.label}</label>
+				<Select asyncOptions={this.loadOptions} className="remote-example" />
+			</div>
+		);
 	}
@@ -142,3 +146,3 @@ });
 	},
-	
+
 	render: function() {
@@ -145,0 +149,0 @@ var ops = [

HISTORY.md

 # React-Select
 
-## v0.4.1 / 2015-03-12
+## v0.4.2 / 2015-03-23
 
+* added; ESLint and contributing guide
+* fixed; incorrect `classnames` variable assignement in window scope
+* fixed; all ESLint errors and warnings (except invalid JSX undefined/unused vars due to ESLint bug)
+* fixed; first option is now focused correctly, thanks [Eivind Siqveland Larsen](https://github.com/esiqveland)
+
+## v0.4.1 / 2015-03-20
+
 * fixed; IE11 issue: clicking on scrollbar within menu no longer closes menu, thanks [Rohit Kalkur](https://github.com/rovolution)
@@ -6,0 +13,0 @@

lib/Select.js

@@ -44,8 +44,8 @@ "use strict";
 		/*
-  
   * Allow user to make option label clickable. When this handler is defined we should
   * wrap label into <a>label</a> tag.
-  * 
+  *
   * onOptionLabelClick handler: function (value, event) {}
-  * */
+  *
+  */
 		onOptionLabelClick: React.PropTypes.func
@@ -180,3 +180,3 @@ },
 		while (eventTarget != null) {
-			if (eventTarget == element) {
+			if (eventTarget === element) {
 				return false;
@@ -189,3 +189,2 @@ }eventTarget = eventTarget.offsetParent;
 	getStateFromValue: function getStateFromValue(value, options) {
-
 		if (!options) {
@@ -214,5 +213,4 @@ options = this.state.options;
 	initValuesArray: function initValuesArray(values, options) {
-
 		if (!Array.isArray(values)) {
-			if ("string" === typeof values) {
+			if (typeof values === "string") {
 				values = values.split(this.props.delimiter);
@@ -224,5 +222,5 @@ } else {
 
-		return values.map((function (val) {
-			return "string" === typeof val ? val = _.findWhere(options, { value: val }) || { value: val, label: val } : val;
-		}).bind(this));
+		return values.map(function (val) {
+			return typeof val === "string" ? val = _.findWhere(options, { value: val }) || { value: val, label: val } : val;
+		});
 	},
@@ -262,3 +260,3 @@
 		// button, ignore it.
-		if (event && event.type == "mousedown" && event.button !== 0) {
+		if (event && event.type === "mousedown" && event.button !== 0) {
 			return;
@@ -287,3 +285,3 @@ }
 		// button, or if the component is disabled, ignore it.
-		if (this.props.disabled || event.type == "mousedown" && event.button !== 0) {
+		if (this.props.disabled || event.type === "mousedown" && event.button !== 0) {
 			return;
@@ -337,3 +335,2 @@ }
 	handleKeyDown: function handleKeyDown(event) {
-
 		if (this.state.disabled) {
@@ -349,3 +346,2 @@ return;
 				return;
-				break;
 
@@ -392,3 +388,2 @@ case 9:
 	handleInputChange: function handleInputChange(event) {
-
 		// assign an internal variable because we need to use
@@ -423,3 +418,2 @@ // the latest value before setState() has completed.
 	loadAsyncOptions: function loadAsyncOptions(input, state) {
-
 		var thisRequestId = this._currentRequestId = requestId++;
@@ -431,5 +425,8 @@
 				var options = this._optionsCache[cacheKey].options;
+				var filteredOptions = this.filterOptions(options);
+
 				this.setState(_.extend({
 					options: options,
-					filteredOptions: this.filterOptions(options)
+					filteredOptions: filteredOptions,
+					focusedOption: _.contains(filteredOptions, this.state.focusedOption) ? this.state.focusedOption : filteredOptions[0]
 				}, state));
@@ -442,2 +439,4 @@ return;
 
+			if (err) throw err;
+
 			this._optionsCache[input] = data;
@@ -448,6 +447,8 @@
 			}
+			var filteredOptions = this.filterOptions(data.options);
 
 			this.setState(_.extend({
 				options: data.options,
-				filteredOptions: this.filterOptions(data.options)
+				filteredOptions: filteredOptions,
+				focusedOption: _.contains(filteredOptions, this.state.focusedOption) ? this.state.focusedOption : filteredOptions[0]
 			}, state));
@@ -553,5 +554,8 @@ }).bind(this));
 	buildMenu: function buildMenu() {
-
 		var focusedValue = this.state.focusedOption ? this.state.focusedOption.value : null;
 
+		if (this.state.filteredOptions.length > 0) {
+			focusedValue = focusedValue == null ? this.state.filteredOptions[0] : focusedValue;
+		}
+
 		var ops = _.map(this.state.filteredOptions, function (op) {
@@ -594,3 +598,2 @@ var isFocused = focusedValue === op.value;
 	render: function render() {
-
 		var selectClass = classes("Select", this.props.className, {
@@ -597,0 +600,0 @@ "is-multi": this.props.multi,

lib/Value.js

 "use strict";
 
-var _ = require("lodash"),
-    React = require("react");
+var React = require("react");
 
@@ -6,0 +5,0 @@ var Option = React.createClass({

package.json

 {
   "name": "react-select",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "A Select control built with and for ReactJS",
@@ -19,2 +19,5 @@ "main": "lib/Select.js",
   "devDependencies": {
+    "babel-eslint": "^2.0.2",
+    "eslint": "^0.17.1",
+    "eslint-plugin-react": "^1.5.0",
     "gulp": "^3.8.11",
@@ -24,3 +27,3 @@ "react-component-gulp-tasks": "^0.4.2"
   "browserify-shim": {
-    "classnames": "global:classnames",
+    "classnames": "global:classNames",
     "react": "global:React",
@@ -31,3 +34,4 @@ "react-input-autosize": "global:AutosizeInput",
   "scripts": {
-    "test": "echo \"no tests yet\" && exit 0"
+    "test": "echo \"no tests yet\" && exit 0",
+    "lint": "eslint ./; true"
   },
@@ -34,0 +38,0 @@ "keywords": [

README.md

@@ -75,3 +75,3 @@ React-Select
 
-You can enable multi-value selection by setting `multi="true"`. In this mode:
+You can enable multi-value selection by setting `multi={true}`. In this mode:
 
@@ -105,2 +105,4 @@ * Selected options will be removed from the dropdown menu
 			],
+			// CAREFUL! Only set this to true when there are no more options,
+			// or more specific queries will not be sent to the server.
 			complete: true
@@ -107,0 +109,0 @@ });

src/Select.js

@@ -40,8 +40,8 @@ var _ = require('lodash'),
 		/*
-		
 		* Allow user to make option label clickable. When this handler is defined we should
 		* wrap label into <a>label</a> tag.
-		* 
+		*
 		* onOptionLabelClick handler: function (value, event) {}
-		* */
+		*
+		*/
 		onOptionLabelClick: React.PropTypes.func
@@ -175,13 +175,11 @@ },
 	clickedOutsideElement: function(element, event) {
-	  var eventTarget = (event.target) ? event.target : event.srcElement;
-	  while(eventTarget != null) {
-	    if(eventTarget == element)
-	      return false;
-	    eventTarget = eventTarget.offsetParent;
-	  }
-	  return true;
+		var eventTarget = (event.target) ? event.target : event.srcElement;
+		while (eventTarget != null) {
+			if (eventTarget === element) return false;
+			eventTarget = eventTarget.offsetParent;
+		}
+		return true;
 	},
 
 	getStateFromValue: function(value, options) {
-
 		if (!options) {
@@ -205,9 +203,7 @@ options = this.state.options;
 		};
-
 	},
 
 	initValuesArray: function(values, options) {
-
 		if (!Array.isArray(values)) {
-			if ('string' === typeof values) {
+			if (typeof values === 'string') {
 				values = values.split(this.props.delimiter);
@@ -220,5 +216,4 @@ } else {
 		return values.map(function(val) {
-			return ('string' === typeof val) ? val = _.findWhere(options, { value: val }) || { value: val, label: val } : val;
-		}.bind(this));
-
+			return (typeof val === 'string') ? val = _.findWhere(options, { value: val }) || { value: val, label: val } : val;
+		});
 	},
@@ -254,7 +249,7 @@
 	},
-	
+
 	clearValue: function(event) {
 		// if the event was triggered by a mousedown and not the primary
 		// button, ignore it.
-		if (event && event.type == 'mousedown' && event.button !== 0) {
+		if (event && event.type === 'mousedown' && event.button !== 0) {
 			return;
@@ -283,6 +278,6 @@ }
 		// button, or if the component is disabled, ignore it.
-		if (this.props.disabled || (event.type == 'mousedown' && event.button !== 0)) {
+		if (this.props.disabled || (event.type === 'mousedown' && event.button !== 0)) {
 			return;
 		}
-		
+
 		event.stopPropagation();
@@ -310,7 +305,7 @@ event.preventDefault();
 			else {
-				this._unbindCloseMenuIfClickedOutside();	
+				this._unbindCloseMenuIfClickedOutside();
 			}
 		});
 		this._openAfterFocus = false;
-		
+
 		if (this.props.onFocus) {
@@ -328,3 +323,3 @@ this.props.onFocus(event);
 		}.bind(this), 50);
-		
+
 		if (this.props.onBlur) {
@@ -336,6 +331,4 @@ this.props.onBlur(event);
 	handleKeyDown: function(event) {
+		if (this.state.disabled) return;
 
-		if(this.state.disabled)
-			return;
-
 		switch (event.keyCode) {
@@ -347,4 +340,3 @@
 				}
-				return;
-			break;
+			return;
 
@@ -382,7 +374,5 @@ case 9: // tab
 		event.preventDefault();
-
 	},
 
 	handleInputChange: function(event) {
-
 		// assign an internal variable because we need to use
@@ -410,3 +400,2 @@ // the latest value before setState() has completed.
 		}
-
 	},
@@ -419,3 +408,2 @@
 	loadAsyncOptions: function(input, state) {
-
 		var thisRequestId = this._currentRequestId = requestId++;
@@ -427,5 +415,8 @@
 				var options = this._optionsCache[cacheKey].options;
+				var filteredOptions = this.filterOptions(options);
+
 				this.setState(_.extend({
 					options: options,
-					filteredOptions: this.filterOptions(options)
+					filteredOptions: filteredOptions,
+					focusedOption: _.contains(filteredOptions, this.state.focusedOption) ? this.state.focusedOption : filteredOptions[0]
 				}, state));
@@ -438,2 +429,4 @@ return;
 
+			if (err) throw err;
+
 			this._optionsCache[input] = data;
@@ -444,10 +437,11 @@
 			}
+			var filteredOptions = this.filterOptions(data.options);
 
 			this.setState(_.extend({
 				options: data.options,
-				filteredOptions: this.filterOptions(data.options)
+				filteredOptions: filteredOptions,
+				focusedOption: _.contains(filteredOptions, this.state.focusedOption) ? this.state.focusedOption : filteredOptions[0]
 			}, state));
 
 		}.bind(this));
-
 	},
@@ -555,5 +549,8 @@
 	buildMenu: function() {
-
 		var focusedValue = this.state.focusedOption ? this.state.focusedOption.value : null;
 
+		if(this.state.filteredOptions.length > 0) {
+			focusedValue = focusedValue == null ? this.state.filteredOptions[0] : focusedValue;
+		}
+
 		var ops = _.map(this.state.filteredOptions, function(op) {
@@ -582,3 +579,2 @@ var isFocused = focusedValue === op.value;
 		);
-
 	},
@@ -588,3 +584,3 @@
 		var handler = this.props.onOptionLabelClick;
-		
+
 		if (handler) {
@@ -594,5 +590,4 @@ handler(value, event);
 	},
-	
+
 	render: function() {
-
 		var selectClass = classes('Select', this.props.className, {
@@ -604,3 +599,3 @@ 'is-multi': this.props.multi,
 			'is-loading': this.state.isLoading,
-			'is-disabled' : this.props.disabled,
+			'is-disabled': this.props.disabled,
 			'has-value': this.state.value
@@ -618,3 +613,3 @@ });
 					onRemove: this.removeValue.bind(this, val)
-				}, val); 
+				}, val);
 				value.push(<Value {...props} />);
@@ -635,4 +630,4 @@ }, this);
 			menuProps = {
-				ref: "menu",
-				className: "Select-menu"
+				ref: 'menu',
+				className: 'Select-menu'
 			};
@@ -657,3 +652,3 @@ if (this.props.multi) {
 		}, this.props.inputProps);
-		
+
 		if (this.props.searchable && !this.props.disabled) {
@@ -678,3 +673,2 @@ input = <Input value={this.state.inputValue} onChange={this.handleInputChange} minWidth="5" {...inputProps} />;
 		);
-
 	}
@@ -681,0 +675,0 @@

src/Value.js

@@ -1,25 +0,24 @@
-var _ = require('lodash'),
-	React = require('react');
+var React = require('react');
 
 var Option = React.createClass({
-	
+
 	displayName: 'Value',
-	
+
 	propTypes: {
 		label: React.PropTypes.string.isRequired
 	},
-	
+
 	blockEvent: function(event) {
-		event.stopPropagation(); 
+		event.stopPropagation();
 	},
-	
+
 	render: function() {
 		var label = this.props.label;
-		
+
 		if (this.props.optionLabelClick) {
 			label = (
 				<a className="Select-item-label__a"
-				   onMouseDown={this.blockEvent}
-				   onTouchEnd={this.props.onOptionLabelClick}
-				   onClick={this.props.onOptionLabelClick}>
+					onMouseDown={this.blockEvent}
+					onTouchEnd={this.props.onOptionLabelClick}
+					onClick={this.props.onOptionLabelClick}>
 					{label}
@@ -29,9 +28,9 @@ </a>
 		}
-		
+
 		return (
 			<div className="Select-item">
 				<span className="Select-item-icon"
-				      onMouseDown={this.blockEvent}
-				      onClick={this.props.onRemove}
-				      onTouchEnd={this.props.onRemove}>&times;</span>
+					onMouseDown={this.blockEvent}
+					onClick={this.props.onRemove}
+					onTouchEnd={this.props.onRemove}>&times;</span>
 				<span className="Select-item-label">{label}</span>
@@ -41,5 +40,5 @@ </div>
 	}
-	
+
 });
 
 module.exports = Option;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

122240

increased by4.31%

Number of package files

29

increased by11.54%

Lines of code

2307

increased by1.1%

Number of lines in readme file

140

increased by1.45%

Worsened metrics

Dev dependency count

5

increased by150%

No dependency changes