From 8c8f9c1534141362ec9ca1ef123183e0b183d4af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= <matuzalemteles@gmail.com>
Date: Wed, 18 Apr 2018 18:22:34 -0300
Subject: [PATCH] Replace the use of querySelector in favor of this.refs in
 ClayNavigationBar | Fixes #812

---
 .../clay-navigation-bar/src/ClayNavigationBar.js    | 13 ++++---------
 .../clay-navigation-bar/src/ClayNavigationBar.soy   |  2 +-
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/clay-navigation-bar/src/ClayNavigationBar.js b/packages/clay-navigation-bar/src/ClayNavigationBar.js
index c97436fed8..0740a3a70c 100644
--- 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,8 +69,7 @@ class ClayNavigationBar extends Component {
 	 * @private
 	 */
 	_removeCollapseHeight() {
-		const elementCollapse = this.element.querySelector('.navbar-collapse');
-		elementCollapse.style.removeProperty('height');
+		this.refs.content.style.removeProperty('height');
 	}
 
 	/**
@@ -79,14 +77,11 @@ class ClayNavigationBar extends Component {
 	 * @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
index c8344c352b..1b99bd6c1f 100644
--- 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}