Keyboard Events — Shortcuts & Key Codes

Tujuan

• Tekan S → buka overlay
• Tekan Escape → tutup overlay
• Mencegah event berulang saat key ditahan

---

Key Codes

Key	Code	Fungsi
S	83	Buka search overlay
Escape	27	Tutup search overlay

Cara Menemukan Key Code

keypressDispatcher(e) {
  console.log(e.keyCode);  // Tekan key apa saja → lihat code di console
}

---

Implementasi

1. Event Listener di Constructor

constructor() {
  // ... properti lain
  this.isOverlayOpen = false;
  this.events();
}

events() {
  // ... event click
  $(document).on("keydown", this.keypressDispatcher.bind(this));
}

2. Key Press Dispatcher

keypressDispatcher(e) {
  // S key — buka overlay (hanya jika belum terbuka & tidak sedang typing di input)
  if (e.keyCode == 83 && !this.isOverlayOpen && !$("input, textarea").is(":focus")) {
    this.openOverlay();
  }

  // Escape — tutup overlay (hanya jika sedang terbuka)
  if (e.keyCode == 27 && this.isOverlayOpen) {
    this.closeOverlay();
  }
}

3. Update isOverlayOpen di Methods

openOverlay() {
  this.searchOverlay.addClass("search-overlay--active");
  $("body").addClass("body-no-scroll");
  this.isOverlayOpen = true;
}

closeOverlay() {
  this.searchOverlay.removeClass("search-overlay--active");
  $("body").removeClass("body-no-scroll");
  this.isOverlayOpen = false;
}

---

keydown vs keyup

Event	Kapan Fire	Berulang?
keydown	Saat key ditekan (instant)	Ya — terus fire selama key ditahan
keyup	Saat key dilepas	Tidak — hanya sekali

Solusi: Gunakan isOverlayOpen sebagai guard

Meskipun pakai keydown (yang berulang), method hanya dipanggil sekali karena:

• openOverlay → set isOverlayOpen = true → kondisi !this.isOverlayOpen jadi false → tidak dipanggil lagi
• closeOverlay → set isOverlayOpen = false → kondisi this.isOverlayOpen jadi false → tidak dipanggil lagi

---

Proteksi Input Field

!$("input, textarea").is(":focus")

Jika user sedang mengetik di input/textarea lain (misal form Contact Us), menekan S tidak akan membuka overlay. Ini mencegah gangguan UX.