createAutocomplete closes panel if there are no results

[JoeVanGundy]

Description

If there are no results for a search, the panel is closed. Not sure if there is a way to avoid this, but I can't find any way to override this.

Reproduction

https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/react-renderer?file=/src/Autocomplete.tsx

Steps

1. Type in a bunch of characters until there is no result
2. Notice how the panel closes.

Expected behavior

My expectation is that I'd be able to show a No results kind of message.

Environment

• OS: macOS
• Browser: Chrome
• Autocomplete version: 1.7.1

[JoeVanGundy]

My goal is to create something like what Slack does:

[sarahdayan]

Hi @JoeVanGundy,

This is the expected behavior. createAutocomplete exposes a shouldPanelOpen which determines when the panel opens or not. By default, the panel opens when there are items in the state.

You don't have to implement this option to re-create the Slack experience though—instead, check the length of your items and return the items to display when there are none.

As a sidenote, implementing this behavior would be a lot easier using autocomplete-js rather than build a custom renderer with createAutocomplete. May I ask why you went for this option?

[JoeVanGundy]

Hey @sarahdayan , thanks for the response!

I have the panel itself behind a check like this:

  {autocompleteState.isOpen && <Panel />

Wouldn't the check for items length have to be in there? Otherwise the panel would always be visible right?

The main factors that led to using createAutocomplete were:

1. Needed the ability to add icons to the search bar. Things like cmd + k in the input box to tell users how to open the command palette.
2. While not necessary, being able to use our own components seems to allow for a lot more customization.
3. We're using Chakra and Emotion. I couldn't find anyway that would allow us to use our themes.
4. We were using Slack and Algolia's documentation command palette as an inspiration. I couldn't find any example that shows how to build those more advanced features using autocomplete-js. The closest thing I could find was this article. Unfortunately, the app they build is pretty simplified and missing the advanced features from the Algolia search.

Also it would be huge if it's possible to share the code for the Algolia Documentation Command Palette.

Let me know if there's any other insight that could help!

(We're loving Autocomplete, so these aren't complaints, but just hopefully an insight into our decision)

[sarahdayan]

Hi @JoeVanGundy and sorry for the late answer.

The check on item's length that I was suggesting wasn't to decide whether to display the panel, but to return alternative sources when the main one doesn't return results. Here's what' it could look like with autocomplete-js and getAlgoliaResults:

autocomplete({
  // …
  getSources({ query }) {
    return [
      {
        sourceId: 'products',
        getItems({ query }) {
          return getAlgoliaResults({
            // …
            transformResponse({ hits }) {
              if (hits.length === 0) {
                return [
                  {
                    title: 'Some alternative search result',
                  },
                ];
              }

              return hits;
            },
          });
        },
        // …
      },
    ];
  },
});

When there are no hits returned from Algolia, we return alternative hits to display instead. You can see transformResponse as a similar API to a then when using promises.

Regarding your usage of createAutocomplete:

1. You should be able to do this using CSS as @dhayab demonstrated in this discussion you opened.
2. That makes sense. The customization features we provide are limited to passing CSS classes and customizing the panel + search results, which is usually enough for many users but can be limiting when using other solutions or your own design system. Would you be open to a conversation about those? We're always trying to better understand how our users leverage our libraries, and better understanding what your ecosystem looks like would be fantastic to help us improve Autocomplete.
3. Same.
4. That's fair, and we did build the Algolia documentation search experience with autocomplete-core—not by necessity, but because autocomplete-js was still very alpha when we did. This is good feedback that autocomplete-js might feel limiting when it comes to customizing looks and behavior, so thanks for this feedback.

I'm going to close this since this isn't an issue and convert it to a discussion, feel free to keep it going!