[Autocomplete] Best practice for hiding results when query is empty?

Open Q&A
,
1

Context
I am using autocomplete.js, in a React app, via a custom renderer.

Currently I have hitsPerPage: 4, so if I focus the autocomplete input while it is empty (i.e. query is empty/undefined) 4 results will appear. There are two things I’ve tried in order to hide those 4 results in this case:

Question
What is the best way to hide the results when the query is empty?

Attempted solutions

I can easily know whether or not there is a query entered in the autocomplete search input by checking autcompleteState.query. Using that I’ve tried the following approaches:

  1. what I thought would be most straightforward is dynamically defining hitsPerPage with a ternary operator, like:
    hitsPerPage: autocompleteState.query ? 4 : 0
    However that doesn’t seem to work (maybe you can’t change hitsPerPage without re-initializing the entire autocomplete component?)
  1. What does work, but seems kinda clunky (and too far downstream/front-end), is optionally rendering the results panel based on whether or not there is a query, using JSX. That looks like:
{
    autocompleteState.query ? 
    <div className="aa-Panel" {...autocomplete.getPanelProps({})}>...etc
    : null
}

I’m wondering if there’s a better approach here?

(I’ve also tried creating a rule that returns an empty object when the query is empty, but that didn’t seem to work either)

(Also, if anyone happens to know, I’m curious how Algolia is determining which 4 results to show when they query is empty?)

2

Whoops, this is controlled openOnFocus : autocomplete | Autocomplete | Algolia