Docusaurus: After opening the dropdown menu from nav with keyboard, it doesn't collapse back if I click anywhere else by mouse.

[mdfaizan7]

🐛 Bug Report

After opening the dropdown menu from nav with keyboard, it doesn't collapse back if I click on anywhere else by mouse

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Use the Tab key to open the dropdown menu on the nav.
2. Click on the screen outside the menu.

Expected behavior

When mouse key is pressed outside the dropdown menu, the menu should have collapsed.

Actual Behavior

The dropdown menu did not collapse and stayed opened. Even if I again clicked the menu with my mouse, it did not collapse.

Your Environment

• The bug shows up on both https://v2.docusaurus.io/docs and a locally installed Docusaurus v2
• Laptop Windows 10
• This issue was reproducible on both Firefox and Chrome.

Reproducible Demo

You can see this bug in the documentation itself.

[slorber]

thanks, definitively a bug to fix

[Ako92]

I want to Handle this problem. can you assign it to me?

[slorber]

Yes, thanks 😜

Le sam. 1 août 2020 à 18:32, Ako [e-mail] a écrit :

I want to Handle this problem. can you assign it to me?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/docusaurus/issues/3177#issuecomment-667556206,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAFW6PUPP74PRS5UP7TYQMDR6Q7QRANCNFSM4PP446NA
.

[Ako92]

I'm working on it.
What is the expected behavior? There is two options:

1. Remove the tab key press functionality on DropDown
2. Add eventListener on window to toggle className "dropdown--show" if exists!

If you have any other solution please share it with me.

[slorber]

Thanks for working on this.

I'm not very comfortable with the current code that mutates the dom directly. Would be cool to refactor this and add some proper React state.

We should be able to use the dropdown without a mouse for accessibility, so the 2nd solution looks better to me. I've used such libs successfully in the past: https://github.com/Andarist/use-onclickoutside

[Ako92]

https://github.com/facebook/docusaurus/pull/3240 Pull request Link.
This is my first pull request on open source community. If there's any problem, let me know.
Thanks

[mdfaizan7]

Thank You for the pull request @Ako92. It looks like this bug is fixed. Good Job 👍

[Ako92]

Problem Fixed and merged.
You can close this issue!