diff --git a/.changeset/quiet-vans-unite.md b/.changeset/quiet-vans-unite.md new file mode 100644 index 0000000000..111f13fad3 --- /dev/null +++ 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 index a7bfcb1e74..bce11220e6 100644 --- 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 index 6d4e5a65b3..caf39c29ac 100644 --- 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