[wp-trac] [WordPress Trac] #53976: Twenty Twenty-One: Anchor link on the same page causes the menu button icon to turn upside down

[WordPress Trac]

#53976: Twenty Twenty-One: Anchor link on the same page causes the menu button icon
to turn upside down
---------------------------+-----------------------------
 Reporter:  joelbermudez   |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:
 Severity:  normal         |   Keywords:  has-patch
  Focuses:  javascript     |
---------------------------+-----------------------------
 As reported and requested in [https://wordpress.org/support/topic/menu-
 button-auto-scrolls-to-top-when-pressed-scroll-to-top-change-button-
 icon/].

 If you have an anchor link on the same page, the icon turs upside down.
 Example. In website.com/one/ if you add a link to website.com/one/#anchor,
 this will cause the issue. An example will be a scroll to top button as in
 the report mentioned.

 Video showing (the bug report is for the second option. The first one was
 solved too in the report, but may not be the best solution, and, as the
 theme is not prepared to have a fixed header, and the problem is that when
 clicking the menu button, it automatically scrolls to the top, may not be
 relevant, but you can check on the report mentioned at first).

 In the video you can see in 0:09 when I click "ARRIBA", that is a scroll
 to top in casael.com using casael.com/#inicio

 [https://youtu.be/zW7R58KM_BA]

 Problem is in primary-navigation.js


 {{{
 document.addEventListener( 'click', function( event ) {
             // If target onclick is <a> with # within the href attribute
             if ( event.target.hash && event.target.hash.includes( '#' ) )
 {
                 wrapper.classList.remove( id + '-navigation-open', 'lock-
 scrolling' );
                 twentytwentyoneToggleAriaExpanded( mobileButton );
                 // Wait 550 and scroll to the anchor.
                 setTimeout(function () {
                     var anchor =
 document.getElementById(event.target.hash.slice(1));
                     anchor.scrollIntoView();
                 }, 550);
             }
         }
 }}}

 Possible Solution:

 Change

 {{{
 document.addEventListener( 'click', function( event ) {
 }}}

 to

 {{{
 document.querySelector('.primary-menu-container').addEventListener(
 'click', function( event ) {
 }}}

 The function was being activated all the time, and that function should
 only work when the mobile menu is open. Now, you can use #anchors to move
 on the same page off the menu without “glitching” the menu icon.

 That change is tested and working without any problems.

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