Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Close select on touchend if touched outside menu/control. #503

Closed
wants to merge 9 commits into from
Closed

Close select on touchend if touched outside menu/control. #503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f8ce25c
Close select on touchend if touched outside menu/control.
neilzo Oct 6, 2015
7e708fe
Merge remote-tracking branch 'upstream/master'
neilzo Oct 8, 2015
79bd929
Adding browserify-shim for react-dom, fixes #526
JedWatson Nov 8, 2015
2903bcf
Updating standalone usage example w/ npmcdn
JedWatson Nov 8, 2015
b2afb88
Updating build
JedWatson Nov 8, 2015
42940ce
Bumping react-input-autosize
JedWatson Nov 9, 2015
3436fd3
Documenting more changes, ref #571
JedWatson Nov 9, 2015
58f0536
Merge pull request #579 from TrkiSF2/master
JedWatson Nov 10, 2015
2429b57
Merge upstream.
neilzo Nov 12, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
],
"dependencies": {
"classnames": "^2.2.0",
"react-input-autosize": "^0.6.3"
"react-input-autosize": "^0.6.5"
},
"keywords": [
"react",
Expand Down
4 changes: 2 additions & 2 deletions dist/react-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion dist/react-select.min.js
View file
Open in desktop

Large diffs are not rendered by default.

46 changes: 29 additions & 17 deletions examples/dist/standalone.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,44 @@
</head>
<body>
<div class="container">
<h1>React Select</h1>
<h2>Standalone example</h2>
<form>
<!-- the React application is loaded in the #example element -->
<div id="example"></div>
<!-- sample toolbar, just an additional element to focus in the form -->
<div class="form-toolbar"><button type="submit">Submit</button></div>
</form>
<h1 style="margin-top: 40px;">React Select</h1>
<h2>Standalone bulid</h2>
<div>For usage without babel / browserify / webpack</div>
<div id="select" style="margin: 20px 0;"></div>
<div class="footer">
Copyright &copy; Jed Watson 2014. MIT Licensed.
Copyright &copy; Jed Watson 2015. MIT Licensed.
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.js"></script>
<script src="//jedwatson.github.io/classnames/classNames.js"></script>
<script src="//jedwatson.github.io/react-input-autosize/standalone.js"></script>
<script src="//npmcdn.com/react@0.14.2/dist/react.min.js"></script>
<script src="//npmcdn.com/react-dom@0.14.2/dist/react-dom.min.js"></script>
<script src="//npmcdn.com/three.js@0.73.0/build/three.min.js"></script>
<script src="//npmcdn.com/classnames@2.0.0/index.js"></script>
<script src="//npmcdn.com/react-input-autosize@0.6.3/dist/react-input-autosize.min.js"></script>
<script src="standalone.js"></script>
<script type="text/jsx">
var ops = [
<script>
var options = [
{ label: 'One', value: 1 },
{ label: 'Two', value: 2 },
{ label: 'Three', value: 3 },
];
var Container = React.createClass({
getInitialState () {
return { value: '' };
},
updateValue (value) {
this.setState({ value: value });
},
render () {
return React.createElement(Select, {
options: options,
onChange: this.updateValue,
value: this.state.value,
});
}
});
React.render(
<Select options={ops} />,
document.getElementById('example')
React.createElement(Container),
document.getElementById('select')
);
</script>
</body>
4 changes: 2 additions & 2 deletions examples/dist/standalone.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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';

Expand Down
46 changes: 29 additions & 17 deletions examples/src/standalone.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,44 @@
</head>
<body>
<div class="container">
<h1>React Select</h1>
<h2>Standalone example</h2>
<form>
<!-- the React application is loaded in the #example element -->
<div id="example"></div>
<!-- sample toolbar, just an additional element to focus in the form -->
<div class="form-toolbar"><button type="submit">Submit</button></div>
</form>
<h1 style="margin-top: 40px;">React Select</h1>
<h2>Standalone bulid</h2>
<div>For usage without babel / browserify / webpack</div>
<div id="select" style="margin: 20px 0;"></div>
<div class="footer">
Copyright &copy; Jed Watson 2014. MIT Licensed.
Copyright &copy; Jed Watson 2015. MIT Licensed.
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.js"></script>
<script src="//jedwatson.github.io/classnames/classNames.js"></script>
<script src="//jedwatson.github.io/react-input-autosize/standalone.js"></script>
<script src="//npmcdn.com/react@0.14.2/dist/react.min.js"></script>
<script src="//npmcdn.com/react-dom@0.14.2/dist/react-dom.min.js"></script>
<script src="//npmcdn.com/three.js@0.73.0/build/three.min.js"></script>
<script src="//npmcdn.com/classnames@2.0.0/index.js"></script>
<script src="//npmcdn.com/react-input-autosize@0.6.3/dist/react-input-autosize.min.js"></script>
<script src="standalone.js"></script>
<script type="text/jsx">
var ops = [
<script>
var options = [
{ label: 'One', value: 1 },
{ label: 'Two', value: 2 },
{ label: 'Three', value: 3 },
];
var Container = React.createClass({
getInitialState () {
return { value: '' };
},
updateValue (value) {
this.setState({ value: value });
},
render () {
return React.createElement(Select, {
options: options,
onChange: this.updateValue,
value: this.state.value,
});
}
});
React.render(
<Select options={ops} />,
document.getElementById('example')
React.createElement(Container),
document.getElementById('select')
);
</script>
</body>
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -42,6 +42,7 @@
"browserify-shim": {
"classnames": "global:classNames",
"react": "global:React",
"react-dom": "global:ReactDOM",
"react-input-autosize": "global:AutosizeInput"
},
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion src/Select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ const Select = React.createClass({
isPseudoFocused: false,
};
},

componentDidMount () {
if (this.props.autofocus) {
this.focus();
Expand Down