Dropdown items of navbar doesn't work well.

[AnteeHub]

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

I create a new docusaurus project and add a dropdown item for navbar.
And I find that the dropdown items are all actived on the navbar.

Reproducible demo

https://stackblitz.com/edit/github-rgqq1d?file=docusaurus.config.js

Steps to reproduce

1. Init the project with docusaurus v2.1.0
2. keep the sidebars config type as autogenerated ( I didn't modify it)
3. Add 1 dropdown item into navbar items

navbar: {
        // ...
        items: [
           // ...
            {
                type: "dropdown",
                position: "left",
                label: "dropdown",
                items: [
                    {
                        type: "doc",
                        docId: "tutorial-extras/translate-your-site",
                        label: "dropdown 1",
                    },
                    {
                        type: "doc",
                        docId: "tutorial-extras/manage-docs-versions",
                        label: "dropdown 2",
                    },
                ],
            },
            // ...
        ],
    },

Expected behavior

There should be only 1 navbar item actived in the dropdown menu.
Like this:

Actual behavior

All of the dropdown items being actived, including the doc navbar item.
If you add 2 dropdown items, all of the items in both dropdowns are actived.

Your environment

• Public source code: https://stackblitz.com/edit/github-rgqq1d?file=docusaurus.config.js
• Public site URL: -
• Docusaurus version used: 2.1.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 105.0.5195.102, Node.js v16.14.2
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS Monterey 12.5.1

Self-service

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

[vedant-3010]

can I try working on it?

[AnteeHub]

can I try working on it?

Of course you can. And I am trying to find out what cause this at the moment...But unfortuanately I am still stuck here

[AnteeHub]

A workable solution is setting type of DropdownItems as default instead of doc, the dropdown items perform as expect.

    items: [
-        {
-            type: "doc",
-            docId: "tutorial-extras/translate-your-site",
-            label: "dropdown 1",
-        },
-        {
-            type: "doc",
-            docId: "tutorial-extras/manage-docs-versions",
-            label: "dropdown 2",
-        },

+        {
+            label: "dropdown 1",
+            to: "tutorial-extras/translate-your-site"
+        },
+        {
+            label: "dropdown 1",
+            to: "tutorial-extras/manage-docs-versions"
+        }
    ],

The document of Navbar doc link mentions:

Navbar doc link
If you want to link to a specific doc, this special navbar item type will render the link to the doc of the provided docId. It will > get the class navbar__link--active as long as you browse a doc of the same sidebar.

So I wonder that maybe it is a feature ,but I found the website of React Native was using Docusaurus v2.0.1, but the dropdown items work well. See React Native Website

Even the source code shows that they using Navbar doc link like:

    {
      label: 'Development',
      type: 'dropdown',
      position: 'right',
      items: [
        {
          label: 'Guides',
          type: 'doc',
          docId: 'getting-started',
        },
        {
          label: 'Components',
          type: 'doc',
          docId: 'components-and-apis',
        },
      ],
    }

The different between mine and theirs config is that their documents are placed in the same dictionary.

[slorber]

Hey,

This issue is duplicate of #8018 reported by @juliusmarminge and is a problem in DocNavbarItem isActive() function, not directly related to being in a dropdown.

Currently the doc item gets highlighted if any of doc of the same sidebar if browsed.

For React-Native website the issue does not happen because the 4 docs in the dropdown belong to 4 distinct sidebars, while in your case the 2 docs belong to the same sidebar. If you isolate one doc in another sidebar you'll notice the problem will disappear.

I'll review soon the pending PR (#8079) and will get this fixed