From c74a0f8fd47d9fd95f4c45471801cd375f6a5963 Mon Sep 17 00:00:00 2001
From: Leon Shi <superRaytin@gmail.com>
Date: Wed, 25 May 2016 19:50:18 +0800
Subject: [PATCH] realign popup menu to target after DOM updated

---
 package.json   |  1 +
 src/Select.jsx | 28 ++++++++++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/package.json b/package.json
index ef6194700..15e89ca5d 100644
--- a/package.json
+++ b/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",
diff --git a/src/Select.jsx b/src/Select.jsx
index f355f2b68..2103cd243 100644
--- a/src/Select.jsx
+++ b/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,15 @@ const Select = React.createClass({
       } else {
         inputNode.style.width = '';
       }
+      // fix for https://github.com/ant-design/ant-design/issues/1827
+      if (props.choiceTransitionName) {
+        // wait animation completed
+        setTimeout(() => {
+          this.alignPopupMenu();
+        }, 400);
+      } else {
+        this.alignPopupMenu();
+      }
     }
   },
 
@@ -339,6 +349,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 +488,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 +540,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) {