Using Autocomplete with react-instantsearch-dom HOCs

I’m currently trying to implement a search field using react-instantsearch-dom and chakra-autocomplete. I seem to be hitting a wall when rendering the AutoCompleteList. I believe the issue is that the reference or context of AutoComplete is getting lost but I’m not sure how to solve it.

The search box part looks like this

  <AutoComplete rollNavigation id="autoTop" itemRef="auto">
    <AutoCompleteInput
        value={currentRefinement}
        variant="filled"
        placeholder="Search..."
        minW="500px"
        autoFocus
        onChange={(e) => handleQuery(e)}
        id="auto-input"
      />
      <SearchResults />
    </AutoComplete>

With the SearchResults component looking like this and then being wrapped in the instantsearch HOC with connectHits()

const HitBase = ({ hits, handleClick }: HitProps) => {
  console.log(hits)

  return (
    <AutoCompleteList >
      {hits.map((hit) => (
        <AutoCompleteItem key={hit.title} value={hit.title}>
          <Poster id={hit.id} slug={hit.poster_path} title={hit.title} />
          <Text>{hit.title}</Text>
        </AutoCompleteItem>
      ))}
    </AutoCompleteList>
  )
}
const SearchResults = connectHits(HitBase)

Is there a way to maintain the reference between the two components? My assumption is that the hits HOC is what actually breaks it but I am not sure how to get around it.

[anubra266]

Hi @SteveWallace found a way around this, so it’s fixed in v4.6.0.

[SteveWallace]

@anubra266 No problem! I get why you built it that way and it makes sense. I suspected that would end up the case. I appreciate you having a look.