Arkadaşlar selam, uzun zamandır React ile çalışıyorum ama özellikle dropdown menü konusunda hep bir takıntım var. Kullanıcı dostu bir dropdown tasarlamak sandığımdan çok daha zorluymuş. En büyük sorunum, menünün dışına tıklandığında kapanması gerektiği halde bazen iç elemanlara tıklayınca da kapanması. Mesela bir liste içinde checkbox'lar var, kullanıcı checkbox'ı işaretlemek istediğinde menü kapanıp gidiyor. Bu durumu çözmek için useRef ve useEffect ile uğraşıyorum ama her seferinde farklı bir edge case çıkıyor. Siz nasıl bir yol izliyorsunuz? Özellikle birden fazla dropdown'ın aynı sayfada olduğu durumlarda birini açınca diğerinin kapanması da ayrı bir dert.
Bir diğer konu ise erişilebilirlik. Klavye ile navigasyon tam bir kabus. Tab tuşuyla dropdown'a geldiğimizde açılması, ok tuşlarıyla seçim yapılması, Escape ile kapanması gibi standart davranışları sağlamak için ARIA atribülerini doğru kullanmak gerekiyor. Ama özellikle özel tasarımlı menülerde bu atribüleri eklemeyi unutuyorum veya yanlış yere koyuyorum. Sonra Lighthouse testlerinde erişilebilirlik puanım düşüyor. Bu konuda kullandığınız hazır bir kütüphane var mı, yoksa her şeyi sıfırdan mı yazıyorsunuz? Ben genelde sıfırdan yazıyorum ama zaman kaybı oluyor.
Son olarak performans konusu. Dropdown içinde çok fazla seçenek olduğunda, özellikle 100-200 item'ı olan listelerde, açılış anında belirgin bir kasma yaşıyorum. Virtualization kullanmayı denedim ama bu sefer de açılır açılmaz scroll pozisyonunun doğru ayarlanmaması gibi sorunlar çıktı. Ayrıca search özelliği ekleyince filtreleme sırasında re-render'lar patlıyor. Bu konuda tecrübesi olan var mı? Hangi yaklaşımı önerirsiniz? Özellikle sık kullanılan select kütüphanelerini mi tercih ediyorsunuz, yoksa kendi çözümünüzü mü geliştiriyorsunuz?
Bir diğer konu ise erişilebilirlik. Klavye ile navigasyon tam bir kabus. Tab tuşuyla dropdown'a geldiğimizde açılması, ok tuşlarıyla seçim yapılması, Escape ile kapanması gibi standart davranışları sağlamak için ARIA atribülerini doğru kullanmak gerekiyor. Ama özellikle özel tasarımlı menülerde bu atribüleri eklemeyi unutuyorum veya yanlış yere koyuyorum. Sonra Lighthouse testlerinde erişilebilirlik puanım düşüyor. Bu konuda kullandığınız hazır bir kütüphane var mı, yoksa her şeyi sıfırdan mı yazıyorsunuz? Ben genelde sıfırdan yazıyorum ama zaman kaybı oluyor.
Son olarak performans konusu. Dropdown içinde çok fazla seçenek olduğunda, özellikle 100-200 item'ı olan listelerde, açılış anında belirgin bir kasma yaşıyorum. Virtualization kullanmayı denedim ama bu sefer de açılır açılmaz scroll pozisyonunun doğru ayarlanmaması gibi sorunlar çıktı. Ayrıca search özelliği ekleyince filtreleme sırasında re-render'lar patlıyor. Bu konuda tecrübesi olan var mı? Hangi yaklaşımı önerirsiniz? Özellikle sık kullanılan select kütüphanelerini mi tercih ediyorsunuz, yoksa kendi çözümünüzü mü geliştiriyorsunuz?