Skip to content

Commit

Permalink
[fixed] Select highlighted item on input click (reactjs#84)
Browse files Browse the repository at this point in the history
While trying to debug reactjs#80 I discovered that clicking the input field to
"confirm" a suggestion didn't work as expected.

The problem:

1. Navigate to https://reactcommunity.org/react-autocomplete/static-data/
2. Type 'a' in input field
3. Observe that the input has been filled with 'Alabama'
4. Click anywhere inside the input field
5. Observe that the highlighted selection is gone, and the menu has been closed
6. Click/tab outside the input
7. Observe that the input value has been reverted to 'a'

This change ensures that clicking in the input field has the same effect as
clicking the highlighted item in the suggestion menu.
  • Loading branch information
CMTegner authored and whichsteveyp committed Jun 5, 2016
1 parent 1715443 commit 3f83a92
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 0 deletions.
2 changes: 2 additions & 0 deletions lib/Autocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -305,6 +305,8 @@ let Autocomplete = React.createClass({
handleInputClick () {
if (this.isInputFocused() && this.state.isOpen === false)
this.setState({ isOpen: true })
else if (this.state.highlightedIndex !== null)
this.selectItemFromMouse(this.getFilteredItems()[this.state.highlightedIndex])
},

render () {
Expand Down
21 changes: 21 additions & 0 deletions lib/__tests__/Autocomplete-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,27 @@ describe('Autocomplete kewDown->Escape event handlers', () => {

});

describe('Autocomplete click event handlers', () => {

var autocompleteWrapper = mount(AutocompleteComponentJSX({}));
var autocompleteInputWrapper = autocompleteWrapper.find('input');

it('should update input value from selected menu item and close the menu', () => {
autocompleteWrapper.setState({ isOpen: true });
autocompleteInputWrapper.simulate('focus');
autocompleteInputWrapper.simulate('change', { target: { value: 'Ar' } });

// simulate keyUp of last key, triggering autocomplete suggestion + selection of the suggestion in the menu
autocompleteInputWrapper.simulate('keyUp', { key : 'r', keyCode: 82, which: 82 });

// Click inside input, updating state.value with the selected Autocomplete suggestion
autocompleteInputWrapper.simulate('click');
expect(autocompleteWrapper.state('value')).to.equal('Arizona');
expect(autocompleteWrapper.state('isOpen')).to.be.false;
});

});

// Component method unit tests
describe('Autocomplete#renderMenu', () => {

Expand Down

0 comments on commit 3f83a92

Please sign in to comment.