Use callback-style refs

Author: CMTegner

lib/Autocomplete.js

@@ -148,6 +148,8 @@ let Autocomplete = React.createClass({
   },
 
   componentWillMount() {
+    // this.refs is frozen, so we need to assign a new object to it
+    this.refs = {}
     this._ignoreBlur = false
     this._performAutoCompleteOnUpdate = false
     this._performAutoCompleteOnKeyUp = false
@@ -376,7 +378,7 @@ let Autocomplete = React.createClass({
         onMouseDown: () => this.setIgnoreBlur(true), // Ignore blur to prevent menu from de-rendering before we can process click
         onMouseEnter: () => this.highlightItemFromMouse(index),
         onClick: () => this.selectItemFromMouse(item),
-        ref: `item-${index}`,
+        ref: e => this.refs[`item-${index}`] = e,
       })
     })
     const style = {
@@ -385,7 +387,7 @@ let Autocomplete = React.createClass({
       minWidth: this.state.menuWidth,
     }
     const menu = this.props.renderMenu(items, this.props.value, style)
-    return React.cloneElement(menu, { ref: 'menu' })
+    return React.cloneElement(menu, { ref: e => this.refs.menu = e })
   },
 
   handleInputBlur() {
@@ -452,7 +454,7 @@ let Autocomplete = React.createClass({
           aria-autocomplete="list"
           aria-expanded={open}
           autoComplete="off"
-          ref="input"
+          ref={e => this.refs.input = e}
           onFocus={this.composeEventHandlers(this.handleInputFocus, inputProps.onFocus)}
           onBlur={this.composeEventHandlers(this.handleInputBlur, inputProps.onBlur)}
           onChange={this.handleChange}

lib/__tests__/Autocomplete-test.js

@@ -56,7 +56,7 @@ describe('Autocomplete acceptance tests', () => {
     autocompleteInputWrapper.simulate('blur')
 
     expect(autocompleteWrapper.state('isOpen')).toBe(false)
-    expect(autocompleteWrapper.instance().refs.menu).toBe(undefined)
+    expect(autocompleteWrapper.instance().refs.menu).toBe(null)
 
   })
 
@@ -390,7 +390,7 @@ describe('Autocomplete#renderMenu', () => {
     //autocompleteInputWrapper.simulate('change', { target: { value: 'Ar' } })
     const autocompleteMenu = autocompleteWrapper.instance().renderMenu()
     expect(autocompleteMenu.type).toEqual('div')
-    expect(autocompleteMenu.ref).toEqual('menu')
+    expect(typeof autocompleteMenu.ref).toEqual('function')
     expect(autocompleteMenu.props.children.length).toEqual(50)
   })