Prevent shared state of input value for the react library SearchBar component

Search
1

Hello,

I have a react application that features two search bars on the same page. One search bar is scoped to universal search and the other is scoped to a specific vertical via separate headless providers. For example:

const searcher1 = provideHeadless({
    apiKey: "api-1",
    experienceKey: "experience-1",
    locale: "en"
});
const searcher2 = provideHeadless({
    apiKey: "api-1",
    experienceKey: "experience-1",
    verticalKey: "specific-vertical"
    locale: "en"
});

<SearchHeadlessProvider searcher={searcher1}>
    <SearchBar />
</SearchHeadlessProvider>

<SearchHeadlessProvider searcher={searcher2}>
    <SearchBar />
</SearchHeadlessProvider>

I noticed that when I start typing in one of the search bars, the text will also show up in the second search bar, as if they are sharing input state. Is there a way to prevent this behavior?

Thanks!
DJ

2

Hey DJ,

Great question! This issue is due to you not specifying a headlessId in your 2nd provideHeadless call. Your 1st Headless instance will have the ID main by default, but you need to provide your own ID to each subsequent instance:

const searcher = provideHeadless({
  apiKey: "api-1",
  experienceKey: "experience-1",
  locale: "en",
  headlessId: "second-searcher"
});

Hope this helps!

1 Like
3

This did the trick! Thanks Aaron!