MENU button does not work, second time page load on mobile devices

[mayelaatf]

Hi,
I hope you can provide some light to an issue I am having with the MENU button on mobile device.

Here is how I am using the USWDS :
Code base is in Drupal 9
Site has a primary and secondary navigation
Site uses uswds_base theme as base theme
Site is using USWDS 3.0.0

First time I navigate the site for the in a mobile device ( iphone / portrait orientation ), I click the MENU button ( at the top right of the screen ) and a tab opens and shows the primary/secondary nav as expected.
If I refresh the page and click again the MENU button nothing happen... and the footer secondary accordion menu tabs are messed up. ( all tabs are open )

It looks to me that there is a JS that gets unset when I reload the page. I do not know exactly how to debug this and I am wondering if you guys can provide some light on how to solve this issue.

I appreciate in advance any help on this,

Thanks,

Mayela

[mejiaj]

@mayelaatf can you provide a link to the site so we can take a look?

[mejiaj]

Okay, thanks for providing this information. We'll look into it!

[mayelaatf]

An update here:
The previous workaround I posted before, does not work on real mobile devices. It worked only when using the chrome mobile simulator.
I found that by removing this:
t.nextElementSibling.setAttribute("id",e) from the uswds.min.js file fixes the issue, accordion tabs ( menu in the footer ) behave as expected and that the secondary menu button ( top right ) opens/closes as expected on mobile devices

[mejiaj]

@mayelaatf can you reproduce it in this component example - https://federalist-3b6ba08e-0df4-44c9-ac73-6fc193b0e19c.app.cloud.gov/preview/uswds/uswds/develop/iframe.html?args=&id=components-header--default&viewMode=story?

I've checked in both browser in responsive mode and android device with Chrome:

• Website - https://designsystem.digital.gov/
• Header component preview - https://federalist-3b6ba08e-0df4-44c9-ac73-6fc193b0e19c.app.cloud.gov/preview/uswds/uswds/develop/iframe.html?id=components-header--default&args=&viewMode=story

[mayelaatf]

@mejiaj , I visited all the links you provided here. I tested the MENU button and it works as expected.
Please note :

1. My code has two menus :
   Primary menu : the one displays when clicking on the MENU btn (mobile)
   Secondary menu : Included in the footer and it is displayed as an accordion tabs in the footer (mobile)
2. I am using Drupal 9 / uswds_base theme / USWDS 3.0.0

[mejiaj]

@mayelaatf let's move the conversation to the issue so we can more accurately track.