Reactで、入力候補を出すコンボボックスをキーボードで操作する方法

import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';

type Props = {
  label: string;
  options: string[];
};

// 入力した文字を含む候補を出すコンボボックス。フォーカスは常に input に置いたまま、
// 選んでいる候補を aria-activedescendant で伝える
export function Combobox({ label, options }: Props) {
  const id = useId();
  const listId = `${id}-list`;
  const optionId = (index: number) => `${id}-option-${index}`;

  const [value, setValue] = useState('');
  const [open, setOpen] = useState(false);
  const [activeIndex, setActiveIndex] = useState(-1);
  const listRef = useRef<HTMLUListElement>(null);

  const filtered = options.filter((option) => option.includes(value));
  const expanded = open && filtered.length > 0;

  // 選んでいる候補が一覧の見えている範囲から外れたら、一覧をスクロールする
  useEffect(() => {
    if (activeIndex < 0) return;
    listRef.current?.children[activeIndex]?.scrollIntoView({ block: 'nearest' });
  }, [activeIndex]);

  function choose(index: number) {
    setValue(filtered[index]);
    setOpen(false);
    setActiveIndex(-1);
  }

  function onKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    // 日本語の変換中のキー操作は、IME に任せる
    if (event.nativeEvent.isComposing) return;
    const last = filtered.length - 1;

    switch (event.key) {
      case 'ArrowDown':
        event.preventDefault();
        if (last < 0) return;
        setOpen(true);
        if (event.altKey) return; // Alt + ↓ は一覧を開くだけ
        setActiveIndex((i) => (!expanded || i >= last ? 0 : i + 1));
        return;
      case 'ArrowUp':
        event.preventDefault();
        if (last < 0) return;
        setOpen(true);
        setActiveIndex((i) => (!expanded || i <= 0 ? last : i - 1));
        return;
      case 'Enter':
        if (expanded && activeIndex >= 0) {
          event.preventDefault(); // form の中でも、候補を決めるだけで送信しない
          choose(activeIndex);
        }
        return;
      case 'Escape':
        if (expanded) {
          setOpen(false);
          setActiveIndex(-1);
        } else {
          setValue('');
        }
        return;
      case 'ArrowLeft':
      case 'ArrowRight':
      case 'Home':
      case 'End':
        // カーソル移動はブラウザに任せ、候補の選択だけ外す
        setActiveIndex(-1);
        return;
    }
  }

  return (
    <div className="combobox">
      <label htmlFor={id}>{label}</label>
      <input
        id={id}
        type="text"
        role="combobox"
        aria-expanded={expanded}
        aria-controls={listId}
        aria-autocomplete="list"
        aria-activedescendant={expanded && activeIndex >= 0 ? optionId(activeIndex) : undefined}
        autoComplete="off"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
          setOpen(true);
          setActiveIndex(-1);
        }}
        onKeyDown={onKeyDown}
        onBlur={() => setOpen(false)}
      />
      <ul id={listId} role="listbox" aria-label={label} ref={listRef} hidden={!expanded}>
        {filtered.map((option, index) => (
          <li
            key={option}
            id={optionId(index)}
            role="option"
            aria-selected={index === activeIndex}
            // 押した時点で input からフォーカスが外れないようにする
            onMouseDown={(event) => event.preventDefault()}
            onClick={() => choose(index)}
          >
            {option}
          </li>
        ))}
      </ul>
    </div>
  );
}

入力後: 値「山」 / expanded=true / activedescendant=なし / aria-selected=true: なし / フォーカス: input
候補: 山形県,富山県,山梨県,和歌山県,岡山県,山口県
↓: 値「山」 / expanded=true / activedescendant=_r_0_-option-0（山形県） / aria-selected=true: 山形県 / フォーカス: input
↓: 値「山」 / expanded=true / activedescendant=_r_0_-option-1（富山県） / aria-selected=true: 富山県 / フォーカス: input
↓: 値「山」 / expanded=true / activedescendant=_r_0_-option-2（山梨県） / aria-selected=true: 山梨県 / フォーカス: input
↓: 値「山」 / expanded=true / activedescendant=_r_0_-option-3（和歌山県） / aria-selected=true: 和歌山県 / フォーカス: input
↓: 値「山」 / expanded=true / activedescendant=_r_0_-option-4（岡山県） / aria-selected=true: 岡山県 / フォーカス: input
↓: 値「山」 / expanded=true / activedescendant=_r_0_-option-5（山口県） / aria-selected=true: 山口県 / フォーカス: input
↓: 値「山」 / expanded=true / activedescendant=_r_0_-option-0（山形県） / aria-selected=true: 山形県 / フォーカス: input
↑: 値「山」 / expanded=true / activedescendant=_r_0_-option-5（山口県） / aria-selected=true: 山口県 / フォーカス: input
↑: 値「山」 / expanded=true / activedescendant=_r_0_-option-4（岡山県） / aria-selected=true: 岡山県 / フォーカス: input

