Repository: wagtail/wagtail
File: client/src/components/ComboBox/ComboBox.tsx (TypeScript)

Code before:
  getSearchFields: (item: ComboBoxOption) => (string | null | undefined)[];
  onSelect: (change: UseComboboxStateChange<ComboBoxOption>) => void;
  noResultsText?: string;
}

/**
 * Generic ComboBox component built with downshift, with a 2-column layout.
 */
export default function ComboBox<ComboBoxOption extends ComboBoxItem>({
  label,
  placeholder,
  inputValue,
  items,
  getItemLabel,
  getItemDescription,
  getSearchFields,
  onSelect,
  noResultsText,
}: ComboBoxProps<ComboBoxOption>) {
  // If there is no label defined, we treat the combobox as not needing its own field.
  const inlineCombobox = !label;
  const flatItems = items.flatMap<ComboBoxOption>(
    (category) => category.items || [],
  );
  const [inputItems, setInputItems] = useState<ComboBoxOption[]>(flatItems);
  const [previewedIndex, setPreviewedIndex] = useState<number>();
  // Re-create the categories so the two-column layout flows as expected.
  const categories = items.reduce<ComboBoxCategory<ComboBoxOption>[]>(
    (cats, cat, index) => {
      if (cat.label || index === 0) {
        return [...cats, { ...cat, items: cat.items.slice() }];
      }

      // eslint-disable-next-line no-param-reassign
      cats[index - 1].items = cats[index - 1].items.concat(cat.items);

      return cats;
    },
    [],
  );
  const noResults = inputItems.length === 0;
  const {
    getLabelProps,
    getMenuProps,
    getInputProps,
    getItemProps,
    setHighlightedIndex,
    setInputValue,
    openMenu,
  } = useCombobox<ComboBoxOption>({
    ...(typeof inputValue !== 'undefined' && { inputValue }),

Review comment (suggestion):
```suggestion
  const [previewedIndex, setPreviewedIndex] = useState<number>(-1);
```

Code after:
  getSearchFields: (item: ComboBoxOption) => (string | null | undefined)[];
  onSelect: (change: UseComboboxStateChange<ComboBoxOption>) => void;
  noResultsText?: string;
}

/**
 * Generic ComboBox component built with downshift, with a 2-column layout.
 */
export default function ComboBox<ComboBoxOption extends ComboBoxItem>({
  label,
  placeholder,
  inputValue,
  items,
  getItemLabel,
  getItemDescription,
  getSearchFields,
  onSelect,
  noResultsText,
}: ComboBoxProps<ComboBoxOption>) {
  // If there is no label defined, we treat the combobox as not needing its own field.
  const inlineCombobox = !label;
  const flatItems = items.flatMap<ComboBoxOption>(
    (category) => category.items || [],
  );
  const [inputItems, setInputItems] = useState<ComboBoxOption[]>(flatItems);
  const [previewedIndex, setPreviewedIndex] = useState<number>(-1);
  // Re-create the categories so the two-column layout flows as expected.
  const categories = items.reduce<ComboBoxCategory<ComboBoxOption>[]>(
    (cats, cat, index) => {
      if (cat.label || index === 0) {
        return [...cats, { ...cat, items: cat.items.slice() }];
      }

      // eslint-disable-next-line no-param-reassign
      cats[index - 1].items = cats[index - 1].items.concat(cat.items);

      return cats;
    },
    [],
  );
  const noResults = inputItems.length === 0;
  const {
    getLabelProps,
    getMenuProps,
    getInputProps,
    getItemProps,
    setHighlightedIndex,
    setInputValue,
    openMenu,
  } = useCombobox<ComboBoxOption>({
    ...(typeof inputValue !== 'undefined' && { inputValue }),