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

Commit 705ee04

Browse files
CMTegnerwhichsteveyp
authored andcommitted
[changed] Prevent Return in menu from submitting surrounding form (#92)
The default behaviour of hitting `Return` in a `<input type=text>` is to submit the immediate surrounding form. I would hazard a guess that this isn't the expected result when using `Return` to select an item in the autocomplete menu. Since we don't expose the event object to the consumer via `onSelect` we need to make sure we're making the most sensible choice by default. Hitting `Return` a second time (after the menu has closed itself) will result in the default, expected behaviour.
1 parent 3f83a92 commit 705ee04

File tree

2 files changed

+4
-1
lines changed

2 files changed

+4
-1
lines changed

lib/Autocomplete.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@ let Autocomplete = React.createClass({
157157
}
158158
else {
159159
// text entered + menu item has been highlighted + enter is hit -> update value to that of selected menu item, close the menu
160+
event.preventDefault()
160161
var item = this.getFilteredItems()[this.state.highlightedIndex]
161162
var value = this.props.getItemValue(item)
162163
this.setState({

lib/__tests__/Autocomplete-test.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,7 @@ describe('Autocomplete kewDown->Enter event handlers', () => {
211211

212212
it('should invoke `onSelect` with the selected menu item and close the menu', () => {
213213
let value = 'Ar';
214+
let defaultPrevented = false;
214215
autocompleteWrapper.setState({'isOpen': true});
215216
autocompleteInputWrapper.simulate('focus');
216217
autocompleteWrapper.setProps({ value, onSelect(v) { value = v; } });
@@ -219,9 +220,10 @@ describe('Autocomplete kewDown->Enter event handlers', () => {
219220
autocompleteInputWrapper.simulate('keyUp', { key : 'r', keyCode: 82, which: 82 });
220221

221222
// Hit enter, updating state.value with the selected Autocomplete suggestion
222-
autocompleteInputWrapper.simulate('keyDown', { key : 'Enter', keyCode: 13, which: 13 });
223+
autocompleteInputWrapper.simulate('keyDown', { key : 'Enter', keyCode: 13, which: 13, preventDefault() { defaultPrevented = true; } });
223224
expect(value).to.equal('Arizona');
224225
expect(autocompleteWrapper.state('isOpen')).to.be.false;
226+
expect(defaultPrevented).to.be.true;
225227

226228
});
227229

0 commit comments

Comments
 (0)