[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:  Themes        |     Version:
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:  javascript
--------------------------+------------------------------
Changes (by sabernhardt):

 * focuses:   => javascript
 * component:  Menus => Themes


Old description:

> 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

New description:

 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

--

Comment:

 Thanks for the report!

 This looks like the same issue as
 [https://github.com/WordPress/gutenberg/issues/45608 GB45608], which could
 be fixed already in the Gutenberg plugin (and in the next version of
 WordPress).

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