Merge pull request #417 from torchbox/feature/sub-menu-behaviour-tweaks

More reliably close the menu when focus moves away from the last item

Author: helenb

tbx/project_styleguide/templates/patterns/navigation/components/includes/subnav-child-menu.html

@@ -13,7 +13,7 @@
             </li>
         {% endfor %}
         {% if child.value.section_link %}
-            <li class="sub-nav-desktop__item" {% if forloop.last %}data-last-menu-item-desktop{% endif %}>
+            <li class="sub-nav-desktop__item">
                 <a href="{{ child.value.section_link.url }}" class="sub-nav-desktop__link sub-nav-desktop__link--no-description">
                     <span class="sub-nav-desktop__link-text">{% firstof child.value.section_link_text child.value.section_link %}</span><span class="sub-nav-desktop__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-desktop__arrow" %}</span>
                 </a>

tbx/static_src/javascript/components/desktop-sub-menu.js

@@ -15,9 +15,8 @@ class DesktopSubMenu {
             '[data-desktop-menu] [data-has-subnav]',
         );
         this.activeClass = 'active';
-        this.lastMenuItems = document.querySelectorAll(
-            '[data-last-menu-item-desktop]',
-        );
+        this.lastMenuItems = this.toggleNode.querySelectorAll('a');
+        this.lastMenuItem = this.lastMenuItems[this.lastMenuItems.length - 1];
         this.bindEventListeners();
     }
 
@@ -64,10 +63,8 @@ class DesktopSubMenu {
         });
 
         // Close the desktop menu when the focus moves away from the last item
-        this.lastMenuItems.forEach((item) => {
-            item.addEventListener('focusout', () => {
-                this.close();
-            });
+        this.lastMenuItem.addEventListener('focusout', () => {
+            this.close();
         });
     }
 }