From 530644f9491dc49ec0238c10a7ad118b5f372852 Mon Sep 17 00:00:00 2001
From: Richard Gibson <richard.gibson@gmail.com>
Date: Sun, 3 May 2026 04:02:53 -0400
Subject: [PATCH] Improve searchbox event handling

* use "input" rather than "keyup" to respond to value changes, catching
  previously ignored interactions such as Paste and avoiding the need to
  special-case Enter/Tab/etc. since those don't trigger an "input" event
* call `preventDefault` in the synchronous listener rather than in the debounced
  function when it's too late
* drop attempted "/" suppression, since it wasn't working anyway and apparently
  hasn't been a problem
* consolidate "keydown"/"input" handling into a single debounced listener that
  switches on event type for deciding its behavior
---
 js/menu.js                                    | 43 ++++++++-----------
 .../generated-reference/assets-inline.html    | 43 ++++++++-----------
 2 files changed, 38 insertions(+), 48 deletions(-)

diff --git a/js/menu.js b/js/menu.js
index 4b1a8515..da5e68c8 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -9,14 +9,17 @@ function Search(menu) {
 
   document.addEventListener('keydown', this.documentKeydown.bind(this));
 
-  this.$searchBox.addEventListener(
-    'keydown',
-    debounce(this.searchBoxKeydown.bind(this), { stopPropagation: true }),
-  );
-  this.$searchBox.addEventListener(
-    'keyup',
-    debounce(this.searchBoxKeyup.bind(this), { stopPropagation: true }),
-  );
+  let requestHandleSearchBoxEvent = debounce(this.handleSearchBoxEvent.bind(this));
+
+  this.$searchBox.addEventListener('keydown', e => {
+    e.stopPropagation();
+    if (e.key === 'Enter') e.preventDefault();
+    requestHandleSearchBoxEvent(e);
+  });
+  this.$searchBox.addEventListener('input', e => {
+    e.stopPropagation();
+    requestHandleSearchBoxEvent(e);
+  });
 
   // Perform an initial search if the box is not empty.
   if (this.$searchBox.value) {
@@ -54,23 +57,15 @@ Search.prototype.documentKeydown = function (e) {
   }
 };
 
-Search.prototype.searchBoxKeydown = function (e) {
-  e.stopPropagation();
-  e.preventDefault();
-  if (e.keyCode === 191 && e.target.value.length === 0) {
-    e.preventDefault();
-  } else if (e.keyCode === 13) {
-    e.preventDefault();
-    this.selectResult();
-  }
-};
-
-Search.prototype.searchBoxKeyup = function (e) {
-  if (e.keyCode === 13 || e.keyCode === 9) {
-    return;
+Search.prototype.handleSearchBoxEvent = function (e) {
+  switch (e.type) {
+    case 'keydown':
+      if (e.key === 'Enter') this.selectResult();
+      break;
+    case 'input':
+      this.search(e.target.value);
+      break;
   }
-
-  this.search(e.target.value);
 };
 
 Search.prototype.triggerSearch = function () {
diff --git a/test/baselines/generated-reference/assets-inline.html b/test/baselines/generated-reference/assets-inline.html
index fe3bb564..9f1493f1 100644
--- a/test/baselines/generated-reference/assets-inline.html
+++ b/test/baselines/generated-reference/assets-inline.html
@@ -93,14 +93,17 @@
 
   document.addEventListener('keydown', this.documentKeydown.bind(this));
 
-  this.$searchBox.addEventListener(
-    'keydown',
-    debounce(this.searchBoxKeydown.bind(this), { stopPropagation: true }),
-  );
-  this.$searchBox.addEventListener(
-    'keyup',
-    debounce(this.searchBoxKeyup.bind(this), { stopPropagation: true }),
-  );
+  let requestHandleSearchBoxEvent = debounce(this.handleSearchBoxEvent.bind(this));
+
+  this.$searchBox.addEventListener('keydown', e => {
+    e.stopPropagation();
+    if (e.key === 'Enter') e.preventDefault();
+    requestHandleSearchBoxEvent(e);
+  });
+  this.$searchBox.addEventListener('input', e => {
+    e.stopPropagation();
+    requestHandleSearchBoxEvent(e);
+  });
 
   // Perform an initial search if the box is not empty.
   if (this.$searchBox.value) {
@@ -138,23 +141,15 @@
   }
 };
 
-Search.prototype.searchBoxKeydown = function (e) {
-  e.stopPropagation();
-  e.preventDefault();
-  if (e.keyCode === 191 && e.target.value.length === 0) {
-    e.preventDefault();
-  } else if (e.keyCode === 13) {
-    e.preventDefault();
-    this.selectResult();
-  }
-};
-
-Search.prototype.searchBoxKeyup = function (e) {
-  if (e.keyCode === 13 || e.keyCode === 9) {
-    return;
+Search.prototype.handleSearchBoxEvent = function (e) {
+  switch (e.type) {
+    case 'keydown':
+      if (e.key === 'Enter') this.selectResult();
+      break;
+    case 'input':
+      this.search(e.target.value);
+      break;
   }
-
-  this.search(e.target.value);
 };
 
 Search.prototype.triggerSearch = function () {