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

Code before:
      // Hide any preview when the user starts typing.
      setPreviewedIndex(undefined);
    },
  });

  useEffect(() => {
    if (inputValue) {
      openMenu();
      setInputValue(inputValue);
      const filtered = findMatches<ComboBoxOption>(
        flatItems,
        getSearchFields,
        inputValue,
      );
      setInputItems(filtered);
      // Always reset the first item to highlighted on filtering, to speed up selection.
      setHighlightedIndex(0);
    } else {
      setInputValue('');
      setInputItems(flatItems);
      setHighlightedIndex(-1);
    }
  }, [inputValue]);

  const previewedBlock =
    typeof previewedIndex !== 'undefined' ? inputItems[previewedIndex] : null;

  return (
    <div className="w-combobox-container">
      <div className="w-combobox">
        {/* downshift does the label-field association itself. */}
        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
        <label {...getLabelProps()} className="w-sr-only">
          {label}
        </label>
        <div className="w-combobox__field">
          <input
            {...getInputProps()}
            type="text"
            // Prevent the field from receiving focus if it’s not visible.
            disabled={inlineCombobox}
            placeholder={placeholder}
          />
        </div>
        {noResults ? (
          <div className="w-combobox__status">{noResultsText}</div>
        ) : null}
        <div {...getMenuProps()} className="w-combobox__menu">
          {categories.map((category) => {
            const categoryItems = (category.items || []).filter((item) =>
              inputItems.find((i) => i.type === item.type),

Review comment (suggestion):
```suggestion
  const previewedBlock = previewedIndex >= 0 ? inputItems[previewedIndex] : null;
```

Code after:
      // Hide any preview when the user starts typing.
      setPreviewedIndex(-1);
    },
  });

  useEffect(() => {
    if (inputValue) {
      openMenu();
      setInputValue(inputValue);
      const filtered = findMatches<ComboBoxOption>(
        flatItems,
        getSearchFields,
        inputValue,
      );
      setInputItems(filtered);
      // Always reset the first item to highlighted on filtering, to speed up selection.
      setHighlightedIndex(0);
    } else {
      setInputValue('');
      setInputItems(flatItems);
      setHighlightedIndex(-1);
    }
  }, [inputValue]);

  const previewedBlock =
    previewedIndex >= 0 ? inputItems[previewedIndex] : null;

  return (
    <div className="w-combobox-container">
      <div className="w-combobox">
        {/* downshift does the label-field association itself. */}
        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
        <label {...getLabelProps()} className="w-sr-only">
          {label}
        </label>
        <div className="w-combobox__field">
          <input
            {...getInputProps()}
            type="text"
            // Prevent the field from receiving focus if it’s not visible.
            disabled={inlineCombobox}
            placeholder={placeholder}
          />
        </div>
        {noResults ? (
          <div className="w-combobox__status">{noResultsText}</div>
        ) : null}
        <div {...getMenuProps()} className="w-combobox__menu">
          {categories.map((category) => {
            const categoryItems = (category.items || []).filter((item) =>
              inputItems.find((i) => i.type === item.type),