Header and footer with Links

[sadikie]

How to add a header and footer section with links without the dropdown closing before the link is fired?

[remijean]

Up 👍! Do you have a solution?

[jgeurts]

I'm using react-autosuggest with Algolia and bootstrap, and I needed to show a footer saying "Powered by Algolia." To accomplish that, I sort of hacked around things using multiSection and made a section, with no list items, whose title is actually the footer I wanted to show:

function SearchAutoComplete({ currentRefinement, hits, refine }: SearchAutoCompleteProps<IndexedDocument>): React.ReactElement {
  function renderSectionTitle(section: { index: string; isFooter?: boolean }): React.ReactNode {
    if (section.isFooter) {
      return (
        <>
          <hr className="dropdown-divider" />
          <li className="dropdown-item-text">
            <SearchPoweredBy />
          </li>
        </>
      );
    }

    if (section.index) {
      return (
        <h6 className="dropdown-header">
          {section.index.charAt(0).toUpperCase()}
          {section.index.slice(1)}
        </h6>
      );
    }

    return '';
  }

  const sectionsWithHits = [];
  if (value) {
    for (const section of hits) {
      if (section.hits.length) {
        sectionsWithHits.push(section);
      }
    }

    if (sectionsWithHits.length) {
      sectionsWithHits.push({
        isFooter: true,
        hits: [],
      });
    }
  }

  return (
    <AutoSuggest
      suggestions={sectionsWithHits}
      multiSection
      renderSectionTitle={renderSectionTitle}
      ...
      theme={{
        container: 'dropdown',
        getFromContainer: 'autosuggest',
        input: 'form-control shadow-none',
        suggestionsContainer: 'dropdown-menu',
        suggestionsContainerOpen: 'show',
        suggestionsList: 'list-unstyled suggestionsList',
        suggestion: 'dropdown-item',
        suggestionHighlighted: 'active',
      }}
    />
  );
}

Ends up looking like the following:

[jgeurts]

fwiw, you can style the class used for suggestionsList to hide the empty list:

.suggestionsList:empty {
  display: none;
}

[richardscarrott]

You can customize the suggestions container (add a footer / header etc.) using the renderSuggestionsContainer prop, no need to hack around with sections.

e.g.

[ShaneHudson]

The problem with the solutions given in this thread is that they all seem to (at least for me) break scrolling in the list via keyboard, which is a deal breaker in terms of accessibility.