- text: 都道府県
- combobox "都道府県" [expanded]: 山
- listbox "都道府県":
  - option "山形県"
  - option "富山県"
  - option "山梨県"
  - option "和歌山県"
  - option "岡山県" [selected]
  - option "山口県"

Enter: 値「岡山県」 / expanded=false / activedescendant=なし / aria-selected=true: なし / フォーカス: input
カーソルの位置: 3（値の長さ 3） / 送信した回数：0
もう一度 Enter: 値「岡山県」 / expanded=false / activedescendant=なし / aria-selected=true: なし / フォーカス: input / 送信した回数：1

「山」と ↓: 値「山」 / expanded=true / activedescendant=_r_0_-option-0（山形県） / aria-selected=true: 山形県 / フォーカス: input
Esc 1回目: 値「山」 / expanded=false / activedescendant=なし / aria-selected=true: なし / フォーカス: input
Esc 2回目: 値「」 / expanded=false / activedescendant=なし / aria-selected=true: なし / フォーカス: input

Alt+↓: 値「」 / expanded=true / activedescendant=なし / aria-selected=true: なし / フォーカス: input
↓: 値「」 / expanded=true / activedescendant=_r_0_-option-0（北海道） / aria-selected=true: 北海道 / フォーカス: input
Esc で閉じてから ↑: 値「」 / expanded=true / activedescendant=_r_0_-option-46（沖縄県） / aria-selected=true: 沖縄県 / フォーカス: input

「山」と ↓ ↓: 値「山」 / expanded=true / activedescendant=_r_0_-option-1（富山県） / aria-selected=true: 富山県 / フォーカス: input / カーソルの位置 1
Home: 値「山」 / expanded=true / activedescendant=なし / aria-selected=true: なし / フォーカス: input / カーソルの位置 0
↓ のあと End: 値「山」 / expanded=true / activedescendant=なし / aria-selected=true: なし / フォーカス: input / カーソルの位置 1

scrollIntoView あり
一覧の高さ 190px、scrollTop 186px、選んでいる候補は一覧の見えている範囲にある

scrollIntoView なし
一覧の高さ 190px、scrollTop 0px、選んでいる候補は一覧の見えている範囲にない

isComposing を見る版
「やま」を「山」に変換した状態: 値「山」 / expanded=true / activedescendant=なし / aria-selected=true: なし / フォーカス: input
変換中に ↓: 値「山」 / expanded=true / activedescendant=なし / aria-selected=true: なし / フォーカス: input
Enter で確定: 値「山」 / expanded=true / activedescendant=なし / aria-selected=true: なし / フォーカス: input / 送信した回数：0
届いた keydown: ArrowDown(isComposing=true) → Enter(isComposing=true)

isComposing を見ない版
「やま」を「山」に変換した状態: 値「山」 / expanded=true / activedescendant=なし / aria-selected=true: なし / フォーカス: input
変換中に ↓: 値「山」 / expanded=true / activedescendant=_r_0_-option-0（山形県） / aria-selected=true: 山形県 / フォーカス: input
Enter で確定: 値「山形県山」 / expanded=false / activedescendant=なし / aria-selected=true: なし / フォーカス: input / 送信した回数：0
届いた keydown: ArrowDown(isComposing=true) → Enter(isComposing=true)

preventDefault する版
「岡山県」の位置を押したあと: 値「岡山県」 / expanded=false / activedescendant=なし / aria-selected=true: なし / フォーカス: input

しない版
「岡山県」の位置を押したあと: 値「山」 / expanded=false / activedescendant=なし / aria-selected=true: なし / フォーカス: BODY