Pernah mengalami tombol "Salin ke Clipboard" yang tiba-tiba tidak berfungsi? Atau pengguna mengeluh bahwa tekanannya menempelkan konten yang salah? Masalah ini sering kali muncul pada aplikasi web yang menggunakan navigator.clipboard.writeText() setelah operasi async seperti fetch.
Bug ini sangat halus karena tidak menghasilkan error apa pun. Kode berjalan normal di lingkungan pengembangan, QA pun tidak menemukan masalah. Namun setelah beberapa minggu di produksi, tiket support mulai masuk: pengguna mengklik tombol salin, menempelkan ke aplikasi lain, dan mendapatkan konten clipboard yang lama — bukan link atau teks yang baru saja diminta.
Penyebabnya ada pada cara kerja navigator.clipboard.writeText(). API ini membutuhkan user activation — artinya browser hanya mengizinkan akses clipboard sebagai respons langsung terhadap interaksi pengguna (klik, tekan tombol). Ketika Anda menambahkan await antara event klik dan pemanggilan clipboard, konteks user activation sudah hilang. Browser secara diam-diam menolak akses, dan clipboard tetap berisi data sebelumnya.
Solusinya sederhana: panggil navigator.clipboard.writeText() sebelum operasi async, atau simpan nilai yang akan disalin terlebih dahulu baru kemudian lakukan fetch. Alternatifnya, gunakan document.execCommand('copy') sebagai fallback yang lebih kompatibel. Yang terpenting, jangan pernah meletakkan await di antara trigger user dan akses clipboard.
Sumber asli: dev.to