Navigation links starting with /# don't close hamburger navigation menu on mobile

[asafm7]

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

[asafm7]

I misunderstood the if logic. Only the !t.includes("#") solution will work (replacing !t.startsWith("#"))

[sabernhardt]

Thanks for the report!

This looks like the same issue as ​GB45608, which could be fixed already in the Gutenberg plugin (and in the next version of WordPress).

[asafm7]

Great!

Sorry for missing the report.

[sabernhardt]

Sometimes it is not very easy to find existing tickets or issues.

I'll close the ticket then. If there is more to do or say, the discussion can continue on GB45608 and/or a new Gutenberg issue.