fix: dismiss nav dropdown on anchor click (#426)

hashicorp · Nov 16, 2021 · 7a04f76 · 7a04f76 · vercel · Nov 16, 2021
1 parent 7861e6a
commit 7a04f76
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/cuddly-impalas-grin.md b/.changeset/cuddly-impalas-grin.md
@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-subnav': minor
+---
+
+Automatically dismiss open navigation dropdown menus when the user clicks on an anchor element.
diff --git a/packages/subnav/partials/MenuItemsDefault/index.js b/packages/subnav/partials/MenuItemsDefault/index.js
@@ -84,7 +84,13 @@ class NavLinkWithDropdown extends React.Component {
     //  If we're not collapsed, and the click is outside the component,
     //  we should ensure that the modal closes
     const isClickOutside = !this.parentRef.current.contains(event.target)
-    if (isClickOutside) this.setState({ isCollapsed: true })
+    //  If we're not collapsed, and the click is on an anchor element with an
+    //  href attribute, we're likely performing a navigation, and should ensure
+    //  that the modal closes
+    const isClickNavigation = event.target.tagName === 'A' && event.target.href
+    if (isClickOutside || isClickNavigation) {
+      this.setState({ isCollapsed: true })
+    }
   }
 
   componentDidMount() {