facebook / facebook/docusaurus

DocCardList element renders the wrong items

Open
#10,475 1 comment 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [X] I'm using the latest version of Docusaurus.
- [X] I have tried the `npm run clear` or `yarn clear` command.
- [X] 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).

### Description

I have run into a bug where the DocCardList element renders the wrong items when linking to an category index with a DocCardList element.

Using the tutorial example from https://docusaurus.new/codesandbox, I create a new sidebar:
```
const sidebars = {
tutorialSidebar: [
"intro",
{
type: "category",
label: "Tutorial - basics",
items: [
"tutorial-basics/create-a-page",
"tutorial-basics/create-a-document",
"tutorial-basics/create-a-page",
{
type: "link",
label: "Manage Docs Versions →",
href: "/docs/tutorial-extras/",
},
],
},
{
type: "category",
label: "Tutorial-Extras",
link: {
type: "doc",
id: "tutorial-extras/index",
},
items: [
"tutorial-extras/manage-docs-versions",
"tutorial-extras/translate-your-site",
],
},
],
};
```

New index page for tutorials-extras looks like this (backticks changed to single-quotes so formatting works here):
```
# Tutorial Extras

'''mdx-code-block
import DocCardList from '@theme/DocCardList';

'''
```
Note the new index page for tutorial-extras and the new link element in the tutorial-basics section sending you to the tutorial-extras/index page.

When clicking on the link to tutorial-extras the navigation sends you to the correct index page but the DocCardList is populated by elements from the tutorial-basics category and not the tutorial-extras category. This happens even when clicking directly on the Tutorial - Extras sidebar element.

There is a separate, related issue where the link element in the sidebar is prioritized in terms of focus, but I'll make a new issue for that.

### Reproducible demo

https://codesandbox.io/p/devbox/brave-allen-d39ddg?workspaceId=971447fd-9df5-4a54-a72d-33087efcd2fa

### Steps to reproduce

1. click on tutorial section
2. click on `tutorials - extras` in sidebar. See that the populated list of elements is incorrect
or
2. click on `tutorials - basics` in the sidebar, then click on `Tutorial Extras →` sub-item. See that the populated list of elements is incorrect.

### Expected behavior

Cards should populate from the category where the `doc` element exists and not from the `link` element.

### Actual behavior

Cards populate from the `link` element. Or maybe just from the first instance where the link occurs?

### Your environment

occurs in sandbox and also in my local environment.
- Public source code:
- Public site URL:
- Docusaurus version used: 3.5.2
- Environment name and version (e.g. Chrome 89, Node.js 16.4): I am using Firefox 129.0.2 and node v21.7.0
- Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11 Home 23H2 with WSL2 - Ubuntu 20.04.6 LTS

### Self-service

- [ ] I'd be willing to fix this bug myself.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.