Studi Kasus: Perburuan Bug 'Lompatan Halaman'—Kisah di Balik Perombakan Fitur Pencarian IR Web

Setiap pengembang mengenal perasaan itu: sebuah bug yang tampaknya sepele, tetapi menolak untuk mati. Di IR Web, kami baru saja menyelesaikan perburuan epik terhadap bug yang sangat mengganggu: setiap kali pengguna mengklik kolom pencarian, seluruh halaman akan "melompat" atau bergeser sesaat.

Ini bukan hanya gangguan visual, ini adalah pengikis pengalaman pengguna (UX) yang membuat interaksi terasa goyah dan tidak profesional. Ini adalah kisah transparan kami dalam mendiagnosis, gagal, dan akhirnya menaklukkan bug tersebut.

Babak 1: Gejala dan Diagnosis yang Salah

Masalahnya tampak sederhana. Klik input pencarian di header, dan halaman melompat. Naluri pertama kami sebagai pengembang adalah mencari perubahan visual yang terjadi saat input mendapatkan focus.

Hipotesis #1: Masalah pada CSS focus Kami berpikir, "Mungkin border atau ring yang muncul saat focus menyebabkan reflow." Kami menghabiskan waktu menyesuaikan properti CSS ini, hanya untuk melihat bug itu tetap ada. Gagal.

Hipotesis #2: Konflik dengan Komponen Lain Kami kemudian mencurigai komponen BackToTop yang muncul saat menggulir. "Mungkin kemunculannya saat focus memicu sesuatu?" Kami mencoba menonaktifkannya. Hasilnya? Nihil. Bug itu masih menertawakan kami. Gagal lagi.

Setiap perbaikan terasa seperti hanya mengobati gejala, bukan penyakitnya. Kami terjebak dalam lingkaran debugging yang membuat frustrasi.

Babak 2: Momen 'Aha!' dan Diagnosis yang Benar

Titik balik datang dari sebuah petunjuk sederhana namun krusial: "Header kita kan sticky."

Petunjuk ini mengubah segalanya. Kami berhenti melihat input itu sendiri dan mulai melihat lingkungannya. Header kami memiliki properti CSS position: sticky. Ini adalah akar masalahnya.

Diagnosis Definitif: Ketika sebuah elemen di dalam kontainer sticky menerima focus, browser secara otomatis mencoba memastikan elemen tersebut terlihat sepenuhnya. Untuk melakukannya, ia memicu penyesuaian scroll mikro, bahkan jika halaman tidak dapat digulir. "Scroll" internal inilah yang menyebabkan perhitungan ulang tata letak (reflow) di seluruh halaman, yang kita lihat sebagai "lompatan".

Kami tidak melawan bug CSS. Kami melawan perilaku default browser yang dirancang untuk aksesibilitas.

Babak 3: Solusi Radikal—Mengganti Mekanisme, Bukan Memperbaiki

Jika kita tidak bisa mengubah perilaku fundamental browser, kita harus mengubah pendekatan kita. Memperbaiki input yang ada tidak akan pernah berhasil. Kami memutuskan untuk melakukan sesuatu yang lebih radikal: membuang seluruh mekanisme input di header dan menggantinya dengan sesuatu yang secara inheren kebal terhadap masalah ini.

Solusi Final: Dialog Modal

1. Hapus Input dari Header: Form pencarian di header kami hilangkan seluruhnya.
2. Ganti dengan Ikon: Sebagai gantinya, kami hanya menempatkan sebuah ikon Search.
3. Implementasikan Dialog Modal: Saat ikon diklik, sebuah modal (jendela pop-up) yang terisolasi muncul di tengah layar. Modal ini, yang berada di position: fixed, sepenuhnya terpisah dari alur tata letak halaman utama.
4. Pencarian di Dalam Modal: Interaksi apa pun di dalam modal—termasuk focus pada input—tidak akan pernah memengaruhi atau memicu reflow pada halaman di belakangnya.

Kesimpulan: Pelajaran yang Didapat

Perjalanan ini mengajarkan kami pelajaran berharga:

• Jangan hanya lihat elemennya, lihat lingkungannya. Konteks (sticky header) ternyata lebih penting daripada elemen itu sendiri (input).
• Pahami perilaku browser. Terkadang kita tidak melawan kode kita sendiri, tetapi perilaku default browser.
• Jangan takut untuk mengubah pendekatan. Jika sebuah solusi terus-menerus gagal, mungkin itu pertanda bahwa kita mencoba memperbaiki masalah yang salah. Terkadang, solusi terbaik adalah mengganti seluruh mekanisme.

Hasilnya, kami tidak hanya berhasil membasmi bug yang mengganggu, tetapi kami juga secara tidak sengaja meningkatkan UX situs kami dengan fitur pencarian modal yang lebih bersih, modern, dan profesional. Sebuah kemenangan yang didapat dengan susah payah.