Autocomplete

1type Suggestion = { id: string; label: string };2type Results =3  | { status: 'idle'; items: [] }4  | { status: 'loading'; items: Suggestion[] }5  | { status: 'success'; items: Suggestion[] }6  | { status: 'error'; items: []; message: string };7type State = {8  input: string; activeId: string | null; focused: boolean; results: Results;9};

1import { useEffect, useId, useRef, useState } from "react";2
3type Suggestion = { id: string; label: string };4type Results =5  | { status: "idle" }6  | { status: "loading"; items: Suggestion[] }7  | { status: "success"; items: Suggestion[] }8  | { status: "error"; message: string };9
10// Copies `value` across only after it stops changing for `ms` milliseconds.11function useDebounced<T>(value: T, ms: number) {12  const [debounced, setDebounced] = useState(value);13  useEffect(() => {14    const timer = setTimeout(() => setDebounced(value), ms);15    return () => clearTimeout(timer);16  }, [value, ms]);17  return debounced;18}19
20export function Autocomplete({21  search,22}: {23  search: (query: string, signal: AbortSignal) => Promise<Suggestion[]>;24}) {25  const [input, setInput] = useState("");        // updates every keystroke26  const [activeId, setActiveId] = useState<string | null>(null);27  const [open, setOpen] = useState(false);28  const [results, setResults] = useState<Results>({ status: "idle" });29  const query = useDebounced(input.trim(), 250);   // updates when you pause30  const listId = useId();31  const rootRef = useRef<HTMLDivElement>(null);32
33  // 1. Fetch when the paused query changes. Cancel the request before it.34  useEffect(() => {35    if (query.length < 2) {36      setResults({ status: "idle" });37      return;38    }39    const controller = new AbortController();40    setResults((prev) => ({41      status: "loading",42      items: "items" in prev ? prev.items : [],43    }));44    search(query, controller.signal)45      .then((items) => setResults({ status: "success", items }))46      .catch((error) => {47        if (error.name !== "AbortError") {48          setResults({ status: "error", message: "Something went wrong. Try again." });49        }50      });51    return () => controller.abort();52  }, [query, search]);53
54  const items = "items" in results ? results.items : [];55
56  // 2. If the list refreshes and the highlighted item is gone, drop the highlight.57  useEffect(() => {58    if (activeId && !items.some((item) => item.id === activeId)) setActiveId(null);59  }, [items, activeId]);60
61  // 3. Close the dropdown when focus leaves the whole widget.62  useEffect(() => {63    const element = rootRef.current;64    function onFocusOut(event: FocusEvent) {65      if (!element?.contains(event.relatedTarget as Node)) setOpen(false);66    }67    element?.addEventListener("focusout", onFocusOut);68    return () => element?.removeEventListener("focusout", onFocusOut);69  }, []);70
71  function move(delta: number) {72    if (items.length === 0) return;73    const index = items.findIndex((item) => item.id === activeId);74    const next = (index + delta + items.length) % items.length; // wraps around75    setActiveId(items[next].id);76  }77
78  function select(suggestion: Suggestion) {79    setInput(suggestion.label);80    setOpen(false);81    setActiveId(null);82  }83
84  function onKeyDown(event: React.KeyboardEvent) {85    if (event.key === "ArrowDown") { event.preventDefault(); setOpen(true); move(1); }86    else if (event.key === "ArrowUp") { event.preventDefault(); setOpen(true); move(-1); }87    else if (event.key === "Enter" && activeId) {88      event.preventDefault();89      const chosen = items.find((item) => item.id === activeId);90      if (chosen) select(chosen);91    }92    else if (event.key === "Escape") setOpen(false);93  }94
95  const showList =96    open && (results.status === "loading" || items.length > 0 || results.status === "error");97
98  return (99    <div ref={rootRef} className="autocomplete">100      <input101        role="combobox"102        aria-expanded={showList}103        aria-controls={listId}104        aria-autocomplete="list"105        aria-activedescendant={activeId ? listId + "-" + activeId : undefined}106        value={input}107        onChange={(event) => { setInput(event.target.value); setOpen(true); }}108        onFocus={() => setOpen(true)}109        onKeyDown={onKeyDown}110      />111
112      {showList && (113        <ul id={listId} role="listbox">114          {items.map((item) => (115            <li116              key={item.id}117              id={listId + "-" + item.id}118              role="option"119              aria-selected={item.id === activeId}120              onMouseDown={(event) => event.preventDefault()} // keep the input focused121              onClick={() => select(item)}122            >123              {highlight(item.label, query)}124            </li>125          ))}126          {results.status === "success" && items.length === 0 && <li>No matches</li>}127          {results.status === "error" && <li role="alert">{results.message}</li>}128        </ul>129      )}130
131      <p role="status" className="sr-only">132        {results.status === "loading" ? "Loading suggestions"133          : results.status === "success" ? items.length + " suggestions"134          : results.status === "error" ? results.message : ""}135      </p>136    </div>137  );138}139
140// Slice the label around the typed text and wrap the match in a real <mark>.141// Never uses innerHTML, so a label from the server cannot inject anything.142function highlight(label: string, query: string) {143  if (!query) return label;144  const at = label.toLowerCase().indexOf(query.toLowerCase());145  if (at === -1) return label;146  return (147    <>148      {label.slice(0, at)}149      <mark>{label.slice(at, at + query.length)}</mark>150      {label.slice(at + query.length)}151    </>152  );153}