Closed josh-wong closed 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?
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
meta
key remaining on pressed state in the search box (cf. image)Maybe this is related? https://github.com/facebook/docusaurus/commit/0ce7c1303c6b9d0158ee6b3eb56bf2017d252524
Oh! Good find. It's likely.
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 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
Thanks @shortcuts , we'll merge the PR in the meantime then 👍
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.
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clear
oryarn clear
command.rm -rf node_modules yarn.lock package-lock.json
and re-installing packages.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).https://github.com/user-attachments/assets/d133fb0a-420f-48f8-a8b6-9b7ecba045c0
In addition, when the user presses
⌘ + F
on macOS;Ctrl + F
on Windows, anf
is added to the search, which causesf
to appear as a keyword that has been searched for in the Algolia dashboard.Reproducible demo
See attached video.
Steps to reproduce
#
or≡
) to navigate to that page.⌘ + F
on macOS orCtrl + F
on Windows. The page will open the Algolia search modal instead of the browser's "Find" function and add anf
to the search.⌘ + F
on macOS orCtrl + 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 orCtrl + 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
Self-service