From f8ce25c5b840413808f346b6c5bddb9bfdfa4ac8 Mon Sep 17 00:00:00 2001 From: Neil Daftary Date: Tue, 6 Oct 2015 17:45:12 -0400 Subject: [PATCH 1/6] Close select on touchend if touched outside menu/control. --- src/Select.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/Select.js b/src/Select.js index 5db64518b8..e8d70d98db 100644 --- a/src/Select.js +++ b/src/Select.js @@ -120,6 +120,9 @@ var Select = React.createClass({ this._optionsCache = {}; this._optionsFilterString = ''; this._closeMenuIfClickedOutside = (event) => { + event.preventDefault(); + event.stopPropagation(); + if (!this.state.isOpen) { return; } @@ -139,15 +142,19 @@ var Select = React.createClass({ this._bindCloseMenuIfClickedOutside = () => { if (!document.addEventListener && document.attachEvent) { document.attachEvent('onclick', this._closeMenuIfClickedOutside); + document.attachEvent('touchend', this._closeMenuIfClickedOutside); } else { document.addEventListener('click', this._closeMenuIfClickedOutside); + document.addEventListener('touchend', this._closeMenuIfClickedOutside); } }; this._unbindCloseMenuIfClickedOutside = () => { if (!document.removeEventListener && document.detachEvent) { document.detachEvent('onclick', this._closeMenuIfClickedOutside); + document.detachEvent('touchend', this._closeMenuIfClickedOutside); } else { document.removeEventListener('click', this._closeMenuIfClickedOutside); + document.removeEventListener('touchend', this._closeMenuIfClickedOutside); } }; this.setState(this.getStateFromValue(this.props.value)); From 79bd929a3c18d5ceae1ae0f8105546859b68d63d Mon Sep 17 00:00:00 2001 From: Jed Watson Date: Sun, 8 Nov 2015 13:39:30 +1100 Subject: [PATCH 2/6] Adding browserify-shim for react-dom, fixes #526 --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index b8ea8e50cc..5893990480 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "browserify-shim": { "classnames": "global:classNames", "react": "global:React", + "react-dom": "global:ReactDOM", "react-input-autosize": "global:AutosizeInput" }, "scripts": { From 2903bcf4317e5bffcc679a10cda915eaaf879521 Mon Sep 17 00:00:00 2001 From: Jed Watson Date: Sun, 8 Nov 2015 13:40:42 +1100 Subject: [PATCH 3/6] Updating standalone usage example w/ npmcdn Thanks @mjackson! --- examples/src/standalone.html | 46 +++++++++++++++++++++++------------- 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/examples/src/standalone.html b/examples/src/standalone.html index 1f1fdc0eeb..14b76ce39d 100644 --- a/examples/src/standalone.html +++ b/examples/src/standalone.html @@ -5,32 +5,44 @@
-

React Select

-

Standalone example

-
- -
- -
-
+

React Select

+

Standalone bulid

+
For usage without babel / browserify / webpack
+
- Copyright © Jed Watson 2014. MIT Licensed. + Copyright © Jed Watson 2015. MIT Licensed.
- - - - + + + + + - From b2afb88eb39c39fbb827664ddaf2c36578a0d6fd Mon Sep 17 00:00:00 2001 From: Jed Watson Date: Sun, 8 Nov 2015 13:41:00 +1100 Subject: [PATCH 4/6] Updating build --- dist/react-select.js | 4 +-- dist/react-select.min.js | 2 +- examples/dist/standalone.html | 46 ++++++++++++++++++++++------------- examples/dist/standalone.js | 4 +-- 4 files changed, 34 insertions(+), 22 deletions(-) diff --git a/dist/react-select.js b/dist/react-select.js index 1754482f0e..15e7b47396 100644 --- a/dist/react-select.js +++ b/dist/react-select.js @@ -258,7 +258,7 @@ var _react = (typeof window !== "undefined" ? window['React'] : typeof global != var _react2 = _interopRequireDefault(_react); -var _reactDom = require('react-dom'); +var _reactDom = (typeof window !== "undefined" ? window['ReactDOM'] : typeof global !== "undefined" ? global['ReactDOM'] : null); var _reactDom2 = _interopRequireDefault(_reactDom); @@ -965,7 +965,7 @@ exports['default'] = Select; module.exports = exports['default']; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"./Async":1,"./Option":2,"./Value":4,"./utils/stripDiacritics":5,"react-dom":undefined}],4:[function(require,module,exports){ +},{"./Async":1,"./Option":2,"./Value":4,"./utils/stripDiacritics":5}],4:[function(require,module,exports){ (function (global){ 'use strict'; diff --git a/dist/react-select.min.js b/dist/react-select.min.js index e2ca1f2bad..22861cdebe 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 u;u="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,u.Select=e()}}(function(){return function e(u,t,s){function o(i,r){if(!t[i]){if(!u[i]){var a="function"==typeof require&&require;if(!r&&a)return a(i,!0);if(n)return n(i,!0);var l=new Error("Cannot find module '"+i+"'");throw l.code="MODULE_NOT_FOUND",l}var p=t[i]={exports:{}};u[i][0].call(p.exports,function(e){var t=u[i][1][e];return o(t?t:e)},p,p.exports,e,u,t,s)}return t[i].exports}for(var n="function"==typeof require&&require,i=0;in.bottom||o.topu.offsetHeight&&!(u.scrollHeight-u.offsetHeight-u.scrollTop)&&this.props.onMenuScrollToBottom()}},getOptionLabel:function(e){return e[this.props.labelKey]},getValueArray:function(){var e=this.props.value;if(this.props.multi){if("string"==typeof e&&(e=e.split(this.props.delimiter)),!Array.isArray(e)){if(!e)return[];e=[e]}return e.map(this.expandValue).filter(function(e){return e})}var u=this.expandValue(e);return u?[u]:[]},expandValue:function(e){if("string"!=typeof e&&"number"!=typeof e)return e;var u=this.props,t=u.options,s=u.valueKey;if(t)for(var o=0;o-1&&t0?u[t-1]:u[u.length-1]),this.setState({focusedOption:o})}},selectFocusedOption:function(){return this._focusedOption?this.selectValue(this._focusedOption):void 0},renderLoading:function(){return this.props.isLoading?a["default"].createElement("span",{className:"Select-loading-zone","aria-hidden":"true"},a["default"].createElement("span",{className:"Select-loading"})):void 0},renderValue:function(e,u){var t=this,s=this.props.valueRenderer||this.getOptionLabel,o=this.props.valueComponent;if(!e.length)return this.state.inputValue?null:a["default"].createElement("div",{className:"Select-placeholder"},this.props.placeholder);var n=this.props.onValueClick?this.handleValueClick:null;return this.props.multi?e.map(function(e,u){return a["default"].createElement(o,{disabled:t.props.disabled,key:"value-"+u+"-"+e[t.props.valueKey],onClick:n,onRemove:t.removeValue,value:e},s(e))}):this.state.inputValue?void 0:(u&&(n=null),a["default"].createElement(o,{disabled:this.props.disabled,onClick:n,value:e[0]},s(e[0])))},renderInput:function(e){var u=(0,h["default"])("Select-input",this.props.inputProps.className);if(this.props.disabled||!this.props.searchable){if(this.props.multi&&e.length)return;return a["default"].createElement("div",{className:u}," ")}return a["default"].createElement(c["default"],i({},this.props.inputProps,{className:u,tabIndex:this.props.tabIndex,onBlur:this.handleInputBlur,onChange:this.handleInputChange,onFocus:this.handleInputFocus,minWidth:"5",ref:"input",value:this.state.inputValue}))},renderClear:function(){return!this.props.clearable||!this.props.value||this.props.multi&&!this.props.value.length||this.props.disabled||this.props.isLoading?void 0:a["default"].createElement("span",{className:"Select-clear-zone",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onTouchEnd:this.clearValue},a["default"].createElement("span",{className:"Select-clear",dangerouslySetInnerHTML:{__html:"×"}}))},renderArrow:function(){return a["default"].createElement("span",{className:"Select-arrow-zone",onMouseDown:this.handleMouseDownOnArrow},a["default"].createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}))},filterOptions:function(e){var u=this,t=this.state.inputValue,s=this.props.options||[];return"function"==typeof this.props.filterOptions?this.props.filterOptions.call(this,s,t,e):this.props.filterOptions?(this.props.ignoreAccents&&(t=(0,g["default"])(t)),this.props.ignoreCase&&(t=t.toLowerCase()),e&&(e=e.map(function(e){return e[u.props.valueKey]})),s.filter(function(s){if(e&&e.indexOf(s[u.props.valueKey])>-1)return!1;if(u.props.filterOption)return u.props.filterOption.call(u,s,t);if(!t)return!0;var o=String(s[u.props.valueKey]),n=String(s[u.props.labelKey]);return u.props.ignoreAccents&&("label"!==u.props.matchProp&&(o=(0,g["default"])(o)),"value"!==u.props.matchProp&&(n=(0,g["default"])(n))),u.props.ignoreCase&&("label"!==u.props.matchProp&&(o=o.toLowerCase()),"value"!==u.props.matchProp&&(n=n.toLowerCase())),"start"===u.props.matchPos?"label"!==u.props.matchProp&&o.substr(0,t.length)===t||"value"!==u.props.matchProp&&n.substr(0,t.length)===t:"label"!==u.props.matchProp&&o.indexOf(t)>=0||"value"!==u.props.matchProp&&n.indexOf(t)>=0})):s},renderMenu:function(e,u,t){var s=this;if(!e||!e.length)return a["default"].createElement("div",{className:"Select-noresults"},this.props.noResultsText);var o=function(){var o=s.props.optionComponent,n=s.props.optionRenderer||s.getOptionLabel;return{v:e.map(function(e,i){var r=u&&u.indexOf(e)>-1,l=e===t,p=l?"focused":null,d=(0,h["default"])({"Select-option":!0,"is-selected":r,"is-focused":l,"is-disabled":e.disabled});return a["default"].createElement(o,{className:d,isDisabled:e.disabled,isFocused:l,key:"option-"+i+"-"+e[s.props.valueKey],onSelect:s.selectValue,onFocus:s.focusOption,option:e,isSelected:r,ref:p},n(e))})}}();return"object"==typeof o?o.v:void 0},renderHiddenField:function(e){var u=this;if(this.props.name){var t=e.map(function(e){return n(e[u.props.valueKey])}).join(this.props.delimiter);return a["default"].createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:t,disabled:this.props.disabled})}},getFocusableOption:function(e){var u=this._visibleOptions;if(u.length){var t=this.state.focusedOption||e;if(t&&u.indexOf(t)>-1)return t;for(var s=0;sn.bottom||o.topu.offsetHeight&&!(u.scrollHeight-u.offsetHeight-u.scrollTop)&&this.props.onMenuScrollToBottom()}},getOptionLabel:function(e){return e[this.props.labelKey]},getValueArray:function(){var e=this.props.value;if(this.props.multi){if("string"==typeof e&&(e=e.split(this.props.delimiter)),!Array.isArray(e)){if(!e)return[];e=[e]}return e.map(this.expandValue).filter(function(e){return e})}var u=this.expandValue(e);return u?[u]:[]},expandValue:function(e){if("string"!=typeof e&&"number"!=typeof e)return e;var u=this.props,t=u.options,s=u.valueKey;if(t)for(var o=0;o-1&&t0?u[t-1]:u[u.length-1]),this.setState({focusedOption:o})}},selectFocusedOption:function(){return this._focusedOption?this.selectValue(this._focusedOption):void 0},renderLoading:function(){return this.props.isLoading?a["default"].createElement("span",{className:"Select-loading-zone","aria-hidden":"true"},a["default"].createElement("span",{className:"Select-loading"})):void 0},renderValue:function(e,u){var t=this,s=this.props.valueRenderer||this.getOptionLabel,o=this.props.valueComponent;if(!e.length)return this.state.inputValue?null:a["default"].createElement("div",{className:"Select-placeholder"},this.props.placeholder);var n=this.props.onValueClick?this.handleValueClick:null;return this.props.multi?e.map(function(e,u){return a["default"].createElement(o,{disabled:t.props.disabled,key:"value-"+u+"-"+e[t.props.valueKey],onClick:n,onRemove:t.removeValue,value:e},s(e))}):this.state.inputValue?void 0:(u&&(n=null),a["default"].createElement(o,{disabled:this.props.disabled,onClick:n,value:e[0]},s(e[0])))},renderInput:function(e){var u=(0,h["default"])("Select-input",this.props.inputProps.className);if(this.props.disabled||!this.props.searchable){if(this.props.multi&&e.length)return;return a["default"].createElement("div",{className:u}," ")}return a["default"].createElement(c["default"],i({},this.props.inputProps,{className:u,tabIndex:this.props.tabIndex,onBlur:this.handleInputBlur,onChange:this.handleInputChange,onFocus:this.handleInputFocus,minWidth:"5",ref:"input",value:this.state.inputValue}))},renderClear:function(){return!this.props.clearable||!this.props.value||this.props.multi&&!this.props.value.length||this.props.disabled||this.props.isLoading?void 0:a["default"].createElement("span",{className:"Select-clear-zone",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onTouchEnd:this.clearValue},a["default"].createElement("span",{className:"Select-clear",dangerouslySetInnerHTML:{__html:"×"}}))},renderArrow:function(){return a["default"].createElement("span",{className:"Select-arrow-zone",onMouseDown:this.handleMouseDownOnArrow},a["default"].createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}))},filterOptions:function(e){var u=this,t=this.state.inputValue,s=this.props.options||[];return"function"==typeof this.props.filterOptions?this.props.filterOptions.call(this,s,t,e):this.props.filterOptions?(this.props.ignoreAccents&&(t=(0,g["default"])(t)),this.props.ignoreCase&&(t=t.toLowerCase()),e&&(e=e.map(function(e){return e[u.props.valueKey]})),s.filter(function(s){if(e&&e.indexOf(s[u.props.valueKey])>-1)return!1;if(u.props.filterOption)return u.props.filterOption.call(u,s,t);if(!t)return!0;var o=String(s[u.props.valueKey]),n=String(s[u.props.labelKey]);return u.props.ignoreAccents&&("label"!==u.props.matchProp&&(o=(0,g["default"])(o)),"value"!==u.props.matchProp&&(n=(0,g["default"])(n))),u.props.ignoreCase&&("label"!==u.props.matchProp&&(o=o.toLowerCase()),"value"!==u.props.matchProp&&(n=n.toLowerCase())),"start"===u.props.matchPos?"label"!==u.props.matchProp&&o.substr(0,t.length)===t||"value"!==u.props.matchProp&&n.substr(0,t.length)===t:"label"!==u.props.matchProp&&o.indexOf(t)>=0||"value"!==u.props.matchProp&&n.indexOf(t)>=0})):s},renderMenu:function(e,u,t){var s=this;if(!e||!e.length)return a["default"].createElement("div",{className:"Select-noresults"},this.props.noResultsText);var o=function(){var o=s.props.optionComponent,n=s.props.optionRenderer||s.getOptionLabel;return{v:e.map(function(e,i){var r=u&&u.indexOf(e)>-1,l=e===t,p=l?"focused":null,d=(0,h["default"])({"Select-option":!0,"is-selected":r,"is-focused":l,"is-disabled":e.disabled});return a["default"].createElement(o,{className:d,isDisabled:e.disabled,isFocused:l,key:"option-"+i+"-"+e[s.props.valueKey],onSelect:s.selectValue,onFocus:s.focusOption,option:e,isSelected:r,ref:p},n(e))})}}();return"object"==typeof o?o.v:void 0},renderHiddenField:function(e){var u=this;if(this.props.name){var t=e.map(function(e){return n(e[u.props.valueKey])}).join(this.props.delimiter);return a["default"].createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:t,disabled:this.props.disabled})}},getFocusableOption:function(e){var u=this._visibleOptions;if(u.length){var t=this.state.focusedOption||e;if(t&&u.indexOf(t)>-1)return t;for(var s=0;s
-

React Select

-

Standalone example

-
- -
- -
-
+

React Select

+

Standalone bulid

+
For usage without babel / browserify / webpack
+
- Copyright © Jed Watson 2014. MIT Licensed. + Copyright © Jed Watson 2015. MIT Licensed.
- - - - + + + + + - diff --git a/examples/dist/standalone.js b/examples/dist/standalone.js index 1754482f0e..15e7b47396 100644 --- a/examples/dist/standalone.js +++ b/examples/dist/standalone.js @@ -258,7 +258,7 @@ var _react = (typeof window !== "undefined" ? window['React'] : typeof global != var _react2 = _interopRequireDefault(_react); -var _reactDom = require('react-dom'); +var _reactDom = (typeof window !== "undefined" ? window['ReactDOM'] : typeof global !== "undefined" ? global['ReactDOM'] : null); var _reactDom2 = _interopRequireDefault(_reactDom); @@ -965,7 +965,7 @@ exports['default'] = Select; module.exports = exports['default']; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"./Async":1,"./Option":2,"./Value":4,"./utils/stripDiacritics":5,"react-dom":undefined}],4:[function(require,module,exports){ +},{"./Async":1,"./Option":2,"./Value":4,"./utils/stripDiacritics":5}],4:[function(require,module,exports){ (function (global){ 'use strict'; From 42940ce57155e019e1c0581a07a89ecd084ab6f8 Mon Sep 17 00:00:00 2001 From: Jed Watson Date: Tue, 10 Nov 2015 01:16:17 +1100 Subject: [PATCH 5/6] Bumping react-input-autosize --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 3b41363dce..0dd07b75f2 100644 --- a/bower.json +++ b/bower.json @@ -17,7 +17,7 @@ ], "dependencies": { "classnames": "^2.2.0", - "react-input-autosize": "^0.6.3" + "react-input-autosize": "^0.6.5" }, "keywords": [ "react", diff --git a/package.json b/package.json index 5893990480..16e730a9e7 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "classnames": "^2.2.0", - "react-input-autosize": "^0.6.3" + "react-input-autosize": "^0.6.5" }, "devDependencies": { "babel": "^5.8.23", From 3436fd33fe7f63cc1c29d697ca76bf95a910297b Mon Sep 17 00:00:00 2001 From: Jed Watson Date: Tue, 10 Nov 2015 01:29:37 +1100 Subject: [PATCH 6/6] Documenting more changes, ref #571 --- CHANGES.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 558e8498b3..1a056fa96a 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -2,9 +2,11 @@ ## Breaking Changes -Value component -> MultiValue +Major API changes to Component props, SingleValue and Value have been merged -Major API changes Component props, SingleValue and MultiValue have been merged +The component is now "controlled", which means you have to pass value as a prop and always handle the `onChange` event. See https://facebook.github.io/react/docs/forms.html#controlled-components + +Using values that aren't in the `options` array is still supported, but they have to be full options (previous versions would expand strings into `{ label: string, value: string }`) Options & Value components get their label as their Children