Me Sidebar: clicking a sidebar entry requires two clicks on mobile.

[worldomonation]

Quick summary

When using the mobile sized Calypso, clicking on any sidebar entry on the sidebar present in the /me endpoint requires two clicks.

Steps to reproduce

1. navigate to /me endpoint.
2. using F12, simulate a mobile device. Making the browser window narrower does not suffice.
3. click on the hamburger menu on top right.
4. click on the "My Profile" entry. A sidebar should appear.
5. click on any entry such as Privacy.

What you expected to happen

User is navigated to the selected endpoint, and the sidebar is dismissed (similar to the normal sidebar behaviour).

What actually happened

User must click twice to initiate navigation to the selected endpoint.

The video below demonstrates two things:

1. in the first half, it demonstrates how Playwright's click action does not trigger a navigation to the endpoint and dismiss the sidebar.
2. in the second half, I take over to interact directly with the browser, demonstrating that a user must click twice on the intended endpoint to trigger a navigation.

https://github.com/Automattic/wp-calypso/assets/6549265/d153451d-ef95-4ca7-8746-00c95af1ba8f

Impact

All

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

Nothing in the logs in particular.

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on /me – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• Once opening My Profile, the sidebar navigation doesn't close when I first click one of the links ('Account Settings', 'Purchases', 'Notifications Settings', etc)

📌 ACTIONS

• Assigned to Non-Urgent