Combo box without managed focus

A combo box without managed focus.

The focus remains in the input, and the currently selected item is set by aria-activedescendant.

The default is to use managedFocus as this has the best backwards compatibility. However, note that Chrome on a Mac defaults to managedFocus=false due to a bug in its integration with VoiceOver.

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

function mapOption({ name, code }) {
  return `${name} (${code})`;
}

export function Example() {
  const [value, setValue] = useState(null);
  const [search, setSearch] = useState(null);
  const filteredOptions = useTokenSearch(search, {
    options: countries,
    index: mapOption,
  });
  const [managedFocus, setManagedFocus] = useState(false);

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

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

      <label>
        <input
          type="checkbox"
          onChange={({ target: { checked } }) => setManagedFocus(checked)}
          checked={managedFocus}
        />{' '}
        Toggle managed focus
      </label>
    </>
  );
}