Navigasi Keyboard dalam Daftar Saran

Pasang pengendali papan ketik pada peristiwa onKeyDown di elemen masukan, bukan pada onKeyPress (usang) atau onKeyUp. keyDown berjalan sebelum karakter muncul di masukan, sehingga Anda dapat mencegat ArrowDown, ArrowUp, Enter, dan Escape sebelum tombol-tombol tersebut menimbulkan efek bawaan apa pun pada peramban.

Saat pengguna menekan ArrowDown, naikkan selectedIndex sebesar 1, dengan batas maksimum suggestions.length - 1: setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1)). Panggil juga e.preventDefault() untuk mencegah kursor berpindah ke akhir teks masukan, yang merupakan perilaku bawaan peramban untuk ArrowDown pada masukan teks.

Saat pengguna menekan ArrowUp, kurangi selectedIndex sebesar 1, dengan batas minimum 0: setSelectedIndex(prev => Math.max(prev - 1, 0)). Anda juga dapat memilih untuk membatasi nilainya ke -1, yang berarti tidak ada pilihan, saat bergerak melewati indeks 0, sehingga pengguna dapat membatalkan pilihan dan kembali mengetik dengan bebas.

Saat Enter ditekan dan selectedIndex >= 0, pilih saran yang disorot: atur inputValue ke suggestions[selectedIndex], tutup daftar tarik-turun, dan atur ulang selectedIndex ke -1. Jika tidak ada saran yang disorot (selectedIndex adalah -1), biarkan pengiriman formulir atau tindakan pencarian normal berlanjut.

Saat Escape ditekan, tutup daftar tarik-turun dengan mengatur isOpen ke false dan mengatur ulang selectedIndex ke -1. Jangan hapus nilai masukan—pengguna hanya ingin menutup saran tanpa memilih salah satunya, sambil mempertahankan teks yang telah diketik untuk penyuntingan lebih lanjut.

Saat Tab ditekan, tutup daftar tarik-turun karena peramban akan memindahkan fokus ke elemen berikutnya yang dapat menerima fokus. Mengatur isOpen ke false saat Tab memastikan daftar tarik-turun tidak tetap terbuka setelah fokus meninggalkan masukan. Anda tidak perlu memanggil preventDefault()—biarkan peramban menangani urutan tab alami.

Saran yang disorot harus tampak berbeda secara visual. Terapkan gaya aktif pada saran di selectedIndex: className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'}. Status aktif biasanya menggunakan perubahan warna latar belakang, sehingga jelas elemen mana yang akan dipilih jika Enter ditekan.

Saat daftar saran memiliki tinggi maksimum dan dapat digulir, elemen yang disorot mungkin bergeser keluar layar selama navigasi papan ketik. Gunakan larik referensi untuk menyimpan elemen DOM saran dan panggil listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' }) setiap kali selectedIndex berubah. Nilai blok nearest meminimalkan jumlah pengguliran.

Saat masukan berubah dan daftar tersaring baru muncul, atur ulang selectedIndex ke -1 dalam pembaruan status yang sama atau dalam useEffect yang bergantung pada suggestions. Indeks usang yang menunjuk ke elemen yang dihapus dapat menyebabkan pengguna memilih saran yang salah.

Alur pengguna lengkap: pengguna mengetik untuk menyaring, ArrowDown menyoroti elemen pertama, ArrowDown berikutnya bergerak menelusuri daftar, ArrowUp bergerak kembali ke atas, Enter memilih elemen yang disorot, dan Escape menutup tanpa memilih. Ini mencakup semua pola interaksi papan ketik standar yang diharapkan pengguna dari kolom pelengkapan otomatis.

Selalu panggil e.preventDefault() saat menangani ArrowDown dan ArrowUp di dalam masukan teks. Tanpanya, ArrowDown memindahkan kursor teks ke akhir dan ArrowUp memindahkannya ke awal. Pergerakan kursor ini akan bertentangan dengan navigasi berdasarkan indeks pilihan Anda sehingga menimbulkan perilaku yang membingungkan.

Apa yang harus terjadi ketika pengguna menekan Enter dengan saran yang disorot pada selectedIndex = 2?

Tangani onKeyDown pada masukan. ArrowDown menambah selectedIndex (dibatasi hingga nilai maksimum), ArrowUp menguranginya (dibatasi hingga 0 atau -1), Enter memilih item yang disorot, Escape menutup tanpa memilih, dan Tab menutup serta membiarkan peramban memindahkan fokus. Selalu panggil preventDefault pada tombol panah dan gulir item yang disorot hingga terlihat.