realign popup menu to target after DOM updated

package.json

@@ -53,6 +53,7 @@
   "dependencies": {
     "classnames": "2.x",
     "component-classes": "1.x",
+    "dom-align": "1.x",
     "dom-scroll-into-view": "1.x",
     "rc-animate": "2.x",
     "rc-menu": "4.x",

src/Select.jsx

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import { KeyCode } from 'rc-util';
 import classnames from 'classnames';
+import domAlign from 'dom-align';
 import OptGroup from './OptGroup';
 import Animate from 'rc-animate';
 import classes from 'component-classes';
@@ -134,6 +135,14 @@ const Select = React.createClass({
       } else {
         inputNode.style.width = '';
       }
+      if (props.choiceTransitionName) {
+        // wait animation completed
+        setTimeout(() => {
+          this.alignPopupMenu();
+        }, 400);
+      } else {
+        this.alignPopupMenu();
+      }
     }
   },
 
@@ -339,6 +348,14 @@ const Select = React.createClass({
     }
   },
 
+  getPopupMenuAlign() {
+    const selectTrigger = this.refs.trigger;
+    const trigger = selectTrigger.refs.trigger;
+    const builtinPlacements = trigger.props.builtinPlacements;
+    const popupPlacement = trigger.props.popupPlacement;
+    return { ...builtinPlacements[popupPlacement] };
+  },
+
   getLabelBySingleValue(children, value) {
     if (value === undefined) {
       return null;
@@ -470,12 +487,14 @@ const Select = React.createClass({
       }
     });
   },
+
   clearBlurTime() {
     if (this.blurTimer) {
       clearTimeout(this.blurTimer);
       this.blurTimer = null;
     }
   },
+
   updateFocusClassName() {
     const { refs, props } = this;
     // avoid setState and its side effect
@@ -520,6 +539,14 @@ const Select = React.createClass({
     return value;
   },
 
+  alignPopupMenu() {
+    const popupMenu = this.refs.trigger.popupMenu;
+    const source = ReactDOM.findDOMNode(popupMenu).parentNode;
+    const target = this.refs.selection;
+    const popupMenuAlign = this.getPopupMenuAlign();
+    domAlign(source, target, popupMenuAlign);
+  },
+
   removeSelected(selectedKey) {
     const props = this.props;
     if (props.disabled) {