diff --git a/dist/react-select.js b/dist/react-select.js
index ec1ee3bd3a..465319b699 100644
--- a/dist/react-select.js
+++ b/dist/react-select.js
@@ -101,6 +101,7 @@ var Select = React.createClass({
inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
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
+ maxOptions: React.PropTypes.number, // max number of results to show
multi: React.PropTypes.bool, // multi-value input
name: React.PropTypes.string, // field name, for hidden tag
newOptionCreator: React.PropTypes.func, // factory to create new options when allowCreate set
@@ -140,6 +141,7 @@ var Select = React.createClass({
inputProps: {},
matchPos: 'any',
matchProp: 'any',
+ maxOptions: undefined,
name: undefined,
newOptionCreator: undefined,
noResultsText: 'No results found',
@@ -643,12 +645,19 @@ var Select = React.createClass({
},
filterOptions: function filterOptions(options, values) {
+ var _this7 = this;
+
var filterValue = this._optionsFilterString;
var exclude = (values || this.state.values).map(function (i) {
return i.value;
});
+ var limitResults = function limitResults(result) {
+ return (result || []).slice(0, _this7.props.maxOptions);
+ };
+
if (this.props.filterOptions) {
- return this.props.filterOptions.call(this, options, filterValue, exclude);
+ var filteredOptions = this.props.filterOptions.call(this, options, filterValue, exclude);
+ return limitResults(filteredOptions);
} else {
var filterOption = function filterOption(op) {
if (this.props.multi && exclude.indexOf(op.value) > -1) return false;
@@ -662,7 +671,8 @@ var Select = React.createClass({
}
return !filterValue || this.props.matchPos === 'start' ? this.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || this.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : this.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || this.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0;
};
- return (options || []).filter(filterOption, this);
+ var filterOptions = (options || []).filter(filterOption, this);
+ return limitResults(filterOptions);
}
},
diff --git a/dist/react-select.min.js b/dist/react-select.min.js
index 0b426f796b..ee452fea59 100644
--- a/dist/react-select.min.js
+++ b/dist/react-select.min.js
@@ -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 o(a,r){if(!s[a]){if(!t[a]){var l="function"==typeof require&&require;if(!r&&l)return l(a,!0);if(n)return n(a,!0);var p=new Error("Cannot find module '"+a+"'");throw p.code="MODULE_NOT_FOUND",p}var u=s[a]={exports:{}};t[a][0].call(u.exports,function(e){var s=t[a][1][e];return o(s?s:e)},u,u.exports,e,t,s,i)}return s[a].exports}for(var n="function"==typeof require&&require,a=0;an.bottom||i.top-1)return!1;if(this.props.filterOption)return this.props.filterOption.call(this,e,s);var t=String(e.value),o=String(e.label);return this.props.ignoreCase&&(t=t.toLowerCase(),o=o.toLowerCase(),s=s.toLowerCase()),s&&"start"!==this.props.matchPos?"label"!==this.props.matchProp&&t.indexOf(s)>=0||"value"!==this.props.matchProp&&o.indexOf(s)>=0:"label"!==this.props.matchProp&&t.substr(0,s.length)===s||"value"!==this.props.matchProp&&o.substr(0,s.length)===s};return(e||[]).filter(o,this)},selectFocusedOption:function(){return this.props.allowCreate&&!this.state.focusedOption?this.selectValue(this.state.inputValue):this.state.focusedOption?this.selectValue(this.state.focusedOption):void 0},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.filter(function(e){return!e.disabled});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-1&&s0?t[s-1]:t[t.length-1]),this.setState({focusedOption:o})}},unfocusOption:function(e){this.state.focusedOption===e&&this.setState({focusedOption:null})},buildMenu:function(){var e=this.state.focusedOption?this.state.focusedOption.value:null,t=this.props.optionRenderer||function(e){return e.label};this.state.filteredOptions.length>0&&(e=null==e?this.state.filteredOptions[0]:e);var s=this.state.filteredOptions;if(this.props.allowCreate&&this.state.inputValue.trim()){var i=this.state.inputValue;s=s.slice();var n=this.props.newOptionCreator?this.props.newOptionCreator(i):{value:i,label:i,create:!0};s.unshift(n)}var r=Object.keys(s).map(function(i){var n=s[i],r=this.state.value===n.value,l=e===n.value,p=a({"Select-option":!0,"is-selected":r,"is-focused":l,"is-disabled":n.disabled}),u=l?"focused":null,c=this.focusOption.bind(this,n),d=this.unfocusOption.bind(this,n),h=this.selectValue.bind(this,n),f=o.createElement(this.props.optionComponent,{key:"option-"+n.value,className:p,renderFunc:t,mouseEnter:c,mouseLeave:d,mouseDown:h,click:h,addLabelText:this.props.addLabelText,option:n,ref:u});return f},this);if(r.length)return r;var l,p;return this.state.isLoading?(p="Select-searching",l=this.props.searchingText):this.state.inputValue||!this.props.asyncOptions?(p="Select-noresults",l=this.props.noResultsText):(p="Select-search-prompt",l=this.props.searchPromptText),o.createElement("div",{className:p},l)},handleOptionLabelClick:function(e,t){this.props.onOptionLabelClick&&this.props.onOptionLabelClick(e,t)},render:function(){var e=a("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=[];if(this.props.multi&&this.state.values.forEach(function(e){var s=this.handleOptionLabelClick.bind(this,e),i=this.removeValue.bind(this,e),n=o.createElement(this.props.valueComponent,{key:e.value,option:e,renderer:this.props.valueRenderer,optionLabelClick:!!this.props.onOptionLabelClick,onOptionLabelClick:s,onRemove:i,disabled:this.props.disabled});t.push(n)},this),!(this.state.inputValue||this.props.multi&&t.length)){var s=this.state.values[0]||null;if(this.props.valueRenderer&&this.state.values.length)t.push(o.createElement(r,{key:0,option:s,renderer:this.props.valueRenderer,disabled:this.props.disabled}));else{var l=o.createElement(this.props.singleValueComponent,{key:"placeholder",value:s,placeholder:this.state.placeholder});t.push(l)}}var p,u,c=this.state.isLoading?o.createElement("span",{className:"Select-loading","aria-hidden":"true"}):null,d=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:"×"}}):null;this.state.isOpen&&(u={ref:"menu",className:"Select-menu",onMouseDown:this.handleMouseDown},p=o.createElement("div",{ref:"selectMenuContainer",className:"Select-menu-outer"},o.createElement("div",u,this.buildMenu())));var h,f={ref:"input",className:"Select-input "+(this.props.inputProps.className||""),tabIndex:this.props.tabIndex||0,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur};for(var v in this.props.inputProps)this.props.inputProps.hasOwnProperty(v)&&"className"!==v&&(f[v]=this.props.inputProps[v]);return this.props.disabled?this.props.multi&&this.state.values.length||(h=o.createElement("div",{className:"Select-input"}," ")):h=this.props.searchable?o.createElement(n,i({value:this.state.inputValue,onChange:this.handleInputChange,minWidth:"5"},f)):o.createElement("div",f," "),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-zone",onMouseDown:this.handleMouseDownOnArrow}),o.createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}),c,d),p)}});t.exports=c}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Option":1,"./SingleValue":3,"./Value":4}],3:[function(e,t,s){(function(e){"use strict";var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,i="undefined"!=typeof window?window.classNames:"undefined"!=typeof e?e.classNames:null,o=s.createClass({displayName:"SingleValue",propTypes:{placeholder:s.PropTypes.string,value:s.PropTypes.object},render:function(){var e=i("Select-placeholder",this.props.value&&this.props.value.className);return s.createElement("div",{className:e,style:this.props.value&&this.props.value.style,title:this.props.value&&this.props.value.title},this.props.placeholder)}});t.exports=o}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],4:[function(e,t,s){(function(e){"use strict";var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,i="undefined"!=typeof window?window.classNames:"undefined"!=typeof e?e.classNames:null,o=s.createClass({displayName:"Value",propTypes:{disabled:s.PropTypes.bool,onOptionLabelClick:s.PropTypes.func,onRemove:s.PropTypes.func,option:s.PropTypes.object.isRequired,optionLabelClick:s.PropTypes.bool,renderer:s.PropTypes.func},blockEvent:function(e){e.stopPropagation()},handleOnRemove:function(e){this.props.disabled||this.props.onRemove(e)},render:function(){var e=this.props.option.label;return this.props.renderer&&(e=this.props.renderer(this.props.option)),this.props.onRemove||this.props.optionLabelClick?(this.props.optionLabelClick&&(e=s.createElement("a",{className:i("Select-item-label__a",this.props.option.className),onMouseDown:this.blockEvent,onTouchEnd:this.props.onOptionLabelClick,onClick:this.props.onOptionLabelClick,style:this.props.option.style,title:this.props.option.title},e)),s.createElement("div",{className:i("Select-item",this.props.option.className),style:this.props.option.style,title:this.props.option.title},s.createElement("span",{className:"Select-item-icon",onMouseDown:this.blockEvent,onClick:this.handleOnRemove,onTouchEnd:this.handleOnRemove},"×"),s.createElement("span",{className:"Select-item-label"},e))):s.createElement("div",{className:i("Select-value",this.props.option.className),style:this.props.option.style,title:this.props.option.title},e)}});t.exports=o}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[2])(2)});
\ No newline at end of file
+!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 o(a,r){if(!s[a]){if(!t[a]){var p="function"==typeof require&&require;if(!r&&p)return p(a,!0);if(n)return n(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var u=s[a]={exports:{}};t[a][0].call(u.exports,function(e){var s=t[a][1][e];return o(s?s:e)},u,u.exports,e,t,s,i)}return s[a].exports}for(var n="function"==typeof require&&require,a=0;an.bottom||i.top-1)return!1;if(this.props.filterOption)return this.props.filterOption.call(this,e,i);var t=String(e.value),s=String(e.label);return this.props.ignoreCase&&(t=t.toLowerCase(),s=s.toLowerCase(),i=i.toLowerCase()),i&&"start"!==this.props.matchPos?"label"!==this.props.matchProp&&t.indexOf(i)>=0||"value"!==this.props.matchProp&&s.indexOf(i)>=0:"label"!==this.props.matchProp&&t.substr(0,i.length)===i||"value"!==this.props.matchProp&&s.substr(0,i.length)===i},d=(e||[]).filter(r,this);return n(d)},selectFocusedOption:function(){return this.props.allowCreate&&!this.state.focusedOption?this.selectValue(this.state.inputValue):this.state.focusedOption?this.selectValue(this.state.focusedOption):void 0},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.filter(function(e){return!e.disabled});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-1&&s0?t[s-1]:t[t.length-1]),this.setState({focusedOption:o})}},unfocusOption:function(e){this.state.focusedOption===e&&this.setState({focusedOption:null})},buildMenu:function(){var e=this.state.focusedOption?this.state.focusedOption.value:null,t=this.props.optionRenderer||function(e){return e.label};this.state.filteredOptions.length>0&&(e=null==e?this.state.filteredOptions[0]:e);var s=this.state.filteredOptions;if(this.props.allowCreate&&this.state.inputValue.trim()){var i=this.state.inputValue;s=s.slice();var n=this.props.newOptionCreator?this.props.newOptionCreator(i):{value:i,label:i,create:!0};s.unshift(n)}var r=Object.keys(s).map(function(i){var n=s[i],r=this.state.value===n.value,p=e===n.value,l=a({"Select-option":!0,"is-selected":r,"is-focused":p,"is-disabled":n.disabled}),u=p?"focused":null,c=this.focusOption.bind(this,n),d=this.unfocusOption.bind(this,n),h=this.selectValue.bind(this,n),f=o.createElement(this.props.optionComponent,{key:"option-"+n.value,className:l,renderFunc:t,mouseEnter:c,mouseLeave:d,mouseDown:h,click:h,addLabelText:this.props.addLabelText,option:n,ref:u});return f},this);if(r.length)return r;var p,l;return this.state.isLoading?(l="Select-searching",p=this.props.searchingText):this.state.inputValue||!this.props.asyncOptions?(l="Select-noresults",p=this.props.noResultsText):(l="Select-search-prompt",p=this.props.searchPromptText),o.createElement("div",{className:l},p)},handleOptionLabelClick:function(e,t){this.props.onOptionLabelClick&&this.props.onOptionLabelClick(e,t)},render:function(){var e=a("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=[];if(this.props.multi&&this.state.values.forEach(function(e){var s=this.handleOptionLabelClick.bind(this,e),i=this.removeValue.bind(this,e),n=o.createElement(this.props.valueComponent,{key:e.value,option:e,renderer:this.props.valueRenderer,optionLabelClick:!!this.props.onOptionLabelClick,onOptionLabelClick:s,onRemove:i,disabled:this.props.disabled});t.push(n)},this),!(this.state.inputValue||this.props.multi&&t.length)){var s=this.state.values[0]||null;if(this.props.valueRenderer&&this.state.values.length)t.push(o.createElement(r,{key:0,option:s,renderer:this.props.valueRenderer,disabled:this.props.disabled}));else{var p=o.createElement(this.props.singleValueComponent,{key:"placeholder",value:s,placeholder:this.state.placeholder});t.push(p)}}var l,u,c=this.state.isLoading?o.createElement("span",{className:"Select-loading","aria-hidden":"true"}):null,d=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:"×"}}):null;this.state.isOpen&&(u={ref:"menu",className:"Select-menu",onMouseDown:this.handleMouseDown},l=o.createElement("div",{ref:"selectMenuContainer",className:"Select-menu-outer"},o.createElement("div",u,this.buildMenu())));var h,f={ref:"input",className:"Select-input "+(this.props.inputProps.className||""),tabIndex:this.props.tabIndex||0,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur};for(var v in this.props.inputProps)this.props.inputProps.hasOwnProperty(v)&&"className"!==v&&(f[v]=this.props.inputProps[v]);return this.props.disabled?this.props.multi&&this.state.values.length||(h=o.createElement("div",{className:"Select-input"}," ")):h=this.props.searchable?o.createElement(n,i({value:this.state.inputValue,onChange:this.handleInputChange,minWidth:"5"},f)):o.createElement("div",f," "),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-zone",onMouseDown:this.handleMouseDownOnArrow}),o.createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}),c,d),l)}});t.exports=c}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Option":1,"./SingleValue":3,"./Value":4}],3:[function(e,t,s){(function(e){"use strict";var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,i="undefined"!=typeof window?window.classNames:"undefined"!=typeof e?e.classNames:null,o=s.createClass({displayName:"SingleValue",propTypes:{placeholder:s.PropTypes.string,value:s.PropTypes.object},render:function(){var e=i("Select-placeholder",this.props.value&&this.props.value.className);return s.createElement("div",{className:e,style:this.props.value&&this.props.value.style,title:this.props.value&&this.props.value.title},this.props.placeholder)}});t.exports=o}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],4:[function(e,t,s){(function(e){"use strict";var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,i="undefined"!=typeof window?window.classNames:"undefined"!=typeof e?e.classNames:null,o=s.createClass({displayName:"Value",propTypes:{disabled:s.PropTypes.bool,onOptionLabelClick:s.PropTypes.func,onRemove:s.PropTypes.func,option:s.PropTypes.object.isRequired,optionLabelClick:s.PropTypes.bool,renderer:s.PropTypes.func},blockEvent:function(e){e.stopPropagation()},handleOnRemove:function(e){this.props.disabled||this.props.onRemove(e)},render:function(){var e=this.props.option.label;return this.props.renderer&&(e=this.props.renderer(this.props.option)),this.props.onRemove||this.props.optionLabelClick?(this.props.optionLabelClick&&(e=s.createElement("a",{className:i("Select-item-label__a",this.props.option.className),onMouseDown:this.blockEvent,onTouchEnd:this.props.onOptionLabelClick,onClick:this.props.onOptionLabelClick,style:this.props.option.style,title:this.props.option.title},e)),s.createElement("div",{className:i("Select-item",this.props.option.className),style:this.props.option.style,title:this.props.option.title},s.createElement("span",{className:"Select-item-icon",onMouseDown:this.blockEvent,onClick:this.handleOnRemove,onTouchEnd:this.handleOnRemove},"×"),s.createElement("span",{className:"Select-item-label"},e))):s.createElement("div",{className:i("Select-value",this.props.option.className),style:this.props.option.style,title:this.props.option.title},e)}});t.exports=o}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[2])(2)});
\ No newline at end of file
diff --git a/examples/dist/bundle.js b/examples/dist/bundle.js
index 3a48a58eb8..60984aeb91 100644
--- a/examples/dist/bundle.js
+++ b/examples/dist/bundle.js
@@ -214,6 +214,7 @@ var Select = React.createClass({
inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
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
+ maxOptions: React.PropTypes.number, // max number of results to show
multi: React.PropTypes.bool, // multi-value input
name: React.PropTypes.string, // field name, for hidden tag
newOptionCreator: React.PropTypes.func, // factory to create new options when allowCreate set
@@ -253,6 +254,7 @@ var Select = React.createClass({
inputProps: {},
matchPos: 'any',
matchProp: 'any',
+ maxOptions: undefined,
name: undefined,
newOptionCreator: undefined,
noResultsText: 'No results found',
@@ -756,12 +758,19 @@ var Select = React.createClass({
},
filterOptions: function filterOptions(options, values) {
+ var _this7 = this;
+
var filterValue = this._optionsFilterString;
var exclude = (values || this.state.values).map(function (i) {
return i.value;
});
+ var limitResults = function limitResults(result) {
+ return (result || []).slice(0, _this7.props.maxOptions);
+ };
+
if (this.props.filterOptions) {
- return this.props.filterOptions.call(this, options, filterValue, exclude);
+ var filteredOptions = this.props.filterOptions.call(this, options, filterValue, exclude);
+ return limitResults(filteredOptions);
} else {
var filterOption = function filterOption(op) {
if (this.props.multi && exclude.indexOf(op.value) > -1) return false;
@@ -775,7 +784,8 @@ var Select = React.createClass({
}
return !filterValue || this.props.matchPos === 'start' ? this.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || this.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : this.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || this.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0;
};
- return (options || []).filter(filterOption, this);
+ var filterOptions = (options || []).filter(filterOption, this);
+ return limitResults(filterOptions);
}
},
diff --git a/examples/dist/common.js b/examples/dist/common.js
index 8890b730ef..791d9f4346 100644
--- a/examples/dist/common.js
+++ b/examples/dist/common.js
@@ -19694,10 +19694,12 @@ var AutosizeInput = React.createClass({
var widthNode = React.findDOMNode(this.refs.sizer);
widthNode.style.fontSize = inputStyle.fontSize;
widthNode.style.fontFamily = inputStyle.fontFamily;
+ widthNode.style.letterSpacing = inputStyle.letterSpacing;
if (this.props.placeholder) {
var placeholderNode = React.findDOMNode(this.refs.placeholderSizer);
placeholderNode.style.fontSize = inputStyle.fontSize;
placeholderNode.style.fontFamily = inputStyle.fontFamily;
+ placeholderNode.style.letterSpacing = inputStyle.letterSpacing;
}
},
updateInputWidth: function updateInputWidth() {
@@ -19732,8 +19734,9 @@ var AutosizeInput = React.createClass({
var escapedValue = (this.props.value || '').replace(/\&/g, '&').replace(/ /g, ' ').replace(/\/g, '>');
var wrapperStyle = this.props.style || {};
wrapperStyle.display = 'inline-block';
- var inputStyle = this.props.inputStyle || {};
+ var inputStyle = _extends({}, this.props.inputStyle);
inputStyle.width = this.state.inputWidth;
+ inputStyle.boxSizing = 'content-box';
var placeholder = this.props.placeholder ? React.createElement(
'div',
{ ref: 'placeholderSizer', style: sizerStyle },
diff --git a/examples/dist/standalone.js b/examples/dist/standalone.js
index ec1ee3bd3a..465319b699 100644
--- a/examples/dist/standalone.js
+++ b/examples/dist/standalone.js
@@ -101,6 +101,7 @@ var Select = React.createClass({
inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
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
+ maxOptions: React.PropTypes.number, // max number of results to show
multi: React.PropTypes.bool, // multi-value input
name: React.PropTypes.string, // field name, for hidden tag
newOptionCreator: React.PropTypes.func, // factory to create new options when allowCreate set
@@ -140,6 +141,7 @@ var Select = React.createClass({
inputProps: {},
matchPos: 'any',
matchProp: 'any',
+ maxOptions: undefined,
name: undefined,
newOptionCreator: undefined,
noResultsText: 'No results found',
@@ -643,12 +645,19 @@ var Select = React.createClass({
},
filterOptions: function filterOptions(options, values) {
+ var _this7 = this;
+
var filterValue = this._optionsFilterString;
var exclude = (values || this.state.values).map(function (i) {
return i.value;
});
+ var limitResults = function limitResults(result) {
+ return (result || []).slice(0, _this7.props.maxOptions);
+ };
+
if (this.props.filterOptions) {
- return this.props.filterOptions.call(this, options, filterValue, exclude);
+ var filteredOptions = this.props.filterOptions.call(this, options, filterValue, exclude);
+ return limitResults(filteredOptions);
} else {
var filterOption = function filterOption(op) {
if (this.props.multi && exclude.indexOf(op.value) > -1) return false;
@@ -662,7 +671,8 @@ var Select = React.createClass({
}
return !filterValue || this.props.matchPos === 'start' ? this.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || this.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : this.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || this.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0;
};
- return (options || []).filter(filterOption, this);
+ var filterOptions = (options || []).filter(filterOption, this);
+ return limitResults(filterOptions);
}
},
diff --git a/lib/Select.js b/lib/Select.js
index ec026086f3..15eb740d70 100644
--- a/lib/Select.js
+++ b/lib/Select.js
@@ -38,6 +38,7 @@ var Select = React.createClass({
inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
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
+ maxOptions: React.PropTypes.number, // max number of results to show
multi: React.PropTypes.bool, // multi-value input
name: React.PropTypes.string, // field name, for hidden tag
newOptionCreator: React.PropTypes.func, // factory to create new options when allowCreate set
@@ -77,6 +78,7 @@ var Select = React.createClass({
inputProps: {},
matchPos: 'any',
matchProp: 'any',
+ maxOptions: undefined,
name: undefined,
newOptionCreator: undefined,
noResultsText: 'No results found',
@@ -580,12 +582,19 @@ var Select = React.createClass({
},
filterOptions: function filterOptions(options, values) {
+ var _this7 = this;
+
var filterValue = this._optionsFilterString;
var exclude = (values || this.state.values).map(function (i) {
return i.value;
});
+ var limitResults = function limitResults(result) {
+ return (result || []).slice(0, _this7.props.maxOptions);
+ };
+
if (this.props.filterOptions) {
- return this.props.filterOptions.call(this, options, filterValue, exclude);
+ var filteredOptions = this.props.filterOptions.call(this, options, filterValue, exclude);
+ return limitResults(filteredOptions);
} else {
var filterOption = function filterOption(op) {
if (this.props.multi && exclude.indexOf(op.value) > -1) return false;
@@ -599,7 +608,8 @@ var Select = React.createClass({
}
return !filterValue || this.props.matchPos === 'start' ? this.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || this.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : this.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || this.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0;
};
- return (options || []).filter(filterOption, this);
+ var filterOptions = (options || []).filter(filterOption, this);
+ return limitResults(filterOptions);
}
},
diff --git a/src/Select.js b/src/Select.js
index bb4c2688b8..12cc19e542 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -34,6 +34,7 @@ var Select = React.createClass({
inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
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
+ maxOptions: React.PropTypes.number, // max number of results to show
multi: React.PropTypes.bool, // multi-value input
name: React.PropTypes.string, // field name, for hidden tag
newOptionCreator: React.PropTypes.func, // factory to create new options when allowCreate set
@@ -73,6 +74,7 @@ var Select = React.createClass({
inputProps: {},
matchPos: 'any',
matchProp: 'any',
+ maxOptions: undefined,
name: undefined,
newOptionCreator: undefined,
noResultsText: 'No results found',
@@ -567,8 +569,11 @@ var Select = React.createClass({
var exclude = (values || this.state.values).map(function(i) {
return i.value;
});
+ var limitResults = (result) => (result || []).slice(0, this.props.maxOptions);
+
if (this.props.filterOptions) {
- return this.props.filterOptions.call(this, options, filterValue, exclude);
+ var filteredOptions = this.props.filterOptions.call(this, options, filterValue, exclude);
+ return limitResults(filteredOptions);
} else {
var filterOption = function(op) {
if (this.props.multi && exclude.indexOf(op.value) > -1) return false;
@@ -587,7 +592,8 @@ var Select = React.createClass({
(this.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0)
);
};
- return (options || []).filter(filterOption, this);
+ var filterOptions = (options || []).filter(filterOption, this);
+ return limitResults(filterOptions);
}
},
diff --git a/test/Select-test.js b/test/Select-test.js
index a070a122ac..282b7cc2e2 100644
--- a/test/Select-test.js
+++ b/test/Select-test.js
@@ -2037,7 +2037,7 @@ describe('Select', function() {
});
});
- describe('custom filterOptions function', function () {
+ describe.only('custom filterOptions function', function () {
var spyFilterOptions;
@@ -2802,6 +2802,26 @@ describe('Select', function() {
});
});
});
+
+
+ describe('maxOptions', function () {
+ var maxOptions = 2;
+
+ beforeEach(function () {
+ instance = createControl({
+ options: defaultOptions,
+ maxOptions: maxOptions,
+ });
+ });
+
+
+ it('limits the number of options show', function() {
+ TestUtils.Simulate.mouseDown(React.findDOMNode(instance).querySelector('.Select-control'));
+ var options = React.findDOMNode(instance).querySelectorAll('.Select-option');
+ expect(options, 'to have length', 2);
+ });
+
+ });
});
describe('clicking outside', function () {
@@ -2809,7 +2829,7 @@ describe('Select', function() {
beforeEach(function () {
instance = createControl({
- options: defaultOptions
+ options: defaultOptions,
});
});