Merge pull request #482 from matuzalemsteles/FixDropdownAlign

Fix the align of the dropdown when expanded in ClayDropdown | Fixes #452
liferay · Jan 26, 2018 · c0c223a · c0c223a
2 parents 4e7fce6 + 32f1814
commit c0c223a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 25 deletions.
diff --git 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.
 	 */

diff --git 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
@@ -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
@@ -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>