Docusaurus bug when opening submenus in the left nav-bar menu

[danieldrbarros]

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

We are using docusaurus for a long time, but lately we are receiving feedback from our Docs website that some menus are not properly opening.

we have a structure like this example

Menu 1
|
|
|-- Submenu 1
| |
| - Submenu 1.1
| |
| - Link 1.1.1
| |
| - Link 1.1.2
| |
| - Link 1.1.3
|
|-- Submenu 2
|
- Submenu 2.1
|
- Link 2.1.1
|
- Link 2.1.2
|
- Link 2.1.3

When someone tries to open submenu 2.1, for example, it does not expand, but if I try to reach the link 2.1.1 typing the appropriate link, it is reachable. If I hardtype the link for this link 2.1.1 (for example) when the page loads, it shows the submenu 2.1 expanded normally.

Error docusaurus website

We tried with the same chrome versions between different computers, and it seems that we are getting different responses for this bug.

It seems that we have some bug on the JS that is creating the classes for this nav-bars. Has anyone experienced this bug before and know how to solve this issue?

What I tried:

hardcode the css file with height: auto !important so the container that contains the nav-bar could adjust automatically its height.

R- The menu opened and showed all link options below it, but it was not collapsing back again.
Tried to find which script was creating and addressing the classes.

R- I couldn`t find it

To reproduce:

We got a live example of this bug here: https://learn.genesis.global/docs/web/ -> Left menu "Design Systems" -> "Tokens". Some people manage to expand the menu "Tokens", but others don't.

Reproducible demo

https://github.com/genesiscommunitysuccess/docs

Steps to reproduce

1. Clone the repo locally.
2. In the project path you just cloned, install all the dependencies running npm i
3. Run the app locally: npm run start
4. Go to the top menu Web -> Left menu "Design Systems" -> "Tokens".

Expected behavior

You should be able to expand the menu "Tokens" and see its options: "Colour", "Typography", "Sizing", and "Miscellaneous".

Actual behavior

Some people manage to expand the menu "Tokens", but others don't :( .

Your environment

• Public source code: https://github.com/genesiscommunitysuccess/docs
• Public site URL: https://learn.genesis.global/docs/web/
• Docusaurus version used: 2.4.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 112
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 10

Self-service

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

[slorber]

Looks related to prefers-reduced-motion nested collapsible bug, see #8906

Will try to release 2.4.1 soon because it affects more and more users and we see many bug reports

[danieldrbarros]

@slorber , sorry to ask again, but is there any ETA for release 2.4.1? Thanks!

[slorber]

@dbarros1979 2.4.1 is out!

https://twitter.com/docusaurus/status/1658106844970188804