Combo box with a custom list box

A combo box modified to include additional content in the list box.

⚠️ Warning this can create a confusing experience for keyboard users as the link can be reached by tab, but the options by arrow keys.

It is unlikely screen-reader uses would ever be aware of the additional content, and may have trouble accessing it.

import { useState } from 'react';
import { ComboBox, useTokenSearch } from '@citizensadvice/react-combo-boxes';

const options = ['Apple', 'Orange', 'Lemon', 'Raspberry', 'Strawberry'];

function renderListBox({ hidden, className, ...props }) {
  return (
    <div
      className={className}
      hidden={hidden}
    >
      <ul
        className="reset-list"
        {...props}
      />
      <div className="list-footer">
        <a href="https://en.wikipedia.org/wiki/Fruit">More about fruit</a>
      </div>
    </div>
  );
}

export function Example() {
  const [value, setValue] = useState(null);
  const [search, setSearch] = useState(null);
  const filteredOptions = useTokenSearch(search, { options });

  return (
    <>
      <label
        id="select-label"
        htmlFor="select"
      >
        Select
      </label>
      <ComboBox
        id="select"
        aria-labelledby="select-label"
        value={value}
        onValue={setValue}
        onSearch={setSearch}
        options={filteredOptions}
        renderListBox={renderListBox}
      />

      <label htmlFor="output">Current value</label>
      <output
        htmlFor="select"
        id="output"
      >
        {JSON.stringify(value, undefined, ' ')}
      </output>
    </>
  );
}