Emit an input event primer-text-field#clearContents. (#3062)

Co-authored-by: Cameron Dutro <camertron@gmail.com>
primer · Sep 10, 2024 · b45ef04 · b45ef04
1 parent c8dfea4
commit b45ef04
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/.changeset/quiet-vans-unite.md b/.changeset/quiet-vans-unite.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+Trigger an input event when the primer-text-field clear button is pressed.
diff --git a/lib/primer/forms/primer_text_field.ts b/lib/primer/forms/primer_text_field.ts
@@ -57,6 +57,7 @@ export class PrimerTextFieldElement extends HTMLElement {
   clearContents() {
     this.inputElement.value = ''
     this.inputElement.focus()
+    this.inputElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: false }))
   }
 
   clearError(): void {

diff --git a/test/system/alpha/text_field_test.rb b/test/system/alpha/text_field_test.rb
@@ -12,8 +12,20 @@ def test_clear_button
       find("input[type=text]").fill_in(with: "foobar")
       assert_equal find("input[type=text]").value, "foobar"
 
+      evaluate_multiline_script(<<~JS)
+        window.inputTriggered = false
+
+        document.querySelector('input[type=text]').addEventListener('input', (_event) => {
+          window.inputTriggered = true
+        })
+      JS
+
+      refute page.evaluate_script("window.inputTriggered")
+
       find("button").click
       assert_equal find("input[type=text]").value, ""
+
+      assert page.evaluate_script("window.inputTriggered")
     end
 
     def test_auto_check_error