Bug 1055085 - Clear input search on esc keydown. r=smaug,masayuki

emilio · emilio · commit a3456a90a9c4 · 2025-05-30T09:11:01.000Z
This matches Blink and WebKit, with the difference that this preserves the undo stack (which I think is useful and mitigates a bit the double-esc concerns Masayuki had in bug 1936648). Keydown because it matches both other engines, though I think keypress would've been more consistent... Differential Revision: https://phabricator.services.mozilla.com/D251563
diff --git a/browser/components/search/content/searchbar.js b/browser/components/search/content/searchbar.js
@@ -795,6 +795,7 @@
           } else {
             this.textbox.select();
           }
+          aEvent.preventDefault();
           return true;
         }
         return false;
diff --git a/dom/html/HTMLInputElement.cpp b/dom/html/HTMLInputElement.cpp
@@ -3839,6 +3839,18 @@ nsresult HTMLInputElement::PostHandleEvent(EventChainPostVisitor& aVisitor) {
             EventStateManager::SetActiveManager(
                 aVisitor.mPresContext->EventStateManager(), this);
           }
+
+          if (keyEvent->mKeyCode == NS_VK_ESCAPE && keyEvent->IsTrusted() &&
+              !keyEvent->DefaultPrevented() && !keyEvent->mIsComposing &&
+              mType == FormControlType::InputSearch &&
+              StaticPrefs::dom_forms_search_esc() && !IsDisabledOrReadOnly() &&
+              !IsValueEmpty()) {
+            // WebKit and Blink both also do this on keydown, see:
+            //   https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/forms/search_input_type.cc;l=82;drc=04f1f437aaefbd3bb4e0cdb5911c1ea1e3eb3557;bpv=1;bpt=1
+            //   https://searchfox.org/wubkat/rev/717f9adc97dd16bf639d27addbe0faf420f7dfce/Source/WebCore/html/SearchInputType.cpp#145
+            SetUserInput(EmptyString(), *NodePrincipal());
+            aVisitor.mEventStatus = nsEventStatus_eConsumeNoDefault;
+          }
           break;
         }
 
diff --git a/modules/libpref/init/StaticPrefList.yaml b/modules/libpref/init/StaticPrefList.yaml
@@ -3042,6 +3042,13 @@
   value: false
   mirror: always
 
+# This pref controls whether <input type=search> clears its value on Esc
+# keydown.
+- name: dom.forms.search.esc
+  type: bool
+  value: true
+  mirror: always
+
 # The interval in milliseconds between two Escape key events where the second
 # key event will exit fullscreen, even if it is consumed.
 - name: dom.fullscreen.force_exit_on_multiple_escape_interval
diff --git a/testing/web-platform/mozilla/tests/dom/input-search-esc.html b/testing/web-platform/mozilla/tests/dom/input-search-esc.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Esc clears search input</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<input type=search>
+<script>
+const kEsc = '\uE00C';
+let input = document.querySelector("input");
+promise_test(async function() {
+  input.focus();
+  await test_driver.send_keys(input, "abc");
+  assert_equals(input.value, "abc");
+  let inputEvent = false;
+  let changeEvent = false;
+  input.addEventListener("input", function() {
+    inputEvent = true;
+  }, { once: true });
+  await test_driver.send_keys(input, kEsc);
+  assert_equals(input.value, "", "should've been cleared");
+  assert_true(inputEvent, "input event should've fired");
+  await test_driver.send_keys(input, "abc");
+  assert_equals(input.value, "abc", "Should've been able to type again");
+  input.readOnly = true;
+  await test_driver.send_keys(input, kEsc);
+  assert_equals(input.value, "abc", "Shouldn't have cleared on readonly input");
+});
+</script>

Original file line number	Diff line number	Diff line change
`@@ -795,6 +795,7 @@`
`795`	`795`	`} else {`
`796`	`796`	`this.textbox.select();`
`797`	`797`	`}`
	`798`	`+ aEvent.preventDefault();`
`798`	`799`	`return true;`
`799`	`800`	`}`
`800`	`801`	`return false;`