Docs link in navbar dropdowns are completely broken

ranile commented 3 years ago

🐛 Bug Report

Prerequisites

[x] 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.
[x] I have tried creating a repro with https://new.docusaurus.io
[x] I have read the console error message carefully (if applicable)

Note: This was done on a completely new project so rest are non-applicable

Description

Docs link in navbar dropdowns don't work at all.

Have you read the Contributing Guidelines on issues?

Yes.

Steps to reproduce

Use https://new.docusaurus.io to create a CodeSandbox reproducible demo of the bug.

(Write your steps here:)

Create a new site with classic template, following these steps

Update the themeConfig as follows:

themeConfig: {
  items: [
    {
      position: 'left',
      label: 'Docs',
      items: [
        {
          type: 'doc',
          docId: 'intro',
          label: 'Tutorial',
        }
      ]
    },
    {
      type: 'doc',
      docId: 'intro',
      label: 'Tutorial',
    },
    // ...
},
// ...
},

Notice how the top-level navbar link works but the dropdown one doesn't

Expected behavior

Navigate properly
No errors in conole

Actual behavior

It does not navigate to the docs page.

Screenshot:

Error from console

```js Warning: React does not recognize the `docId` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `docid` instead. If you accidentally passed it from a parent component, remove it from the DOM element. a Link@webpack-internal:///./node_modules/@docusaurus/core/lib/client/exports/Link.js:24:73 NavLink@webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/NavbarItem/DefaultNavbarItem.js:19:75 li ul div NavItemDesktop@webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/NavbarItem/DefaultNavbarItem.js:21:1287 DefaultNavbarItem@webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/NavbarItem/DefaultNavbarItem.js:22:2366 NavbarItem@webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/NavbarItem/index.js:19:363 div div nav Navbar@webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/Navbar/index.js:27:423 DocsPreferredVersionContextProviderUnsafe@webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/docsPreferredVersion/DocsPreferredVersionProvider.js:26:875 DocsPreferredVersionContextProvider@webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/docsPreferredVersion/DocsPreferredVersionProvider.js:26:488 UserPreferencesProvider@webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/UserPreferencesProvider/index.js:13:157 AnnouncementBarProvider@webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/announcementBarUtils.js:21:483 ThemeProvider@webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/ThemeProvider/index.js:13:142 LayoutProviders@webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/LayoutProviders/index.js:14:28 Layout@webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/Layout/index.js:21:83 Home@webpack-internal:///./src/pages/index.tsx:12:1142 LoadableComponent@webpack-internal:///./node_modules/@docusaurus/react-loadable/lib/index.js:1:2843 Route@webpack-internal:///./node_modules/react-router/esm/react-router.js:464:29 Switch@webpack-internal:///./node_modules/react-router/esm/react-router.js:670:29 Route@webpack-internal:///./node_modules/react-router/esm/react-router.js:464:29 PendingNavigation@webpack-internal:///./node_modules/@docusaurus/core/lib/client/PendingNavigation.js:18:180 C@webpack-internal:///./node_modules/react-router/esm/react-router.js:725:31 Root@webpack-internal:///./node_modules/@docusaurus/core/lib/client/theme-fallback/Root/index.js:18:14 App@webpack-internal:///./node_modules/@docusaurus/core/lib/client/App.js:23:94 Router@webpack-internal:///./node_modules/react-router/esm/react-router.js:93:30 BrowserRouter@webpack-internal:///./node_modules/react-router-dom/esm/react-router-dom.js:59:35 index.js:1 ```

Your environment

Docusaurus version used: 2.0.0-beta.2 (from package.json)
Environment name and version: Firefox 89.0.1, Node.js: v14.17.0
Operating system and version: Arch Linux

Reproducible demo

https://codesandbox.io/s/gifted-tree-tpiv3

Exact docusaurus.config.js, after updates (rest is same as classic template)

```js const lightCodeTheme = require('prism-react-renderer/themes/github'); const darkCodeTheme = require('prism-react-renderer/themes/dracula'); /** @type {import('@docusaurus/types').DocusaurusConfig} */ module.exports = { title: 'My Site', tagline: 'Dinosaurs are cool', url: 'https://your-docusaurus-test-site.com', baseUrl: '/', onBrokenLinks: 'throw', onBrokenMarkdownLinks: 'warn', favicon: 'img/favicon.ico', organizationName: 'facebook', // Usually your GitHub org/user name. projectName: 'docusaurus', // Usually your repo name. themeConfig: { navbar: { title: 'My Site', logo: { alt: 'My Site Logo', src: 'img/logo.svg', }, items: [ { position: 'left', label: 'Docs', items: [ { type: 'doc', docId: 'intro', label: 'Tutorial', } ] }, { type: 'doc', docId: 'intro', label: 'Tutorial', }, {to: '/blog', label: 'Blog', position: 'left'}, { href: 'https://github.com/facebook/docusaurus', label: 'GitHub', position: 'right', }, ], }, footer: { style: 'dark', links: [ { title: 'Docs', items: [ { label: 'Tutorial', to: '/docs/intro', }, ], }, { title: 'Community', items: [ { label: 'Stack Overflow', href: 'https://stackoverflow.com/questions/tagged/docusaurus', }, { label: 'Discord', href: 'https://discordapp.com/invite/docusaurus', }, { label: 'Twitter', href: 'https://twitter.com/docusaurus', }, ], }, { title: 'More', items: [ { label: 'Blog', to: '/blog', }, { label: 'GitHub', href: 'https://github.com/facebook/docusaurus', }, ], }, ], copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, }, prism: { theme: lightCodeTheme, darkTheme: darkCodeTheme, }, }, presets: [ [ '@docusaurus/preset-classic', { docs: { sidebarPath: require.resolve('./sidebars.js'), // Please change this to your repo. editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/', }, blog: { showReadingTime: true, // Please change this to your repo. editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/blog/', }, theme: { customCss: require.resolve('./src/css/custom.css'), }, }, ], ], }; ```

Additional Context

Discord Discussion: https://discord.com/channels/398180168688074762/398180168688074765/858716139394826240

Josh-Cena commented 3 years ago

The cause is this:

https://github.com/facebook/docusaurus/blob/3fe7389ee2989dca713d20a82bc26f7e91254377/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx#L135-L159

The Navbar dropdown treats the child items as NavLink instead of as NavbarItem recursively.

I'd like to take this issue since I've been recently working on a refactor of the NavbarItem codebase by making them more elegantly polymorphic 👀

slorber commented 3 years ago

items: [
            {
              type: 'doc',
              docId: 'intro',
              label: 'Tutorial',
            }
          ]

We don't support type doc inside a navbar dropdown yet. Closing: duplicate of feature request https://github.com/facebook/docusaurus/issues/4996

The Navbar dropdown treats the child items as NavLink instead of as NavbarItem recursively.

@Josh-Cena I'd be happy to improve but keep in mind that showing a dropdown inside a dropdown does not really make sense: only "simple items" should be nested.

Our current validation is not very good regarding navbar item elements, would like to improve that

facebook / docusaurus