Navbar Dropdown items with a "to" tag cant be clicked on mobile

[LostAndDead]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

When using a navbar dropdown item with a "to" tag it cant be clicked on mobile

If you have a navbar item as below

        {
          type: 'dropdown',
          label: 'Extraction',
          position: 'left',
          to: '/extraction/intro',
          items: [
            {
              label: 'MTP',
              to: '/extraction/mtp',
            },
            {
              label: 'ADB',
              to: '/extraction/adb/adb_extraction',
            },
            {
              label: 'Cloud',
              to: '/extraction/cloud',
            },
          ],
        },

If you open it on desktop the "Extraction" value shows the others when hovered and can be clicked to go to "/extraction/intro" but on mobile when clicked it opens the dropdown and clicking again closes it, its impossible to go to "/extraction/intro" on a mobile device using the navbar (unless you hold on "Extraction" and copy/follow the link)

this repo contains the problem. If you want a live example you can find it here

Reproducible demo

No response

Steps to reproduce

1. Add dropdown navbar item with "to" value
2. Open page on mobile
3. Cant click on it to go to "to" value

Expected behavior

Desktop behaviour unchanged

On mobile clicking it once opens the menu, clicking again goes to the link, to close the menu click on the arrow

Actual behavior

You cant navigate to the url

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used:
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• I'd be willing to fix this bug myself.

[slorber]

I see thanks, it seems we have this issue for a few years already.

Here's a PR with a fix: #11053

Note: if we make that mobile dropdown item clickable, then this means clicking on the link would navigate to the page (as you expect) but it also closes the mobile drawer.

What I mean is that now, we don't have a way to collapse/expand the mobile dropdown anymore 😅

Does it looks good to you if we split the mobile dropdown parent into 2 clickable areas?

• Clicking the label would navigate to the page
• Clicking the arrow would expand the dropdown menu without navigating

[LostAndDead]

I think it's good if it is split into 2 clickable areas, as you have shown.

Clicking the text takes you to the page, but clicking the arrow opens the collapsible items. It more aligns with the behaviour on desktop

[slorber]

I have split the component into label/button.

Can you please let me know if this UX makes sense?

PR: #11053

Preview: https://deploy-preview-11053--docusaurus-2.netlify.app/

Do you see any UX problem to report, or can I settle into this behavior and cleanup the implementation?

[LostAndDead]

I dont see any problems with it, behaves on my phone as I would expect and desktop behaviour remains unchanged.