Add data test active to active navigation item (#140)

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

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';

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",