DocSearch v4 modal re-opens on every keystroke after using using `cmd+k` + `'esc`

[slorber]

Description

When opening the DocSearch v4 modal with cmd+k, and then closing it with 'esc, the modal will always re-open on every keystroke

It doesn't seem to happen when closing the modal by clicking the transparent overlay, but it also seems to happen if I click the modal "x" button or press 'esc'.

It also happens if we close the modal by clicking a search hit, but it doesn't happen if we use keyboard navigation and select the search hit by pressing enter.

Docusaurus bug reported: facebook/docusaurus#11572

Steps to reproduce

This reproduces on a minimal DocSearch v4 repro I created for another issue: #2804

• code: slorber/docsearch-v4-button-style-bug-repro
• runnable playground: stackblitz.com/~/github.com/slorber/docsearch-v4-button-style-bug-repro

This reproduces on the playground: https://community.algolia.com/docsearch-playground/

This reproduces on the DocSearch + Docusaurus docs websites

Expected behavior

After closing the DocSearch modal, random keyboard presses shouldn't re-open the modal

Environment

    "@docsearch/react": "^4.3.2",

[mguida22]

I've started on a fix in #2810, but I need to figure out testing. I'm not familiar with this codebase so any help is welcome 😄

[8bittitan]

Ahhh, I believe this is due to the <DocSearch> provider from the new @docsearch/core package not getting unmounted (which is expected). But this then causes the unmount functionality of the useEffect in packages/docsearch-core/src/useDocSearchKeyboardEvents.ts to never clean up the keydown event listener.

It's due to us focusing the search button when closing the modal for some reason, I truthfully don't remember why we added it. I think it was for accessibility for refocusing the last interacted element when closing a dialog?

But then we have a listener that will trigger the onInput for if the search button is the focused element, and any [a-zA-Z0-9] key is pressed, it will open the modal with that key pre-populated in the search bar.

I think we should just do away with the onInput check as it's not very clear that it's even an interaction that can take place. Interested to hear any opinions on it!

[8bittitan]

@slorber I have a PR opened to address this issue.

[8bittitan]

Will be fixed in v4.4

[slorber]

I can still reproduce the error after upgrading to v4.4 here: facebook/docusaurus#11626

Deploy preview: https://deploy-preview-11626--docusaurus-2.netlify.app/

Closing the modal with "esc" will always reopen it on any keystroke

[8bittitan]

Sorry @slorber I did not see your reply, was AFK for holidays. Will take a deeper look into it!