From ba47cf4587c3279888ff9455b8a9cf67fc7e488e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= <matuzalemteles@gmail.com>
Date: Fri, 26 Jan 2018 15:05:06 -0300
Subject: [PATCH 1/2] Fix the align of the dropdown when expanded in
 ClayDropdown | Fixes #452

---
 .../clay-dropdown/src/ClayDropdownBase.js     | 51 +++++++++++--------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/packages/clay-dropdown/src/ClayDropdownBase.js b/packages/clay-dropdown/src/ClayDropdownBase.js
index 982a9729fc..a41f669afa 100644
--- a/packages/clay-dropdown/src/ClayDropdownBase.js
+++ b/packages/clay-dropdown/src/ClayDropdownBase.js
@@ -18,6 +18,13 @@ import templates from './ClayDropdownBase.soy.js';
  * Implementation of the base for Metal Clay Dropdown.
  */
 class ClayDropdownBase extends Component {
+	/**
+	 * @inheritDoc
+	 */
+	attached() {
+		this.refs.portal.on('rendered', this.handleRenderedPortal_.bind(this));
+	}
+
 	/**
 	 * @inheritDoc
 	 */
@@ -85,6 +92,28 @@ class ClayDropdownBase extends Component {
 		this.emit('itemClicked', event);
 	}
 
+	/**
+	 * Handle when the lifecycle `rendered` is called in ClayPortal.
+	 * @protected
+	 */
+	handleRenderedPortal_() {
+		if (this.expanded && this.alignElementSelector_) {
+			// eslint-disable-next-line
+			let alignElement = this.element.querySelector(
+				this.alignElementSelector_
+			);
+			if (alignElement) {
+				let bodyElement = this.refs.portal.refs.menu;
+
+				this.alignedPosition_ = Align.align(
+					bodyElement,
+					alignElement,
+					Align.BottomLeft
+				);
+			}
+		}
+	}
+
 	/**
 	 * Handles Search in Dropdown.
 	 * @param {!Event} event
@@ -132,28 +161,6 @@ class ClayDropdownBase extends Component {
 		});
 	}
 
-	/**
-	 * Synchronization logic for `expanded` state.
-	 * @param {boolean} expanded
-	 */
-	syncExpanded(expanded) {
-		if (expanded && this.alignElementSelector_) {
-			// eslint-disable-next-line
-			let alignElement = this.element.querySelector(
-				this.alignElementSelector_
-			);
-			if (alignElement) {
-				let bodyElement = this.refs.portal.refs.menu;
-
-				this.alignedPosition_ = Align.align(
-					bodyElement,
-					alignElement,
-					Align.BottomLeft
-				);
-			}
-		}
-	}
-
 	/**
 	 * Toggles the dropdown, closing it when open or opening it when closed.
 	 */

From 32f1814080f473454e72a1b59e8c27a4af550382 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= <matuzalemteles@gmail.com>
Date: Fri, 26 Jan 2018 15:26:56 -0300
Subject: [PATCH 2/2] Regen snapshosts | Fixes #452

---
 .../src/__tests__/__snapshots__/ClayActionsDropdown.js.snap     | 2 +-
 .../src/__tests__/__snapshots__/ClayDropdown.js.snap            | 2 +-
 .../src/__tests__/__snapshots__/ClayDropdownBase.js.snap        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayActionsDropdown.js.snap b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayActionsDropdown.js.snap
index ade480642c..3d0943ed7c 100644
--- a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayActionsDropdown.js.snap
+++ b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayActionsDropdown.js.snap
@@ -162,7 +162,7 @@ exports[`ClayActionsDropdown should render an expanded action dropdown 1`] = `
     </svg>
   </button>
 </div>
-<div class="dropdown-menu show" ref="menu" style="top: 0px; left: 0px;">
+<div class="dropdown-menu show" ref="menu">
   <ul class="list-unstyled">
     <li>
       <a class=" dropdown-item" href="#1">Edit</a>
diff --git a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap
index 3be833f3f8..6278fa31d8 100644
--- a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap
+++ b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap
@@ -677,7 +677,7 @@ exports[`ClayDropdown should render an expanded dropdown 1`] = `
     </svg>
   </button>
 </div>
-<div class="dropdown-menu show" ref="menu" style="top: 0px; left: 0px;">
+<div class="dropdown-menu show" ref="menu">
   <ul class="list-unstyled">
     <li>
       <a class=" dropdown-item" href="item1url">Item 1</a>
diff --git a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdownBase.js.snap b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdownBase.js.snap
index f09d011671..459ba6094a 100644
--- a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdownBase.js.snap
+++ b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdownBase.js.snap
@@ -4,7 +4,7 @@ exports[`ClayDropdownBase should close dropdown 1`] = `
 <div class="dropdown">
   <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">Trigger</button>
 </div>
-<div class="dropdown-menu" ref="menu" style="top: 0px; left: 0px;">
+<div class="dropdown-menu" ref="menu">
   <ul class="list-unstyled">
     <li>
       <a class=" dropdown-item" href="item1url">Item 1</a>