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

Commit 2a13d56

Browse files
committed
Prevent onFocus and onBlur when selecting an item #229
inputProps.onFocus and inputProps.onBlur were incorrectly being invoked when using the mouse to select an item from the menu. This is incorrect because although a focus and blur actually occur, the user does not perceive it. The Autocomplete internals ensure focus is restored after the user has clicked outside the <input> to select the item.
1 parent 5d833f8 commit 2a13d56

File tree

2 files changed

+31
-4
lines changed

2 files changed

+31
-4
lines changed

lib/Autocomplete.js

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -405,21 +405,29 @@ let Autocomplete = React.createClass({
405405
return React.cloneElement(menu, { ref: e => this.refs.menu = e })
406406
},
407407

408-
handleInputBlur() {
408+
handleInputBlur(event) {
409409
if (this._ignoreBlur)
410410
return
411411
this.setState({
412412
isOpen: false,
413413
highlightedIndex: null
414414
})
415+
const { onBlur } = this.props.inputProps
416+
if (onBlur) {
417+
onBlur(event)
418+
}
415419
},
416420

417-
handleInputFocus() {
421+
handleInputFocus(event) {
418422
if (this._ignoreBlur) {
419423
this.setIgnoreBlur(false)
420424
return
421425
}
422426
this.setState({ isOpen: true })
427+
const { onFocus } = this.props.inputProps
428+
if (onFocus) {
429+
onFocus(event)
430+
}
423431
},
424432

425433
isInputFocused() {
@@ -462,8 +470,8 @@ let Autocomplete = React.createClass({
462470
aria-expanded={open}
463471
autoComplete="off"
464472
ref={this.exposeAPI}
465-
onFocus={this.composeEventHandlers(this.handleInputFocus, inputProps.onFocus)}
466-
onBlur={this.composeEventHandlers(this.handleInputBlur, inputProps.onBlur)}
473+
onFocus={this.handleInputFocus}
474+
onBlur={this.handleInputBlur}
467475
onChange={this.handleChange}
468476
onKeyDown={this.composeEventHandlers(this.handleKeyDown, inputProps.onKeyDown)}
469477
onKeyUp={this.composeEventHandlers(this.handleKeyUp, inputProps.onKeyUp)}

lib/__tests__/Autocomplete-test.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,25 @@ describe('Autocomplete acceptance tests', () => {
139139
})
140140
})
141141

142+
it('should not invoke onBlur and/or onFocus when selecting an item from the menu', () => {
143+
const onBlurSpy = jest.fn()
144+
const onFocusSpy = jest.fn()
145+
const onSelectSpy = jest.fn()
146+
const tree = mount(AutocompleteComponentJSX({
147+
inputProps: {
148+
onBlur: onBlurSpy,
149+
onFocus: onFocusSpy,
150+
},
151+
onSelect: onSelectSpy,
152+
open: true,
153+
}))
154+
tree.find('div > div > div').at(0).simulate('mouseDown')
155+
tree.find('input').at(0).simulate('blur')
156+
tree.find('div > div > div').at(0).simulate('click')
157+
expect(onBlurSpy.mock.calls.length).toBe(0)
158+
expect(onFocusSpy.mock.calls.length).toBe(0)
159+
expect(onSelectSpy.mock.calls.length).toBe(1)
160+
})
142161
})
143162

144163
// Event handler unit tests

0 commit comments

Comments
 (0)