候補リストのキーボードナビゲーション

キーボードハンドラーは、入力要素の onKeyDown イベントに設定してください。非推奨の onKeyPress や onKeyUp には設定しません。keyDown は文字が入力欄に表示される前に発火するため、ArrowDown、ArrowUp、Enter、Escapeを、ブラウザーのデフォルト動作が適用される前に処理できます。

ユーザーがArrowDownを押したら、selectedIndex を1増やし、最大値を suggestions.length - 1 に制限します。setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1)) のように記述できます。また、e.preventDefault() を呼び出して、入力テキストの末尾へカーソルが移動するのを防ぎます。これはテキスト入力におけるArrowDownのブラウザーのデフォルト動作です。

ユーザーがArrowUpを押したら、selectedIndex を1減らし、最小値を 0 に制限します。setSelectedIndex(prev => Math.max(prev - 1, 0)) のように記述できます。また、インデックス0より上へ移動したときに -1（選択なし）に戻す方法もあります。これにより、ユーザーは選択を解除して自由な入力に戻れます。

Enterが押され、selectedIndex >= 0 の場合は、強調表示された候補を選択します。inputValue に suggestions[selectedIndex] を設定し、ドロップダウンを閉じ、selectedIndex を -1 にリセットしてください。候補が強調表示されていない場合（selectedIndexが-1の場合）は、通常のフォーム送信や検索処理を続行させます。

Escapeが押されたら、isOpen を false に設定してドロップダウンを閉じ、selectedIndex を -1 にリセットします。入力値は消去しません。ユーザーは候補を選択せずに閉じたいだけであり、入力したテキストはそのまま編集できるようにしておくためです。

Tabが押されたら、ブラウザーが次のフォーカス可能な要素へフォーカスを移すため、ドロップダウンを閉じます。Tabで isOpen を false に設定すると、入力欄からフォーカスが移った後もドロップダウンが開いたままになるのを防げます。preventDefault() を呼び出す必要はありません。自然なTab順序はブラウザーに処理させてください。

selectedIndex に該当する候補にアクティブスタイルを適用し、強調表示された候補を視覚的に区別できるようにします。className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'} のように記述できます。通常、アクティブ状態では背景色を変え、Enterを押したときにどの項目が選択されるかを明確にします。

候補リストに最大の高さが設定されてスクロールする場合、キーボード操作中に強調表示された項目が画面外へスクロールすることがあります。ref配列に候補のDOM要素を保存し、selectedIndex が変わるたびに listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' }) を呼び出します。nearest のblock値を使うと、スクロール量を最小限に抑えられます。

入力が変わって新しいフィルタリング済みリストが表示されたら、同じ状態更新内で、または候補に依存する useEffect 内で selectedIndex を -1 にリセットします。削除された項目を指す古いインデックスが残っていると、ユーザーが誤った候補を選択することになります。

完全な操作の流れは次のとおりです。ユーザーが入力して候補を絞り込み、ArrowDownで最初の項目を強調表示し、さらにArrowDownを押してリスト内を移動し、ArrowUpで上へ戻り、Enterで強調表示された項目を選択し、Escapeで選択せずに閉じます。これにより、自動補完フィールドでユーザーが期待する標準的なキーボード操作をすべて扱えます。

テキスト入力内でArrowDownとArrowUpを処理するときは、必ず e.preventDefault() を呼び出してください。これを行わないと、ArrowDownでテキストカーソルが末尾へ移動し、ArrowUpで先頭へ移動します。このカーソル移動が選択インデックスによるナビゲーションと競合し、分かりにくい動作を引き起こします。

selectedIndex = 2 で候補が強調表示されているとき、ユーザーがEnterを押すと何が起きるべきですか？

入力欄でonKeyDownを処理します。ArrowDownではselectedIndexを最大値でクランプしながらインクリメントし、ArrowUpでは0または-1でクランプしながらデクリメントします。Enterではハイライトされた項目を選択し、Escapeでは選択せずに閉じ、Tabでは閉じてブラウザーにフォーカス移動を任せます。矢印キーでは常にpreventDefaultを呼び出し、ハイライトされた項目が表示領域に入るようスクロールします。