Combobox

function ComboboxPattern() {
  const [value, setValue] = useState("");
  const [open, setOpen] = useState(false);
  const [activeIndex, setActiveIndex] = useState(-1);
  const inputRef = useRef(null);

  const options = FRUITS.filter(f =>
    f.toLowerCase().includes(value.toLowerCase())
  );

  function selectOption(option) {
    setValue(option);
    setOpen(false);
    setActiveIndex(-1);
    inputRef.current?.focus(); // focus never leaves the input
  }

  function onKeyDown(e) {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      setOpen(true);
      setActiveIndex(i => Math.min(i + 1, options.length - 1));
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setActiveIndex(i => Math.max(i - 1, 0));
    } else if (e.key === "Enter" && open && activeIndex >= 0) {
      e.preventDefault();
      selectOption(options[activeIndex]);
    } else if (e.key === "Escape" && open) {
      e.preventDefault();
      setOpen(false);
    }
  }

  return (
    <>
      <input
        ref={inputRef}
        role="combobox"
        aria-expanded={open}
        aria-controls="fruit-listbox"
        aria-autocomplete="list"
        // Points at the visually-highlighted option WITHOUT moving real
        // DOM focus — this is what lets the input keep the caret & keeps
        // the screen reader in "edit text" mode while announcing options.
        aria-activedescendant={
          activeIndex >= 0 ? `fruit-option-${activeIndex}` : undefined
        }
        value={value}
        onChange={(e) => { setValue(e.target.value); setOpen(true); }}
        onKeyDown={onKeyDown}
      />
      {open && (
        <ul id="fruit-listbox" role="listbox" aria-label="Fruits">
          {options.map((option, i) => (
            <li
              key={option}
              id={`fruit-option-${i}`}
              role="option"
              aria-selected={i === activeIndex}
              onMouseDown={(e) => { e.preventDefault(); selectOption(option); }}
            >
              {option}
            </li>
          ))}
        </ul>
      )}
    </>
  );
}