Berry: Website: Documentation search is somewhat broken

[mischnic]

• [ ] I'd be willing to implement a fix

Describe the bug

The search seems to work only after a "real" page load. it's broken after following a link in the header (where Gatsby does a client-side SPA-style page change)

To Reproduce

1. Go to https://yarnpkg.com/ (the doc search bar works)
2. Click on "Getting Started" in the header, typing in the search bar has no effect

[arcanis]

I suspect Gatsby rerenders the whole page between navigation, causing Algolia to be detached from the original dom element.

cc @Haroenv, does that sound coherent? Shouldn't the wrapper detect that the element disappeared, and wait for the selector to be active again?

[Haroenv]

I think this line might make it stop observing, what do you think?

https://github.com/yarnpkg/berry/blob/master/packages/gatsby/gatsby-plugin-algolia-docsearch/gatsby-ssr.js#L44

[arcanis]

Should be fixed 👍

@Haroenv yep, I fixed it here. That said, I feel like the Algolia API could be tweaked to allow for slightly more idiomatic React integration. Something like this would be nice:

const inputRef = useRef();

useDocSearch(inputRef, {
  apiKey: '...',
});

return <input ref={inputRef}/>;

At the moment it's awkward to implement in userland, because there's no way to pass a HTML element to the docsearch function (we have to use page-global selectors, so we need to set unique class names).

My 2 cents!

[Haroenv]

cc @francoischalifour, who's working on the next version of docsearch, which uses react behind the scenes, so these things would be more efficient

[francoischalifour]

@arcanis Let me know if you want to give a try at the new DocSearch beta on the Yarn website. We entirely rethought the experience and it exposes a React component. You can try it on the DocSearch website.

[arcanis]

Oh, it looks slick! For sure, if you're looking for projects to beta test, we're always open! 😊

[francoischalifour]

Nice—I'll keep you posted by next week. Feel free to DM me in the mean time if you have any questions 🙂