From 4886ac14d56851a314206df0c318d88eee4d7cce Mon Sep 17 00:00:00 2001
From: Patricio Beltran <pbelsal@gmail.com>
Date: Tue, 12 Nov 2019 11:59:58 -0800
Subject: [PATCH] Add data test active to active navigation item (#140)

---
 CHANGELOG.md                             |  4 ++++
 lib/components/Navigation/Navigation.tsx | 13 +++++++++++--
 package-lock.json                        |  2 +-
 package.json                             |  2 +-
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 462e0bd..19b986e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 7.0.6
+### Changed
+- Added data-test-active to active navigation item
+
 ## 7.0.5
 ### Fixed
 - Fixed height of navigation scrollable container
diff --git a/lib/components/Navigation/Navigation.tsx b/lib/components/Navigation/Navigation.tsx
index 636c8d6..cfdc35a 100644
--- a/lib/components/Navigation/Navigation.tsx
+++ b/lib/components/Navigation/Navigation.tsx
@@ -33,8 +33,17 @@ export function Navigation({ isExpanded, onClick, attr, children, farBottomChild
         const items = topNavItemsContainer.current.getElementsByClassName('global-nav-item');
 
         if (items && items.length > 0) {
-            const activeItemIndex = Array.prototype.findIndex.call(items, 
-                (i: HTMLDivElement) => i.className.includes('global-nav-item-active'));
+            let activeItemIndex = -1;
+            for (let i = 0; i < items.length; i++) {
+                const item = items[i];
+                // Only take the first active link as active and set everything else to not active
+                if (item.className.includes('global-nav-item-active') && activeItemIndex === -1) {
+                    activeItemIndex = i;
+                    item.setAttribute('data-active', 'true');
+                } else {
+                    item.removeAttribute('data-active');
+                }
+            }
 
             if (activeItemIndex > -1) {
                 selectedBorderRef.current.style.display = 'block';
diff --git a/package-lock.json b/package-lock.json
index 6181b9a..62ef52d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "7.0.5",
+    "version": "7.0.6",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
diff --git a/package.json b/package.json
index feaad2e..ffdf4e1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "7.0.5",
+    "version": "7.0.6",
     "description": "Azure IoT UX Fluent Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",