From da31cb9651929b4662bb5447c5c7e7eeb8502fcc Mon Sep 17 00:00:00 2001
From: L-x-C <lxc.neal@gmail.com>
Date: Tue, 6 Jun 2017 11:12:00 +0800
Subject: [PATCH 01/10] add afterDropdownVisibleChange

---
 examples/single.js | 5 +++++
 src/Select.jsx     | 2 ++
 2 files changed, 7 insertions(+)

diff --git a/examples/single.js b/examples/single.js
index fb9c3606d..db5bd5d77 100644
--- a/examples/single.js
+++ b/examples/single.js
@@ -38,6 +38,10 @@ class Test extends React.Component {
     console.log('onFocus');
   };
 
+  afterDropdownVisibleChange = (open, popupDOMNode) => {
+    console.log('afterDropdownVisibleChange', open, popupDOMNode);
+  };
+
   render() {
     if (this.state.destroy) {
       return null;
@@ -53,6 +57,7 @@ class Test extends React.Component {
             value={this.state.value}
             placeholder="placeholder"
             dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
+            afterDropdownVisibleChange={this.afterDropdownVisibleChange}
             style={{ width: 500 }}
             onBlur={this.onBlur}
             onFocus={this.onFocus}
diff --git a/src/Select.jsx b/src/Select.jsx
index c26244474..cdc3676a2 100644
--- a/src/Select.jsx
+++ b/src/Select.jsx
@@ -55,6 +55,7 @@ const Select = createClass({
       onSelect: noop,
       onSearch: noop,
       onDeselect: noop,
+      afterDropdownVisibleChange: () => {},
       showArrow: true,
       dropdownMatchSelectWidth: true,
       dropdownStyle: {},
@@ -538,6 +539,7 @@ const Select = createClass({
       if (open) {
         this.maybeFocus(open, needFocus);
       }
+      this.props.afterDropdownVisibleChange(open, this.getPopupDOMNode());
     });
   },
   setInputValue(inputValue, fireSearch = true) {

From edf02ff737f9319b1b37435c421357b322ef4e8c Mon Sep 17 00:00:00 2001
From: L-x-C <lxc.neal@gmail.com>
Date: Wed, 14 Jun 2017 14:43:15 +0800
Subject: [PATCH 02/10] firstActiveValue

---
 README.md             | 1 +
 examples/single.js    | 6 +-----
 src/DropdownMenu.jsx  | 8 +++++---
 src/Select.jsx        | 3 +--
 src/SelectTrigger.jsx | 1 +
 5 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index f584db03e..97e2f0d0e 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,7 @@ React.render(c, container);
 |optionLabelProp | which prop value of option will render as content of select | String | 'value' |
 |defaultValue | initial selected option(s) | String/Array<String> | - |
 |value | current selected option(s) | String/Array<String>/{key:String, label:React.Node}/Array<{key, label}> | - |
+|firstActiveValue | first active value when there is no value | String/Array<String> | - |
 |labelInValue| whether to embed label in value, see above value type | Bool | false |
 |onChange | called when select an option or input value change(combobox) | function(value) | - |
 |onSearch | called when input changed | function | - |
diff --git a/examples/single.js b/examples/single.js
index db5bd5d77..93221468a 100644
--- a/examples/single.js
+++ b/examples/single.js
@@ -38,10 +38,6 @@ class Test extends React.Component {
     console.log('onFocus');
   };
 
-  afterDropdownVisibleChange = (open, popupDOMNode) => {
-    console.log('afterDropdownVisibleChange', open, popupDOMNode);
-  };
-
   render() {
     if (this.state.destroy) {
       return null;
@@ -57,7 +53,6 @@ class Test extends React.Component {
             value={this.state.value}
             placeholder="placeholder"
             dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
-            afterDropdownVisibleChange={this.afterDropdownVisibleChange}
             style={{ width: 500 }}
             onBlur={this.onBlur}
             onFocus={this.onFocus}
@@ -65,6 +60,7 @@ class Test extends React.Component {
             optionLabelProp="children"
             optionFilterProp="text"
             onChange={this.onChange}
+            firstActiveValue="2"
           >
             <Option value="01" text="jack" title="jack">
               <b
diff --git a/src/DropdownMenu.jsx b/src/DropdownMenu.jsx
index 6192fd9ea..2206f7ca8 100644
--- a/src/DropdownMenu.jsx
+++ b/src/DropdownMenu.jsx
@@ -63,7 +63,7 @@ export default class DropdownMenu extends React.Component {
       menuItems,
       defaultActiveFirstOption, value,
       prefixCls, multiple,
-      onMenuSelect, inputValue,
+      onMenuSelect, inputValue, firstActiveValue,
     } = props;
     if (menuItems && menuItems.length) {
       const menuProps = {};
@@ -78,7 +78,7 @@ export default class DropdownMenu extends React.Component {
       const activeKeyProps = {};
 
       let clonedMenuItems = menuItems;
-      if (selectedKeys.length) {
+      if (selectedKeys.length || firstActiveValue) {
         if (props.visible && !this.lastVisible) {
           activeKeyProps.activeKey = selectedKeys[0];
         }
@@ -86,7 +86,8 @@ export default class DropdownMenu extends React.Component {
         // set firstActiveItem via cloning menus
         // for scroll into view
         const clone = (item) => {
-          if (!foundFirst && selectedKeys.indexOf(item.key) !== -1) {
+          if ((!foundFirst && selectedKeys.indexOf(item.key) !== -1)
+            || (!foundFirst && !selectedKeys.length && firstActiveValue.indexOf(item.key) !== -1)) {
             foundFirst = true;
             return cloneElement(item, {
               ref: (ref) => {
@@ -106,6 +107,7 @@ export default class DropdownMenu extends React.Component {
         });
       }
 
+
       // clear activeKey when inputValue change
       if (inputValue !== this.lastInputValue) {
         activeKeyProps.activeKey = '';
diff --git a/src/Select.jsx b/src/Select.jsx
index cdc3676a2..3c17e1439 100644
--- a/src/Select.jsx
+++ b/src/Select.jsx
@@ -55,7 +55,6 @@ const Select = createClass({
       onSelect: noop,
       onSearch: noop,
       onDeselect: noop,
-      afterDropdownVisibleChange: () => {},
       showArrow: true,
       dropdownMatchSelectWidth: true,
       dropdownStyle: {},
@@ -539,7 +538,6 @@ const Select = createClass({
       if (open) {
         this.maybeFocus(open, needFocus);
       }
-      this.props.afterDropdownVisibleChange(open, this.getPopupDOMNode());
     });
   },
   setInputValue(inputValue, fireSearch = true) {
@@ -911,6 +909,7 @@ const Select = createClass({
         visible={open}
         inputValue={state.inputValue}
         value={state.value}
+        firstActiveValue={props.firstActiveValue}
         onDropdownVisibleChange={this.onDropdownVisibleChange}
         getPopupContainer={props.getPopupContainer}
         onMenuSelect={this.onMenuSelect}
diff --git a/src/SelectTrigger.jsx b/src/SelectTrigger.jsx
index 21140ae1e..7761b1fa9 100644
--- a/src/SelectTrigger.jsx
+++ b/src/SelectTrigger.jsx
@@ -73,6 +73,7 @@ export default class SelectTrigger extends React.Component {
       onMenuSelect={props.onMenuSelect}
       onMenuDeselect={props.onMenuDeselect}
       value={props.value}
+      firstActiveValue={props.firstActiveValue}
       defaultActiveFirstOption={props.defaultActiveFirstOption}
       dropdownMenuStyle={props.dropdownMenuStyle}
     />);

From 93cddff387aa81766eb7d627cdb654930ff74003 Mon Sep 17 00:00:00 2001
From: L-x-C <lxc.neal@gmail.com>
Date: Mon, 26 Jun 2017 09:52:56 +0800
Subject: [PATCH 03/10] firstActiveValue

---
 src/Select.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Select.jsx b/src/Select.jsx
index 3c17e1439..75efd37d5 100644
--- a/src/Select.jsx
+++ b/src/Select.jsx
@@ -49,6 +49,7 @@ const Select = createClass({
       showSearch: true,
       allowClear: false,
       placeholder: '',
+      firstActiveValue: '',
       onChange: noop,
       onFocus: noop,
       onBlur: noop,

From 1f332342a9b87638ee9c0e8feb127300b4e4ea4c Mon Sep 17 00:00:00 2001
From: L-x-C <lxc.neal@gmail.com>
Date: Mon, 26 Jun 2017 10:21:10 +0800
Subject: [PATCH 04/10] jest

---
 src/Select.jsx                                 | 1 -
 tests/__snapshots__/SelectTrigger.spec.js.snap | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Select.jsx b/src/Select.jsx
index 75efd37d5..3c17e1439 100644
--- a/src/Select.jsx
+++ b/src/Select.jsx
@@ -49,7 +49,6 @@ const Select = createClass({
       showSearch: true,
       allowClear: false,
       placeholder: '',
-      firstActiveValue: '',
       onChange: noop,
       onFocus: noop,
       onBlur: noop,
diff --git a/tests/__snapshots__/SelectTrigger.spec.js.snap b/tests/__snapshots__/SelectTrigger.spec.js.snap
index ee889d362..671346acb 100644
--- a/tests/__snapshots__/SelectTrigger.spec.js.snap
+++ b/tests/__snapshots__/SelectTrigger.spec.js.snap
@@ -61,6 +61,7 @@ exports[`SelectTrigger renders correctly 1`] = `
       <DropdownMenu
         defaultActiveFirstOption={undefined}
         dropdownMenuStyle={undefined}
+        firstActiveValue={undefined}
         inputValue={undefined}
         menuItems={undefined}
         multiple={undefined}

From 1998558e46a24bb3ebb050ed27e18dc8145f796c Mon Sep 17 00:00:00 2001
From: L-x-C <lxc.neal@gmail.com>
Date: Fri, 30 Jun 2017 10:26:56 +0800
Subject: [PATCH 05/10] remove afterdropdownvisiblechange

---
 examples/single.js | 5 -----
 src/Select.jsx     | 2 --
 2 files changed, 7 deletions(-)

diff --git a/examples/single.js b/examples/single.js
index db5bd5d77..fb9c3606d 100644
--- a/examples/single.js
+++ b/examples/single.js
@@ -38,10 +38,6 @@ class Test extends React.Component {
     console.log('onFocus');
   };
 
-  afterDropdownVisibleChange = (open, popupDOMNode) => {
-    console.log('afterDropdownVisibleChange', open, popupDOMNode);
-  };
-
   render() {
     if (this.state.destroy) {
       return null;
@@ -57,7 +53,6 @@ class Test extends React.Component {
             value={this.state.value}
             placeholder="placeholder"
             dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
-            afterDropdownVisibleChange={this.afterDropdownVisibleChange}
             style={{ width: 500 }}
             onBlur={this.onBlur}
             onFocus={this.onFocus}
diff --git a/src/Select.jsx b/src/Select.jsx
index cdc3676a2..c26244474 100644
--- a/src/Select.jsx
+++ b/src/Select.jsx
@@ -55,7 +55,6 @@ const Select = createClass({
       onSelect: noop,
       onSearch: noop,
       onDeselect: noop,
-      afterDropdownVisibleChange: () => {},
       showArrow: true,
       dropdownMatchSelectWidth: true,
       dropdownStyle: {},
@@ -539,7 +538,6 @@ const Select = createClass({
       if (open) {
         this.maybeFocus(open, needFocus);
       }
-      this.props.afterDropdownVisibleChange(open, this.getPopupDOMNode());
     });
   },
   setInputValue(inputValue, fireSearch = true) {

From 77ec9809908ff03e1755d1b32b2af10fc0f6e653 Mon Sep 17 00:00:00 2001
From: L-x-C <lxc.neal@gmail.com>
Date: Tue, 4 Jul 2017 09:46:19 +0800
Subject: [PATCH 06/10] scrollIntoViewOpts

---
 src/DropdownMenu.jsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/DropdownMenu.jsx b/src/DropdownMenu.jsx
index 2206f7ca8..fb29a6aac 100644
--- a/src/DropdownMenu.jsx
+++ b/src/DropdownMenu.jsx
@@ -50,10 +50,18 @@ export default class DropdownMenu extends React.Component {
   scrollActiveItemToView = () => {
     // scroll into view
     const itemComponent = findDOMNode(this.firstActiveItem);
+    const props = this.props;
+
     if (itemComponent) {
-      scrollIntoView(itemComponent, findDOMNode(this.refs.menu), {
+      const scrollIntoViewOpts = {
         onlyScrollIfNeeded: true,
-      });
+      };
+
+      if (props.value.length === 0 && props.firstActiveValue) {
+        scrollIntoViewOpts.alignWithTop = true;
+      }
+
+      scrollIntoView(itemComponent, findDOMNode(this.refs.menu), scrollIntoViewOpts);
     }
   }
 

From b45a39ddc1ca3993960816f93e94d78ef6485427 Mon Sep 17 00:00:00 2001
From: L-x-C <lxc.neal@gmail.com>
Date: Wed, 26 Jul 2017 10:45:37 +0800
Subject: [PATCH 07/10] first active value highlight

---
 src/DropdownMenu.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DropdownMenu.jsx b/src/DropdownMenu.jsx
index fb29a6aac..8a1349740 100644
--- a/src/DropdownMenu.jsx
+++ b/src/DropdownMenu.jsx
@@ -88,7 +88,7 @@ export default class DropdownMenu extends React.Component {
       let clonedMenuItems = menuItems;
       if (selectedKeys.length || firstActiveValue) {
         if (props.visible && !this.lastVisible) {
-          activeKeyProps.activeKey = selectedKeys[0];
+          activeKeyProps.activeKey = selectedKeys[0] || firstActiveValue;
         }
         let foundFirst = false;
         // set firstActiveItem via cloning menus

From 1b0b5dc51355ee645ecc632338170499101fe15a Mon Sep 17 00:00:00 2001
From: coderpawz <coderpawz@gmail.com>
Date: Tue, 25 Jul 2017 22:49:57 -0400
Subject: [PATCH 08/10] update react refs to use callbacks instead of strings;

move saveRef to utils and use anywhere we want to save a ref;
---
 src/DropdownMenu.jsx  | 11 ++++++++---
 src/Select.jsx        | 31 +++++++++++++++----------------
 src/SelectTrigger.jsx | 21 ++++++++++++---------
 src/util.js           |  4 ++++
 tests/util.spec.js    | 12 ++++++++++++
 5 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/src/DropdownMenu.jsx b/src/DropdownMenu.jsx
index 6192fd9ea..e87fab14d 100644
--- a/src/DropdownMenu.jsx
+++ b/src/DropdownMenu.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import toArray from 'rc-util/lib/Children/toArray';
 import Menu from 'rc-menu';
 import scrollIntoView from 'dom-scroll-into-view';
-import { getSelectKeys, preventDefaultEvent } from './util';
+import { getSelectKeys, preventDefaultEvent, saveRef } from './util';
 
 export default class DropdownMenu extends React.Component {
   static propTypes= {
@@ -21,6 +21,11 @@ export default class DropdownMenu extends React.Component {
     visible: PropTypes.bool,
   }
 
+  constructor(props) {
+    super(props);
+    this.saveMenuRef = saveRef.bind(this, 'menuInstance');
+  }
+
   componentWillMount() {
     this.lastInputValue = this.props.inputValue;
   }
@@ -51,7 +56,7 @@ export default class DropdownMenu extends React.Component {
     // scroll into view
     const itemComponent = findDOMNode(this.firstActiveItem);
     if (itemComponent) {
-      scrollIntoView(itemComponent, findDOMNode(this.refs.menu), {
+      scrollIntoView(itemComponent, findDOMNode(this.menuInstance), {
         onlyScrollIfNeeded: true,
       });
     }
@@ -112,7 +117,7 @@ export default class DropdownMenu extends React.Component {
       }
 
       return (<Menu
-        ref="menu"
+        ref={this.saveMenuRef}
         style={this.props.dropdownMenuStyle}
         defaultActiveFirst={defaultActiveFirstOption}
         {...activeKeyProps}
diff --git a/src/Select.jsx b/src/Select.jsx
index f8725785e..2100bfb56 100644
--- a/src/Select.jsx
+++ b/src/Select.jsx
@@ -11,7 +11,7 @@ import {
   UNSELECTABLE_ATTRIBUTE, UNSELECTABLE_STYLE,
   preventDefaultEvent, findFirstMenuItem,
   includesSeparators, splitBySeparators,
-  findIndexInValueByLabel, defaultFilterFn,
+  findIndexInValueByLabel, defaultFilterFn, saveRef,
 } from './util';
 import SelectTrigger from './SelectTrigger';
 import { SelectPropTypes } from './PropTypes';
@@ -21,10 +21,6 @@ import warning from 'warning';
 function noop() {
 }
 
-function saveRef(name, component) {
-  this[name] = component;
-}
-
 function chaining(...fns) {
   return function (...args) {  // eslint-disable-line
     for (let i = 0; i < fns.length; i++) {
@@ -78,6 +74,9 @@ constructor(props) {
   }
   this.saveInputRef = saveRef.bind(this, 'inputInstance');
   this.saveInputMirrorRef = saveRef.bind(this, 'inputMirrorInstance');
+  this.saveRootRef = saveRef.bind(this, 'rootInstance');
+  this.saveSelectionRef = saveRef.bind(this, 'selectionInstance');
+  this.saveTriggerRef = saveRef.bind(this, 'triggerInstance');
   let open = props.open;
   if (open === undefined) {
     open = props.defaultOpen;
@@ -216,7 +215,7 @@ constructor(props) {
     }
 
     if (state.open) {
-      const menu = this.refs.trigger.getInnerMenu();
+      const menu = this.triggerInstance.getInnerMenu();
       if (menu && menu.onKeyDown(event)) {
         event.preventDefault();
         event.stopPropagation();
@@ -362,7 +361,7 @@ constructor(props) {
   }
 
   onChoiceAnimationLeave =() => {
-    this.refs.trigger.refs.trigger.forcePopupAlign();
+    this.triggerInstance.triggerInstance.forcePopupAlign();
   }
 
   getLabelBySingleValue = (children, value) => {
@@ -505,11 +504,11 @@ constructor(props) {
   }
 
   getPopupDOMNode=() => {
-    return this.refs.trigger.getPopupDOMNode();
+    return this.triggerInstance.getPopupDOMNode();
   }
 
   getPopupMenuComponent=() => {
-    return this.refs.trigger.getInnerMenu();
+    return this.triggerInstance.getInnerMenu();
   }
 
   setOpenState = (open, needFocus) => {
@@ -600,12 +599,12 @@ constructor(props) {
   }
 
   updateFocusClassName = () => {
-    const { refs, props } = this;
+    const { rootInstance, props } = this;
     // avoid setState and its side effect
     if (this._focused) {
-      classes(refs.root).add(`${props.prefixCls}-focused`);
+      classes(rootInstance).add(`${props.prefixCls}-focused`);
     } else {
-      classes(refs.root).remove(`${props.prefixCls}-focused`);
+      classes(rootInstance).remove(`${props.prefixCls}-focused`);
     }
   }
 
@@ -619,7 +618,7 @@ constructor(props) {
           this._focused = true;
         }
       } else {
-        const selection = this.refs.selection;
+        const selection = this.selectionInstance;
         if (activeElement !== selection) {
           selection.focus();
           this._focused = true;
@@ -1035,17 +1034,17 @@ constructor(props) {
         getPopupContainer={props.getPopupContainer}
         onMenuSelect={this.onMenuSelect}
         onMenuDeselect={this.onMenuDeselect}
-        ref="trigger"
+        ref={this.saveTriggerRef}
       >
         <div
           style={props.style}
-          ref="root"
+          ref={this.saveRootRef}
           onBlur={this.onOuterBlur}
           onFocus={this.onOuterFocus}
           className={classnames(rootCls)}
         >
           <div
-            ref="selection"
+            ref={this.saveSelectionRef}
             key="selection"
             className={`${prefixCls}-selection
             ${prefixCls}-selection--${multiple ? 'multiple' : 'single'}`}
diff --git a/src/SelectTrigger.jsx b/src/SelectTrigger.jsx
index 21140ae1e..1461d92c7 100644
--- a/src/SelectTrigger.jsx
+++ b/src/SelectTrigger.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import DropdownMenu from './DropdownMenu';
 import ReactDOM from 'react-dom';
-import { isSingleMode } from './util';
+import { isSingleMode, saveRef } from './util';
 
 Trigger.displayName = 'Trigger';
 
@@ -45,6 +45,13 @@ export default class SelectTrigger extends React.Component {
     children: PropTypes.any,
   }
 
+  constructor(props) {
+    super(props);
+
+    this.saveMenuRef = saveRef.bind(this, 'popupMenu');
+    this.saveTriggerRef = saveRef.bind(this, 'triggerInstance');
+  }
+
   componentDidUpdate() {
     const { visible, dropdownMatchSelectWidth } = this.props;
     if (visible) {
@@ -57,17 +64,17 @@ export default class SelectTrigger extends React.Component {
   }
 
   getInnerMenu = () => {
-    return this.popupMenu && this.popupMenu.refs.menu;
+    return this.popupMenu && this.popupMenu.menuInstance;
   }
 
   getPopupDOMNode = () => {
-    return this.refs.trigger.getPopupDomNode();
+    return this.triggerInstance.getPopupDomNode();
   }
 
   getDropdownElement = (newProps) => {
     const props = this.props;
     return (<DropdownMenu
-      ref={this.saveMenu}
+      ref={this.saveMenuRef}
       {...newProps}
       prefixCls={this.getDropdownPrefixCls()}
       onMenuSelect={props.onMenuSelect}
@@ -91,10 +98,6 @@ export default class SelectTrigger extends React.Component {
     return `${this.props.prefixCls}-dropdown`;
   }
 
-  saveMenu = (menu) => {
-    this.popupMenu = menu;
-  }
-
   render() {
     const { onPopupFocus, ...props } = this.props;
     const { multiple, visible, inputValue, dropdownAlign,
@@ -122,7 +125,7 @@ export default class SelectTrigger extends React.Component {
     return (<Trigger {...props}
       showAction={disabled ? [] : ['click']}
       hideAction={hideAction}
-      ref="trigger"
+      ref={this.saveTriggerRef}
       popupPlacement="bottomLeft"
       builtinPlacements={BUILT_IN_PLACEMENTS}
       prefixCls={dropdownPrefixCls}
diff --git a/src/util.js b/src/util.js
index d7031c89c..58a1a7a7b 100644
--- a/src/util.js
+++ b/src/util.js
@@ -141,3 +141,7 @@ export function splitBySeparators(string, separators) {
 export function defaultFilterFn(input, child) {
   return String(getPropValue(child, this.props.optionFilterProp)).indexOf(input) > -1;
 }
+
+export function saveRef(name, component) {
+  this[name] = component;
+}
diff --git a/tests/util.spec.js b/tests/util.spec.js
index a1a8a1b12..e20040b5b 100644
--- a/tests/util.spec.js
+++ b/tests/util.spec.js
@@ -4,6 +4,7 @@ import {
   splitBySeparators,
   getValuePropValue,
   defaultFilterFn,
+  saveRef,
 } from '../src/util';
 
 describe('includesSeparators', () => {
@@ -94,3 +95,14 @@ describe('defaultFilterFn', () => {
     expect(defaultFilterFn.call(testerInstance, 'wrong-val', child)).toBe(false);
   });
 });
+
+describe('saveRef', () => {
+  const mock = {};
+  const saveTestRef = saveRef.bind(mock, 'testInstance');
+
+  it('adds a property with the given name to context', () => {
+    expect(mock.testInstance).toBe(undefined);
+    saveTestRef('bar');
+    expect(mock.testInstance).toBe('bar');
+  });
+});

From 93799dc8d08a49593b452e95c16e60be09849416 Mon Sep 17 00:00:00 2001
From: L-x-C <lxc.neal@gmail.com>
Date: Wed, 26 Jul 2017 15:58:48 +0800
Subject: [PATCH 09/10] add firstActiveValue test

---
 src/DropdownMenu.jsx       |  3 +--
 tests/DropdownMenu.spec.js | 53 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/src/DropdownMenu.jsx b/src/DropdownMenu.jsx
index 8a1349740..b2cbf24e3 100644
--- a/src/DropdownMenu.jsx
+++ b/src/DropdownMenu.jsx
@@ -56,8 +56,7 @@ export default class DropdownMenu extends React.Component {
       const scrollIntoViewOpts = {
         onlyScrollIfNeeded: true,
       };
-
-      if (props.value.length === 0 && props.firstActiveValue) {
+      if ((!props.value || props.value.length === 0) && props.firstActiveValue) {
         scrollIntoViewOpts.alignWithTop = true;
       }
 
diff --git a/tests/DropdownMenu.spec.js b/tests/DropdownMenu.spec.js
index 73e18ab75..773323c80 100644
--- a/tests/DropdownMenu.spec.js
+++ b/tests/DropdownMenu.spec.js
@@ -61,6 +61,59 @@ describe('DropdownMenu', () => {
     expect(wrapper.find('Menu').props().activeKey).toBe('');
   });
 
+  it('save firstActiveValue', () => {
+    const menuItems = [
+      <MenuItem key="1">1</MenuItem>,
+      <MenuItem key="2">2</MenuItem>,
+    ];
+
+    const wrapper = mount(
+      <DropdownMenu
+        menuItems={menuItems}
+        firstActiveValue={'2'}
+      />
+    );
+
+    expect(wrapper.instance().firstActiveItem.props.children).toBe('2');
+  });
+
+  it('set firstActiveValue key to menu', () => {
+    const menuItems = [
+      <MenuItem key="1">1</MenuItem>,
+      <MenuItem key="2">2</MenuItem>,
+    ];
+
+    const wrapper = mount(
+      <DropdownMenu
+        menuItems={menuItems}
+        firstActiveValue={'2'}
+      />
+    );
+
+    wrapper.setProps({ visible: true });
+    expect(wrapper.find('Menu').props().activeKey).toBe('2');
+
+    wrapper.setProps({ inputValue: 'foo' });
+    expect(wrapper.find('Menu').props().activeKey).toBe('');
+  });
+
+  it('save value not firstActiveValue', () => {
+    const menuItems = [
+      <MenuItem key="1">1</MenuItem>,
+      <MenuItem key="2">2</MenuItem>,
+    ];
+
+    const wrapper = mount(
+      <DropdownMenu
+        value={[{ key: '1' }]}
+        menuItems={menuItems}
+        firstActiveValue={'2'}
+      />
+    );
+
+    expect(wrapper.instance().firstActiveItem.props.children).toBe('1');
+  });
+
   it('save visible and inputValue when update', () => {
     const wrapper = mount(
       <DropdownMenu />

From 23cff8844345e30f64db0fb0ea189c128ae4f7f1 Mon Sep 17 00:00:00 2001
From: coderpawz <coderpawz@gmail.com>
Date: Tue, 25 Jul 2017 22:49:57 -0400
Subject: [PATCH 10/10] update react refs to use callbacks instead of strings;

move saveRef to utils and use anywhere we want to save a ref;
---
 src/DropdownMenu.jsx  | 11 ++++++++---
 src/Select.jsx        | 31 +++++++++++++++----------------
 src/SelectTrigger.jsx | 21 ++++++++++++---------
 src/util.js           |  4 ++++
 tests/util.spec.js    | 12 ++++++++++++
 5 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/src/DropdownMenu.jsx b/src/DropdownMenu.jsx
index b2cbf24e3..4871acd54 100644
--- a/src/DropdownMenu.jsx
+++ b/src/DropdownMenu.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import toArray from 'rc-util/lib/Children/toArray';
 import Menu from 'rc-menu';
 import scrollIntoView from 'dom-scroll-into-view';
-import { getSelectKeys, preventDefaultEvent } from './util';
+import { getSelectKeys, preventDefaultEvent, saveRef } from './util';
 
 export default class DropdownMenu extends React.Component {
   static propTypes= {
@@ -21,6 +21,11 @@ export default class DropdownMenu extends React.Component {
     visible: PropTypes.bool,
   }
 
+  constructor(props) {
+    super(props);
+    this.saveMenuRef = saveRef.bind(this, 'menuInstance');
+  }
+
   componentWillMount() {
     this.lastInputValue = this.props.inputValue;
   }
@@ -60,7 +65,7 @@ export default class DropdownMenu extends React.Component {
         scrollIntoViewOpts.alignWithTop = true;
       }
 
-      scrollIntoView(itemComponent, findDOMNode(this.refs.menu), scrollIntoViewOpts);
+      scrollIntoView(itemComponent, findDOMNode(this.menuInstance), scrollIntoViewOpts);
     }
   }
 
@@ -121,7 +126,7 @@ export default class DropdownMenu extends React.Component {
       }
 
       return (<Menu
-        ref="menu"
+        ref={this.saveMenuRef}
         style={this.props.dropdownMenuStyle}
         defaultActiveFirst={defaultActiveFirstOption}
         {...activeKeyProps}
diff --git a/src/Select.jsx b/src/Select.jsx
index 92dc3e499..43794153b 100644
--- a/src/Select.jsx
+++ b/src/Select.jsx
@@ -11,7 +11,7 @@ import {
   UNSELECTABLE_ATTRIBUTE, UNSELECTABLE_STYLE,
   preventDefaultEvent, findFirstMenuItem,
   includesSeparators, splitBySeparators,
-  findIndexInValueByLabel, defaultFilterFn,
+  findIndexInValueByLabel, defaultFilterFn, saveRef,
 } from './util';
 import SelectTrigger from './SelectTrigger';
 import { SelectPropTypes } from './PropTypes';
@@ -21,10 +21,6 @@ import warning from 'warning';
 function noop() {
 }
 
-function saveRef(name, component) {
-  this[name] = component;
-}
-
 function chaining(...fns) {
   return function (...args) {  // eslint-disable-line
     for (let i = 0; i < fns.length; i++) {
@@ -78,6 +74,9 @@ constructor(props) {
   }
   this.saveInputRef = saveRef.bind(this, 'inputInstance');
   this.saveInputMirrorRef = saveRef.bind(this, 'inputMirrorInstance');
+  this.saveRootRef = saveRef.bind(this, 'rootInstance');
+  this.saveSelectionRef = saveRef.bind(this, 'selectionInstance');
+  this.saveTriggerRef = saveRef.bind(this, 'triggerInstance');
   let open = props.open;
   if (open === undefined) {
     open = props.defaultOpen;
@@ -216,7 +215,7 @@ constructor(props) {
     }
 
     if (state.open) {
-      const menu = this.refs.trigger.getInnerMenu();
+      const menu = this.triggerInstance.getInnerMenu();
       if (menu && menu.onKeyDown(event)) {
         event.preventDefault();
         event.stopPropagation();
@@ -362,7 +361,7 @@ constructor(props) {
   }
 
   onChoiceAnimationLeave =() => {
-    this.refs.trigger.refs.trigger.forcePopupAlign();
+    this.triggerInstance.triggerInstance.forcePopupAlign();
   }
 
   getLabelBySingleValue = (children, value) => {
@@ -505,11 +504,11 @@ constructor(props) {
   }
 
   getPopupDOMNode=() => {
-    return this.refs.trigger.getPopupDOMNode();
+    return this.triggerInstance.getPopupDOMNode();
   }
 
   getPopupMenuComponent=() => {
-    return this.refs.trigger.getInnerMenu();
+    return this.triggerInstance.getInnerMenu();
   }
 
   setOpenState = (open, needFocus) => {
@@ -600,12 +599,12 @@ constructor(props) {
   }
 
   updateFocusClassName = () => {
-    const { refs, props } = this;
+    const { rootInstance, props } = this;
     // avoid setState and its side effect
     if (this._focused) {
-      classes(refs.root).add(`${props.prefixCls}-focused`);
+      classes(rootInstance).add(`${props.prefixCls}-focused`);
     } else {
-      classes(refs.root).remove(`${props.prefixCls}-focused`);
+      classes(rootInstance).remove(`${props.prefixCls}-focused`);
     }
   }
 
@@ -619,7 +618,7 @@ constructor(props) {
           this._focused = true;
         }
       } else {
-        const selection = this.refs.selection;
+        const selection = this.selectionInstance;
         if (activeElement !== selection) {
           selection.focus();
           this._focused = true;
@@ -1036,17 +1035,17 @@ constructor(props) {
         getPopupContainer={props.getPopupContainer}
         onMenuSelect={this.onMenuSelect}
         onMenuDeselect={this.onMenuDeselect}
-        ref="trigger"
+        ref={this.saveTriggerRef}
       >
         <div
           style={props.style}
-          ref="root"
+          ref={this.saveRootRef}
           onBlur={this.onOuterBlur}
           onFocus={this.onOuterFocus}
           className={classnames(rootCls)}
         >
           <div
-            ref="selection"
+            ref={this.saveSelectionRef}
             key="selection"
             className={`${prefixCls}-selection
             ${prefixCls}-selection--${multiple ? 'multiple' : 'single'}`}
diff --git a/src/SelectTrigger.jsx b/src/SelectTrigger.jsx
index 7761b1fa9..43380c3c8 100644
--- a/src/SelectTrigger.jsx
+++ b/src/SelectTrigger.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import DropdownMenu from './DropdownMenu';
 import ReactDOM from 'react-dom';
-import { isSingleMode } from './util';
+import { isSingleMode, saveRef } from './util';
 
 Trigger.displayName = 'Trigger';
 
@@ -45,6 +45,13 @@ export default class SelectTrigger extends React.Component {
     children: PropTypes.any,
   }
 
+  constructor(props) {
+    super(props);
+
+    this.saveMenuRef = saveRef.bind(this, 'popupMenu');
+    this.saveTriggerRef = saveRef.bind(this, 'triggerInstance');
+  }
+
   componentDidUpdate() {
     const { visible, dropdownMatchSelectWidth } = this.props;
     if (visible) {
@@ -57,17 +64,17 @@ export default class SelectTrigger extends React.Component {
   }
 
   getInnerMenu = () => {
-    return this.popupMenu && this.popupMenu.refs.menu;
+    return this.popupMenu && this.popupMenu.menuInstance;
   }
 
   getPopupDOMNode = () => {
-    return this.refs.trigger.getPopupDomNode();
+    return this.triggerInstance.getPopupDomNode();
   }
 
   getDropdownElement = (newProps) => {
     const props = this.props;
     return (<DropdownMenu
-      ref={this.saveMenu}
+      ref={this.saveMenuRef}
       {...newProps}
       prefixCls={this.getDropdownPrefixCls()}
       onMenuSelect={props.onMenuSelect}
@@ -92,10 +99,6 @@ export default class SelectTrigger extends React.Component {
     return `${this.props.prefixCls}-dropdown`;
   }
 
-  saveMenu = (menu) => {
-    this.popupMenu = menu;
-  }
-
   render() {
     const { onPopupFocus, ...props } = this.props;
     const { multiple, visible, inputValue, dropdownAlign,
@@ -123,7 +126,7 @@ export default class SelectTrigger extends React.Component {
     return (<Trigger {...props}
       showAction={disabled ? [] : ['click']}
       hideAction={hideAction}
-      ref="trigger"
+      ref={this.saveTriggerRef}
       popupPlacement="bottomLeft"
       builtinPlacements={BUILT_IN_PLACEMENTS}
       prefixCls={dropdownPrefixCls}
diff --git a/src/util.js b/src/util.js
index d7031c89c..58a1a7a7b 100644
--- a/src/util.js
+++ b/src/util.js
@@ -141,3 +141,7 @@ export function splitBySeparators(string, separators) {
 export function defaultFilterFn(input, child) {
   return String(getPropValue(child, this.props.optionFilterProp)).indexOf(input) > -1;
 }
+
+export function saveRef(name, component) {
+  this[name] = component;
+}
diff --git a/tests/util.spec.js b/tests/util.spec.js
index a1a8a1b12..e20040b5b 100644
--- a/tests/util.spec.js
+++ b/tests/util.spec.js
@@ -4,6 +4,7 @@ import {
   splitBySeparators,
   getValuePropValue,
   defaultFilterFn,
+  saveRef,
 } from '../src/util';
 
 describe('includesSeparators', () => {
@@ -94,3 +95,14 @@ describe('defaultFilterFn', () => {
     expect(defaultFilterFn.call(testerInstance, 'wrong-val', child)).toBe(false);
   });
 });
+
+describe('saveRef', () => {
+  const mock = {};
+  const saveTestRef = saveRef.bind(mock, 'testInstance');
+
+  it('adds a property with the given name to context', () => {
+    expect(mock.testInstance).toBe(undefined);
+    saveTestRef('bar');
+    expect(mock.testInstance).toBe('bar');
+  });
+});