Replace the use of querySelector in favor of this.refs in ClayNavigat…

…ionBar | Fixes liferay#812
mateomustapic · Apr 18, 2018 · 8c8f9c1 · 8c8f9c1
1 parent ae698da
commit 8c8f9c1
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 10 deletions.
diff --git a/packages/clay-navigation-bar/src/ClayNavigationBar.js b/packages/clay-navigation-bar/src/ClayNavigationBar.js
@@ -21,7 +21,6 @@ class ClayNavigationBar extends Component {
 	/**
 	 * @inheritDoc
 	 */
-	// eslint-disable-next-line
 	sync_isTransitioning() {
 		if (this._isTransitioning && !this._visible) {
 			this._setCollapseHeight();
@@ -50,7 +49,7 @@ class ClayNavigationBar extends Component {
 	 * @private
 	 */
 	_handleTransitionEnd(event) {
-		const element = this.element.querySelector('.navbar-collapse');
+		const element = this.refs.content;
 		if (
 			element == event.target &&
 			this._isTransitioning &&
@@ -70,23 +69,19 @@ class ClayNavigationBar extends Component {
 	 * @private
 	 */
 	_removeCollapseHeight() {
-		const elementCollapse = this.element.querySelector('.navbar-collapse');
-		elementCollapse.style.removeProperty('height');
+		this.refs.content.style.removeProperty('height');
 	}
 
 	/**
 	 * Sets the height css property on `.navbar-collapse`
 	 * @private
 	 */
 	_setCollapseHeight() {
-		const elementCollapse = this.element.querySelector('.navbar-collapse');
-		const heightCollapse = elementCollapse.querySelector(
-			'.container-fluid'
-		).clientHeight;
+		const elementCollapse = this.refs.content;
 
 		elementCollapse.setAttribute(
 			'style',
-			`height: ${heightCollapse}px`
+			`height: ${elementCollapse.children[0].clientHeight}px`
 		)
 	}
 }

diff --git a/packages/clay-navigation-bar/src/ClayNavigationBar.soy b/packages/clay-navigation-bar/src/ClayNavigationBar.soy
@@ -82,7 +82,7 @@
 		{/if}
 	{/let}
 
-	<div class="{$classes}">
+	<div class="{$classes}" ref="content">
 		<div class="container-fluid container-fluid-max-xl">
 			{if $items}
 				{call .navmenu}