Update navigation state correctly on click

Author: bluewave41

media/js/cms/flare-navigation.es6.js

@@ -81,18 +81,14 @@ import Headroom from 'headroom.js';
 
     // keyboard is being used
     menuTitles.forEach(function (title) {
-        // when focusing a menu title, close all menus
-        title.addEventListener('focus', function () {
-            menuCategories.forEach(function (category) {
-                category.classList.remove('is-active');
-            });
-        });
-
-        // when leaving the last link of a menu, close all menus
         const menuLinks = title
             .closest('.fl-menu-category')
             .querySelectorAll('a');
 
+        // focus events are no good here as we mix in a click handler below
+        // which is also triggered after our focus would run
+
+        // when leaving the last link of a menu, close all menus
         menuLinks[menuLinks.length - 1].addEventListener(
             'keydown',
             function (event) {
@@ -104,6 +100,15 @@ import Headroom from 'headroom.js';
             }
         );
 
+        // when leaving the first link of a menu, close all menus
+        menuLinks[0].addEventListener('keydown', function (event) {
+            if (event.key === 'Tab' && event.shiftKey) {
+                menuCategories.forEach(function (category) {
+                    category.classList.remove('is-active');
+                });
+            }
+        });
+
         // when clicking or pressing enter, toggle the menu
         title.addEventListener('click', function (event) {
             event.preventDefault();