Laravel Livewire ile Bootstrap Tab Kullanımı ve Active Tab Sorununa Çözüm

 

Bugün sizlerle birkaç gün önce karşılaştığım ufak bir sorunu ve çözümünü paylaşacağım.

Laravel ile geliştiriğim bir projemmde Livewire component kullandığım sırada bir formum için Bootstrap tab kullanmam gerekti. Bootstrap’ın sitesinden örnek kalıbı alarak içini ihtiyacım dahilinde doldurup hazırladım. Ardından sekmeler arasında geçiş yaparken bir sorun da göremedikten sonra kaydet butonunu da ekledim ve işlem sonucunda alert mesajı verip yönlendirmeden sayfada kalacak şekilde geliştirmeyi tamamladım. Buraya kadar her şey normal e bir soruna denk gelmeden ilerledim ama testlerim sırasında formun ilk sayfası haricinde başka bir sayfadayken kayıt butonuna tıkladıktan sonra hep ilk sekmeyi açıp mevcut konumumu kaybettiğini gördüm. Bunu kullanıcılarım için UX sorunu olarak değerlendirdim ve çözüm üretmeye çalıştım.

Öncelikle sorunun nedenine bakmamız lazım. Sorun tamamen Livewire yapısının nasıl çalıştığından kaynaklanıyor. Livewire component içinde herhangi bir değişiklik olduğunda veya bilinçli olarak component render işlemi her tetiklendiğinde mevcut HTML yapısı Livewire tarafından yeniden oluşturulup ilgili içerik güncel verilerle değiştirildikten sonra sayfa içindeki component yapısı backend tarafından gelen yeni HTML verisiyle değiştiriliyor. Bu süreç Livewire yapısı gereği hep böyledir.

Sorun tam olarak burada ortaya çıkıyor. Bootstrap tab değişikliklerini hafızada tutacak bir yapıya sahip değil. Olsa da Livewire bunu önemsemez ve kendi içinde oluşturduğu en güncel HTML yapısında bir değişiklik yaparken her zaman ilk sekme için yazılmış olan active sınıfını göreceğinden dolayı hangi sekmede kaldığımızı anlayamıyor ve render sonrasında ilk sekme aktif olarak görünüyor.

Bu sorunu çözmenin yolu ise tab ve content için oluşturduğumuz HTML elemanlarına wire:ignore ve wire:ignore.self eklemektir.

Sekmelerdeki <li> elemanlarına wire:ignore ekleyerek render sırasında o HTML nesnesinin göz ardı edilmesini sağlıyoruz. Ardından içeriklerini oluşturduğumuz div elemanına ise wire:ignore.self ekleyerek sadece elemanın kendisinde olan değişiklikleri göz ardı etmesini sağlıyoruz. Böylelikle o sekme içinde olan diğer HTML ve Livewire elemanları bu durumdan etkilenmeyerek olağan çalışmasına devam edebiliyor.

Örnek olarak bu kodu inceleyebilirsiniz.

Faydalı olması dileğiyle..

Bir sonraki yazıda görüşmek üzere.