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.

Author: CMTegner

lib/Autocomplete.js

@@ -405,21 +405,29 @@ let Autocomplete = React.createClass({
     return React.cloneElement(menu, { ref: e => this.refs.menu = e })
   },
 
-  handleInputBlur() {
+  handleInputBlur(event) {
     if (this._ignoreBlur)
       return
     this.setState({
       isOpen: false,
       highlightedIndex: null
     })
+    const { onBlur } = this.props.inputProps
+    if (onBlur) {
+      onBlur(event)
+    }
   },
 
-  handleInputFocus() {
+  handleInputFocus(event) {
     if (this._ignoreBlur) {
       this.setIgnoreBlur(false)
       return
     }
     this.setState({ isOpen: true })
+    const { onFocus } = this.props.inputProps
+    if (onFocus) {
+      onFocus(event)
+    }
   },
 
   isInputFocused() {
@@ -462,8 +470,8 @@ let Autocomplete = React.createClass({
           aria-expanded={open}
           autoComplete="off"
           ref={this.exposeAPI}
-          onFocus={this.composeEventHandlers(this.handleInputFocus, inputProps.onFocus)}
-          onBlur={this.composeEventHandlers(this.handleInputBlur, inputProps.onBlur)}
+          onFocus={this.handleInputFocus}
+          onBlur={this.handleInputBlur}
           onChange={this.handleChange}
           onKeyDown={this.composeEventHandlers(this.handleKeyDown, inputProps.onKeyDown)}
           onKeyUp={this.composeEventHandlers(this.handleKeyUp, inputProps.onKeyUp)}

lib/__tests__/Autocomplete-test.js

@@ -139,6 +139,25 @@ describe('Autocomplete acceptance tests', () => {
     })
   })
 
+  it('should not invoke onBlur and/or onFocus when selecting an item from the menu', () => {
+    const onBlurSpy = jest.fn()
+    const onFocusSpy = jest.fn()
+    const onSelectSpy = jest.fn()
+    const tree = mount(AutocompleteComponentJSX({
+      inputProps: {
+        onBlur: onBlurSpy,
+        onFocus: onFocusSpy,
+      },
+      onSelect: onSelectSpy,
+      open: true,
+    }))
+    tree.find('div > div > div').at(0).simulate('mouseDown')
+    tree.find('input').at(0).simulate('blur')
+    tree.find('div > div > div').at(0).simulate('click')
+    expect(onBlurSpy.mock.calls.length).toBe(0)
+    expect(onFocusSpy.mock.calls.length).toBe(0)
+    expect(onSelectSpy.mock.calls.length).toBe(1)
+  })
 })
 
 // Event handler unit tests