Öneri Listelerinde Klavye ile Gezinme

Klavye işleyicisini giriş öğesindeki onKeyDown olayına bağlayın; bunu onKeyPress (kullanımdan kaldırılmış) veya onKeyUp olayına bağlamayın. keyDown, karakter girişte görünmeden önce çalışır; bu da ArrowDown, ArrowUp, Giriş ve Kaçış tuşlarını varsayılan tarayıcı etkileri oluşmadan önce yakalamanızı sağlar.

Kullanıcı ArrowDown tuşuna bastığında selectedIndex değerini 1 artırın ve bunu suggestions.length - 1 değerinde sabitleyin: setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1)). Ayrıca imlecin giriş metninin sonuna atlamasını önlemek için e.preventDefault() çağırın; bu, metin girişlerinde ArrowDown tuşunun varsayılan tarayıcı davranışıdır.

Kullanıcı ArrowUp tuşuna bastığında selectedIndex değerini 1 azaltın ve bunu en az 0 olacak şekilde sabitleyin: setSelectedIndex(prev => Math.max(prev - 1, 0)). Ayrıca 0 dizininin üzerine çıkıldığında değeri -1'e (seçim yok) sabitlemeyi seçebilirsiniz; bu, kullanıcının seçimi kaldırıp özgürce yazmaya dönmesini sağlar.

Giriş tuşuna basıldığında ve selectedIndex >= 0 olduğunda vurgulanan öneriyi seçin: inputValue değerini suggestions[selectedIndex] olarak ayarlayın, açılır listeyi kapatın ve selectedIndex değerini -1 olarak sıfırlayın. Hiçbir öneri vurgulanmamışsa (selectedIndex -1 ise) normal form gönderme veya arama işleminin sürmesine izin verin.

Kaçış tuşuna basıldığında isOpen değerini false olarak ayarlayarak açılır listeyi kapatın ve selectedIndex değerini -1 olarak sıfırlayın. Giriş değerini temizlemeyin; kullanıcı yalnızca bir öneri seçmeden önerileri kapatmak ve yazdığı metni düzenlemeye devam etmek istiyor.

Sekme tuşuna basıldığında açılır listeyi kapatın; çünkü tarayıcı zaten odağı bir sonraki odaklanılabilir öğeye taşıyacaktır. Sekme tuşunda isOpen değerini false olarak ayarlamak, odak girişten ayrıldıktan sonra açılır listenin açık kalmamasını sağlar. preventDefault() çağırmanız gerekmez; tarayıcının doğal sekme sırasını yönetmesine izin verin.

Vurgulanan öneri görsel olarak ayırt edilebilir olmalıdır. selectedIndex konumundaki öneriye etkin bir stil uygulayın: className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'}. Etkin durumda genellikle arka plan rengi değiştirilir; böylece Giriş tuşuna basıldığında hangi öğenin seçileceği açıkça görülür.

Öneri listesinde bir max-height varsa ve liste kaydırılabiliyorsa, klavye gezinmesi sırasında vurgulanan öğe ekranın dışına kayabilir. Önerilerin DOM öğelerini saklamak için bir başvuru dizisi kullanın ve selectedIndex her değiştiğinde listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' }) çağırın. nearest blok değeri, kaydırma miktarını en aza indirir.

Giriş değiştiğinde ve yeni bir filtrelenmiş liste göründüğünde selectedIndex değerini aynı durum güncellemesinde veya önerilere bağlı bir useEffect içinde -1 olarak sıfırlayın. Kaldırılmış öğelere işaret eden güncel olmayan dizinler, kullanıcının yanlış öneriyi seçmesine neden olur.

Tam kullanıcı akışı şöyledir: kullanıcı filtrelemek için yazar, ArrowDown ilk öğeyi vurgular, ek ArrowDown tuşlarına basmak listede ilerletir, ArrowUp yukarı çıkarır, Giriş tuşu vurgulanan öğeyi seçer ve Kaçış tuşu seçim yapmadan kapatır. Bu akış, kullanıcıların otomatik tamamlama alanından beklediği tüm standart klavye etkileşimi kalıplarını kapsar.

Bir metin girişi içinde ArrowDown ve ArrowUp tuşlarını işlerken her zaman e.preventDefault() çağırın. Aksi hâlde ArrowDown metin imlecini sona, ArrowUp ise başa taşır. Bu imleç hareketleri, selectedIndex gezinmenizle çakışarak kafa karıştırıcı bir davranış oluşturur.

Kullanıcı, selectedIndex = 2 konumunda bir öneri vurgulanmışken Giriş tuşuna bastığında ne olmalıdır?

Giriş alanında onKeyDown olayını işleyin. ArrowDown, selectedIndex değerini artırır (en yüksek değerle sınırlandırılır); ArrowUp azaltır (0 veya -1 ile sınırlandırılır); Enter, vurgulanan öğeyi seçer; Escape, seçim yapmadan kapatır; Tab, kapatır ve odağın tarayıcı tarafından taşınmasına izin verir. Ok tuşlarında her zaman preventDefault çağrısı yapın ve vurgulanan öğeyi görünür alana kaydırın.