Algolia search modal appears when entering a keyboard shortcut to use a browser's "Find" function

josh-wong commented 1 month ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on 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

When using Algolia search, if a user selects an anchor link (links that show # or ≡) in the search modal, the modal is displayed again when the user enters a keyboard shortcut (⌘ + F on macOS; Ctrl + F on Windows) to use the browser's "Find" function. The issue doesn't occur when selecting a link to a page without an anchor (pages with the page icon).

[!NOTE]

We are currently on Docusaurus 3.2.1 in production and want to upgrade to Docusaurus 3.4.0, which fixes #10162 that we had encountered. But we have halted upgrading for now because both 3.2.1 and 3.4.0 have different issues related to the Algolia search modal, which is why I don't have an environment for this. However, this issue can be reproduced on the latest version (3.4.0) of the Docusaurus docs site, as shown in the video below. (Sorry for the low-quality video; GitHub requires videos to be 10 MB or less.)

https://github.com/user-attachments/assets/d133fb0a-420f-48f8-a8b6-9b7ecba045c0

In addition, when the user presses ⌘ + F on macOS; Ctrl + F on Windows, an f is added to the search, which causes f to appear as a keyword that has been searched for in the Algolia dashboard.

Reproducible demo

See attached video.

Steps to reproduce

Select the Algolia search bar. When the modal opens, enter a search phrase.
Select an anchor link (# or ≡) to navigate to that page.
On that page, press ⌘ + F on macOS or Ctrl + F on Windows. The page will open the Algolia search modal instead of the browser's "Find" function and add an f to the search.
Close the modal.
Press ⌘ + F on macOS or Ctrl + F on Windows again. The page will open the browser's "Find" function as expected.

Expected behavior

After selecting an anchor link (links that show # or ≡) in the search modal, pressing ⌘ + F on macOS or Ctrl + F on Windows should display the browser's "Find" function instead of the Algolia modal.

Actual behavior

After selecting an anchor link (links that show # or ≡) in the search modal, the modal is displayed again when the user uses the browser's "Find" function (⌘ + F on macOS; Ctrl + F on Windows).

Your environment

Public source code: https://github.com/scalar-labs/docs-scalardb
Public site URL: https://scalardb.scalar-labs.com/docs/
Docusaurus version used: 3.4.0 (tested locally); 3.2.1 (production)
Environment name and version (e.g. Chrome 89, Node.js 16.4):
- Google Chrome 126.0.6478.183
- Brave 1.67.115
- Safari 17.5
- Microsoft Edge 126.0.2592.113
Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 13.6.7

Self-service

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

Josh-Cena commented 1 month ago

Hmmm, can reproduce. This looks like an Algolia bug since we don't maintain this component at all—I think.

@shortcuts any ideas?

shortcuts commented 1 month ago

Hey, I've managed to reproduce on the Docusaurus website indeed, but not on https://docsearch.algolia.com/docs/what-is-docsearch/ which is also running Docusaurus website (2.x.y older version) but in the latest DocSearch version. Since there was no changes made on DocSearch lately, I doubt there is a regression on our side.

I found an easier way to reproduce, but it seems like on the Docusaurus website, you don't have the visual feedback when a DocSearch key is pressed so I recommend trying on our other website which runs 3.4.0

Go to any page
Press any meta+key browser native shortcut e.g. cmd+f, cmd+p
Escape to close the browser native window
See the meta key remaining on pressed state in the search box (cf. image)
Try to press any key, the modal keeps opening, the meta key is trapped in an toggled state

shortcuts commented 1 month ago

Maybe this is related? https://github.com/facebook/docusaurus/commit/0ce7c1303c6b9d0158ee6b3eb56bf2017d252524

Josh-Cena commented 1 month ago

Oh! Good find. It's likely.

slorber commented 1 month ago

See the meta key remaining on pressed state in the search box (cf. image)

@shortcuts is this new? I never seen that on our own website and still don't see it now even trying hard to see the search button showing the key pressed 😅

I found an easier way to reproduce, but it seems like on the Docusaurus website, you don't have the visual feedback when a DocSearch key is pressed so I recommend trying on our other website which runs 3.4.0

Why don't we have this visual feedback? And why do you have in on your websites?

I found an easier way to reproduce

Try to press any key, the modal keeps opening, the meta key is trapped in an toggled state

I see the meta key being stuck yes

But pressing any key does not change anything to me, I don't see the algolia modal opening, and the only way for me to reproduce involves the initial repro steps (clicking on an anchor, then ctrl+f)

Maybe this is related? 0ce7c13

Probably, but I don't see anything suspicious about this code. We don't handle the meta key state ourselves as far as I know and not mounting/remounting the dialog container shouldn't lead to such a bug IMHO.

I believe it's an Algolia issue that only appeared due to our recent change. The solution @mxschmitt provided in https://github.com/facebook/docusaurus/pull/10342 works, and we could merge it today to move on, but that seems more like a workaround than the ideal proper solution. Let me know if you plan to fix it, otherwise we'll merge @mxschmitt PR.

shortcuts commented 1 month ago

@shortcuts is this new? I never seen that on our own website and still don't see it now even trying hard to see the search button showing the key pressed 😅

It wasn't there when I was still working on DocSearch, so it should be at most 1 years old cc @8bittitan @levimichael

Why don't we have this visual feedback? And why do you have in on your websites?

That's a great question, I guess keypress event listeners from both sides clashing? In any case, I think it's best for you to go with the workaround in the meantime (if possible), until the DocSearch team tackles the issue

EDIT: the feature has been added in this PR

slorber commented 1 month ago

Thanks @shortcuts , we'll merge the PR in the meantime then 👍

francoischalifour commented 1 month ago

Reviewing the code of DocSearch's useDocSearchKeyboardEvents(), I believe the issue happens because it calls your handleInput() function on the "keydown" event. Thus, if you press Ctrlf and release Ctrl before releasing f, the search input will capture the character f.

facebook / docusaurus