Skip to content
This repository was archived by the owner on Jul 19, 2019. It is now read-only.

Commit 7cd30ea

Browse files
author
Andrew E. Rhyne
committed
passed through event onSelect
1 parent 9078d54 commit 7cd30ea

File tree

4 files changed

+49
-63
lines changed

4 files changed

+49
-63
lines changed

‎build/lib/Autocomplete.js

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ var _debugStates = [];
1111
var Autocomplete = React.createClass({
1212
displayName: 'Autocomplete',
1313

14+
1415
propTypes: {
1516
initialValue: React.PropTypes.any,
1617
onChange: React.PropTypes.func,
@@ -34,6 +35,7 @@ var Autocomplete = React.createClass({
3435
shouldItemRender: function shouldItemRender() {
3536
return true;
3637
},
38+
3739
menuStyle: {
3840
borderRadius: '3px',
3941
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
@@ -45,7 +47,6 @@ var Autocomplete = React.createClass({
4547
maxHeight: '50%' }
4648
};
4749
},
48-
4950
// TODO: don't cheat, let it flow to the bottom
5051
getInitialState: function getInitialState() {
5152
return {
@@ -54,18 +55,15 @@ var Autocomplete = React.createClass({
5455
highlightedIndex: null
5556
};
5657
},
57-
5858
componentWillMount: function componentWillMount() {
5959
this.id = lodash.uniqueId('autocomplete-');
6060
this._ignoreBlur = false;
6161
this._performAutoCompleteOnUpdate = false;
6262
this._performAutoCompleteOnKeyUp = false;
6363
},
64-
6564
componentWillReceiveProps: function componentWillReceiveProps() {
6665
this._performAutoCompleteOnUpdate = true;
6766
},
68-
6967
componentDidUpdate: function componentDidUpdate(prevProps, prevState) {
7068
if (this.state.isOpen === true && prevState.isOpen === false) this.setMenuPositions();
7169

@@ -76,15 +74,13 @@ var Autocomplete = React.createClass({
7674

7775
this.maybeScrollItemIntoView();
7876
},
79-
8077
maybeScrollItemIntoView: function maybeScrollItemIntoView() {
8178
if (this.state.isOpen === true && this.state.highlightedIndex !== null) {
8279
var itemNode = this.refs['item-' + this.state.highlightedIndex];
8380
var menuNode = this.refs.menu;
8481
scrollIntoView(itemNode, menuNode, { onlyScrollIfNeeded: true });
8582
}
8683
},
87-
8884
handleKeyDown: function handleKeyDown(event) {
8985
if (this.keyDownHandlers[event.key]) this.keyDownHandlers[event.key].call(this, event);else {
9086
this.setState({
@@ -93,25 +89,25 @@ var Autocomplete = React.createClass({
9389
});
9490
}
9591
},
96-
9792
handleChange: function handleChange(event) {
9893
var _this = this;
9994

95+
event.persist();
10096
this._performAutoCompleteOnKeyUp = true;
10197
this.setState({
10298
value: event.target.value
10399
}, function () {
104100
_this.props.onChange(event, _this.state.value);
105101
});
106102
},
107-
108103
handleKeyUp: function handleKeyUp() {
109104
if (this._performAutoCompleteOnKeyUp) {
110105
this._performAutoCompleteOnKeyUp = false;
111106
this.maybeAutoCompleteText();
112107
}
113108
},
114109

110+
115111
keyDownHandlers: {
116112
ArrowDown: function ArrowDown(event) {
117113
event.preventDefault();
@@ -124,7 +120,6 @@ var Autocomplete = React.createClass({
124120
isOpen: true
125121
});
126122
},
127-
128123
ArrowUp: function ArrowUp(event) {
129124
event.preventDefault();
130125
var highlightedIndex = this.state.highlightedIndex;
@@ -136,7 +131,6 @@ var Autocomplete = React.createClass({
136131
isOpen: true
137132
});
138133
},
139-
140134
Enter: function Enter(event) {
141135
var _this2 = this;
142136

@@ -151,6 +145,7 @@ var Autocomplete = React.createClass({
151145
_this2.refs.input.select();
152146
});
153147
} else {
148+
event.persist();
154149
// text entered + menu item has been highlighted + enter is hit -> update value to that of selected menu item, close the menu
155150
var item = this.getFilteredItems()[this.state.highlightedIndex];
156151
this.setState({
@@ -160,11 +155,10 @@ var Autocomplete = React.createClass({
160155
}, function () {
161156
//this.refs.input.focus() // TODO: file issue
162157
_this2.refs.input.setSelectionRange(_this2.state.value.length, _this2.state.value.length);
163-
_this2.props.onSelect(_this2.state.value, item);
158+
_this2.props.onSelect(_this2.state.value, item, event);
164159
});
165160
}
166161
},
167-
168162
Escape: function Escape(event) {
169163
this.setState({
170164
highlightedIndex: null,
@@ -192,7 +186,6 @@ var Autocomplete = React.createClass({
192186

193187
return items;
194188
},
195-
196189
maybeAutoCompleteText: function maybeAutoCompleteText() {
197190
var _this4 = this;
198191

@@ -213,7 +206,6 @@ var Autocomplete = React.createClass({
213206
if (highlightedIndex === null) this.setState({ highlightedIndex: 0 }, setSelection);else setSelection();
214207
}
215208
},
216-
217209
setMenuPositions: function setMenuPositions() {
218210
var node = this.refs.input;
219211
var rect = node.getBoundingClientRect();
@@ -227,29 +219,26 @@ var Autocomplete = React.createClass({
227219
menuWidth: rect.width + marginLeft + marginRight
228220
});
229221
},
230-
231222
highlightItemFromMouse: function highlightItemFromMouse(index) {
232223
this.setState({ highlightedIndex: index });
233224
},
234-
235-
selectItemFromMouse: function selectItemFromMouse(item) {
225+
selectItemFromMouse: function selectItemFromMouse(item, event) {
236226
var _this5 = this;
237227

228+
event.persist();
238229
this.setState({
239230
value: this.props.getItemValue(item),
240231
isOpen: false,
241232
highlightedIndex: null
242233
}, function () {
243-
_this5.props.onSelect(_this5.state.value, item);
234+
_this5.props.onSelect(_this5.state.value, item, event);
244235
_this5.refs.input.focus();
245236
_this5.setIgnoreBlur(false);
246237
});
247238
},
248-
249239
setIgnoreBlur: function setIgnoreBlur(ignore) {
250240
this._ignoreBlur = ignore;
251241
},
252-
253242
renderMenu: function renderMenu() {
254243
var _this6 = this;
255244

@@ -262,8 +251,8 @@ var Autocomplete = React.createClass({
262251
onMouseEnter: function onMouseEnter() {
263252
return _this6.highlightItemFromMouse(index);
264253
},
265-
onClick: function onClick() {
266-
return _this6.selectItemFromMouse(item);
254+
onClick: function onClick(event) {
255+
return _this6.selectItemFromMouse(item, event);
267256
},
268257
ref: 'item-' + index
269258
});
@@ -276,24 +265,20 @@ var Autocomplete = React.createClass({
276265
var menu = this.props.renderMenu(items, this.state.value, style);
277266
return React.cloneElement(menu, { ref: 'menu' });
278267
},
279-
280268
handleInputBlur: function handleInputBlur() {
281269
if (this._ignoreBlur) return;
282270
this.setState({
283271
isOpen: false,
284272
highlightedIndex: null
285273
});
286274
},
287-
288275
handleInputFocus: function handleInputFocus() {
289276
if (this._ignoreBlur) return;
290277
this.setState({ isOpen: true });
291278
},
292-
293279
handleInputClick: function handleInputClick() {
294280
if (this.state.isOpen === false) this.setState({ isOpen: true });
295281
},
296-
297282
render: function render() {
298283
var _this7 = this;
299284

@@ -318,13 +303,13 @@ var Autocomplete = React.createClass({
318303
ref: 'input',
319304
onFocus: this.handleInputFocus,
320305
onBlur: this.handleInputBlur,
321-
onChange: function (event) {
306+
onChange: function onChange(event) {
322307
return _this7.handleChange(event);
323308
},
324-
onKeyDown: function (event) {
309+
onKeyDown: function onKeyDown(event) {
325310
return _this7.handleKeyDown(event);
326311
},
327-
onKeyUp: function (event) {
312+
onKeyUp: function onKeyUp(event) {
328313
return _this7.handleKeyUp(event);
329314
},
330315
onClick: this.handleInputClick,

‎build/lib/__tests__/Autocomplete-test.js

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22

33
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
44

5-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
6-
75
var _react = require('react');
86

97
var _react2 = _interopRequireDefault(_react);
@@ -38,21 +36,24 @@ var _Autocomplete2 = _interopRequireDefault(_Autocomplete);
3836

3937
var _utils = require('../utils');
4038

41-
var expect = _chai2['default'].expect;
39+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
40+
41+
var expect = _chai2.default.expect;
42+
4243

43-
_chai2['default'].use((0, _chaiEnzyme2['default'])());
44+
_chai2.default.use((0, _chaiEnzyme2.default)());
4445

4546
function AutocompleteComponentJSX(extraProps) {
46-
return _react2['default'].createElement(_Autocomplete2['default'], _extends({
47+
return _react2.default.createElement(_Autocomplete2.default, _extends({
4748
initialValue: '',
4849
labelText: 'Choose a state from the US',
4950
inputProps: { name: "US state" },
50-
getItemValue: function (item) {
51+
getItemValue: function getItemValue(item) {
5152
return item.name;
5253
},
5354
items: (0, _utils.getStates)(),
54-
renderItem: function (item, isHighlighted) {
55-
return _react2['default'].createElement(
55+
renderItem: function renderItem(item, isHighlighted) {
56+
return _react2.default.createElement(
5657
'div',
5758
{
5859
style: isHighlighted ? _utils.styles.highlightedItem : _utils.styles.item,
@@ -72,13 +73,13 @@ describe('Autocomplete acceptance tests', function () {
7273

7374
it('should display autocomplete menu when input has focus', function () {
7475

75-
expect(autocompleteWrapper.state('isOpen')).to.be['false'];
76+
expect(autocompleteWrapper.state('isOpen')).to.be.false;
7677
expect(autocompleteWrapper.instance().refs.menu).to.not.exist;
7778

7879
// Display autocomplete menu upon input focus
7980
autocompleteInputWrapper.simulate('focus');
8081

81-
expect(autocompleteWrapper.state('isOpen')).to.be['true'];
82+
expect(autocompleteWrapper.state('isOpen')).to.be.true;
8283
expect(autocompleteWrapper.instance().refs.menu).to.exist;
8384
});
8485

@@ -94,7 +95,7 @@ describe('Autocomplete acceptance tests', function () {
9495

9596
autocompleteInputWrapper.simulate('blur');
9697

97-
expect(autocompleteWrapper.state('isOpen')).to.be['false'];
98+
expect(autocompleteWrapper.state('isOpen')).to.be.false;
9899
expect(autocompleteWrapper.instance().refs.menu).to.not.exist;
99100
});
100101
});
@@ -112,7 +113,7 @@ describe('Autocomplete kewDown->ArrowDown event handlers', function () {
112113

113114
autocompleteInputWrapper.simulate('keyDown', { key: "ArrowDown", keyCode: 40, which: 40 });
114115

115-
expect(autocompleteWrapper.state('isOpen')).to.be['true'];
116+
expect(autocompleteWrapper.state('isOpen')).to.be.true;
116117
expect(autocompleteWrapper.state('highlightedIndex')).to.equal(0);
117118
});
118119

@@ -126,7 +127,7 @@ describe('Autocomplete kewDown->ArrowDown event handlers', function () {
126127

127128
autocompleteInputWrapper.simulate('keyDown', { key: "ArrowDown", keyCode: 40, which: 40 });
128129

129-
expect(autocompleteWrapper.state('isOpen')).to.be['true'];
130+
expect(autocompleteWrapper.state('isOpen')).to.be.true;
130131
expect(autocompleteWrapper.state('highlightedIndex')).to.equal(n + 1);
131132
});
132133

@@ -139,7 +140,7 @@ describe('Autocomplete kewDown->ArrowDown event handlers', function () {
139140

140141
autocompleteInputWrapper.simulate('keyDown', { key: "ArrowDown", keyCode: 40, which: 40 });
141142

142-
expect(autocompleteWrapper.state('isOpen')).to.be['true'];
143+
expect(autocompleteWrapper.state('isOpen')).to.be.true;
143144
expect(autocompleteWrapper.state('highlightedIndex')).to.equal(0);
144145
});
145146
});
@@ -157,7 +158,7 @@ describe('Autocomplete kewDown->ArrowUp event handlers', function () {
157158

158159
autocompleteInputWrapper.simulate('keyDown', { key: 'ArrowUp', keyCode: 38, which: 38 });
159160

160-
expect(autocompleteWrapper.state('isOpen')).to.be['true'];
161+
expect(autocompleteWrapper.state('isOpen')).to.be.true;
161162
expect(autocompleteWrapper.state('highlightedIndex')).to.equal(49);
162163
});
163164

@@ -171,7 +172,7 @@ describe('Autocomplete kewDown->ArrowUp event handlers', function () {
171172

172173
autocompleteInputWrapper.simulate('keyDown', { key: 'ArrowUp', keyCode: 38, which: 38 });
173174

174-
expect(autocompleteWrapper.state('isOpen')).to.be['true'];
175+
expect(autocompleteWrapper.state('isOpen')).to.be.true;
175176
expect(autocompleteWrapper.state('highlightedIndex')).to.equal(n - 1);
176177
});
177178

@@ -184,7 +185,7 @@ describe('Autocomplete kewDown->ArrowUp event handlers', function () {
184185

185186
autocompleteInputWrapper.simulate('keyDown', { key: 'ArrowUp', keyCode: 38, which: 38 });
186187

187-
expect(autocompleteWrapper.state('isOpen')).to.be['true'];
188+
expect(autocompleteWrapper.state('isOpen')).to.be.true;
188189
expect(autocompleteWrapper.state('highlightedIndex')).to.equal(49);
189190
});
190191
});
@@ -197,7 +198,7 @@ describe('Autocomplete kewDown->Enter event handlers', function () {
197198
it('should do nothing if the menu is closed', function () {
198199
autocompleteWrapper.setState({ 'isOpen': false });
199200
autocompleteWrapper.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
200-
expect(autocompleteWrapper.state('isOpen')).to.be['false'];
201+
expect(autocompleteWrapper.state('isOpen')).to.be.false;
201202
});
202203

203204
it('should close menu if input has focus but no item has been selected and then the Enter key is hit', function () {
@@ -207,12 +208,12 @@ describe('Autocomplete kewDown->Enter event handlers', function () {
207208

208209
// simulate keyUp of backspace, triggering autocomplete suggestion on an empty string, which should result in nothing highlighted
209210
autocompleteInputWrapper.simulate('keyUp', { key: 'Backspace', keyCode: 8, which: 8 });
210-
expect(autocompleteWrapper.state('highlightedIndex')).to.be['null'];
211+
expect(autocompleteWrapper.state('highlightedIndex')).to.be.null;
211212

212213
autocompleteInputWrapper.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
213214

214215
expect(autocompleteWrapper.state('value')).to.equal('');
215-
expect(autocompleteWrapper.state('isOpen')).to.be['false'];
216+
expect(autocompleteWrapper.state('isOpen')).to.be.false;
216217
});
217218

218219
it('should update input value from selected menu item and close the menu', function () {
@@ -226,7 +227,7 @@ describe('Autocomplete kewDown->Enter event handlers', function () {
226227
// Hit enter, updating state.value with the selected Autocomplete suggestion
227228
autocompleteInputWrapper.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
228229
expect(autocompleteWrapper.state('value')).to.equal('Arizona');
229-
expect(autocompleteWrapper.state('isOpen')).to.be['false'];
230+
expect(autocompleteWrapper.state('isOpen')).to.be.false;
230231
});
231232
});
232233

@@ -241,8 +242,8 @@ describe('Autocomplete kewDown->Escape event handlers', function () {
241242

242243
autocompleteInputWrapper.simulate('keyDown', { key: 'Escape', keyCode: 27, which: 27 });
243244

244-
expect(autocompleteWrapper.state('isOpen')).to.be['false'];
245-
expect(autocompleteWrapper.state('highlightedIndex')).to.be['null'];
245+
expect(autocompleteWrapper.state('isOpen')).to.be.false;
246+
expect(autocompleteWrapper.state('highlightedIndex')).to.be.null;
246247
});
247248
});
248249

0 commit comments

Comments
 (0)