[wp-trac] [WordPress Trac] #57915: Navigation links starting with /# don't close hamburger navigation menu on mobile

[WordPress Trac]

#57915: Navigation links starting with /# don't close hamburger navigation menu on
mobile
--------------------------+-----------------------------
 Reporter:  asafm7        |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Menus         |    Version:
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 This code in /wp-includes/blocks/navigation/view-modal.min.js closes the
 hamburger navigation menu when a regular bookmark link (starting with #)
 is clicked:


 {{{
 document.querySelectorAll(".wp-block-navigation-
 item__content").forEach((function(e) {
             var t, o;
             if (null === (t = e.getAttribute("href")) || void 0 === t ||
 !t.startsWith("#") || "_blank" === (null === (o = e.attributes) || void 0
 === o ? void 0 : o.target))
                 return;
             const n = e.closest(".wp-block-navigation__responsive-
 container")
               , i = null == n ? void 0 : n.getAttribute("id");
             e.addEventListener("click", (()=>{
                 i && n.classList.contains("has-modal-open") && c.close(i)
             }
             ))
         }
         ))
 }}}


 This is great, but bookmark links starting with # will only work if the
 bookmark is on the current page a simple # link won't work. A /# link
 (with a slash) will work on the other hand - it will navigate to the
 homepage, and then scroll to the section. For example: /#some-section
 (instead of #some-section)

 If the visitor is on the homepage, such a link with a / will work the same
 as a link without a / - scrolling to the section, without reloading the
 page. This makes it a perfect catch-all solution.

 But, clicking such a link (/#) won't close the hamburger navigation menu
 on mobile, as the JavaScript code above only catches links starting with #
 (and not /#). This can be easily fixed by adding another OR condition:
 ||!t.startsWith("/#") or maybe even replacing the current condition with a
 "includes" condition, to catch both cases with one condition:
 ||!t.includes("#")

 Thanks,
 Asaf

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/57915>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform