Close menu dropdown on scroll offset update (#13310)

* Close menu dropdown on scroll offset update * Remove logs * Keep the dropdown visible while scrolling * Add early return to mitigate potential runtime errors
MozillaFoundation · Dec 17, 2024 · 51f9b64 · 51f9b64
1 parent 455a6d3
commit 51f9b64
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html b/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html
@@ -1,6 +1,6 @@
 {% load static wagtailcore_tags wagtailadmin_tags nav_tags %}
 
-{% fragment as content_base_styles %}tw-overflow-y-auto tw-transition-all tw-duration-500 tw-bg-white xlarge:tw-bg-transparent xlarge:tw-max-w-[1200px]{% endfragment %}
+{% fragment as content_base_styles %}tw-overflow-y-auto tw-transition-all tw-duration-500 tw-bg-white xlarge:tw-bg-transparent xlarge:tw-max-w-[1200px] xlarge:tw-transition-none xlarge:tw-duration-0{% endfragment %}
 {% fragment as dropdown_selector_base %}tw-container tw-flex tw-flex-row tw-items-center tw-justify-between tw-w-full tw-gap-4{% endfragment %}
 
 {% fragment as content_desktop %}xlarge:tw-px-0 xlarge:tw-hidden{% endfragment %}

diff --git a/source/js/components/nav/desktop-dropdown.js b/source/js/components/nav/desktop-dropdown.js
@@ -79,6 +79,8 @@ class NavDesktopDropdown extends Accordion {
         sibling.classList.remove("tw-highlighted");
       }
     });
+
+    document.addEventListener("scroll", this.handleScroll);
   }
 
   closeSiblings() {
@@ -115,7 +117,25 @@ class NavDesktopDropdown extends Accordion {
 
     this.closeAccordion(this.accordion, this.titleButton, this.content);
     this.closeSiblings();
+
+    document.removeEventListener("scroll", this.handleScroll);
   }
+
+  scrollListener() {
+    const wideScreenMenuContainer = document.querySelector(".wide-screen-menu-container");
+    if (!wideScreenMenuContainer) {
+      return;
+    }
+    const newTopOffset = wideScreenMenuContainer.getBoundingClientRect().bottom;
+    const currentTopOffset = parseFloat(
+      this.content.style.top.replace("px", "")
+    );
+    if (currentTopOffset !== newTopOffset) {
+      this.content.style.top = `${newTopOffset}px`;
+    }
+  }
+
+  handleScroll = this.scrollListener.bind(this);
 }
 
 export default NavDesktopDropdown;