diff --git a/toolkit/components/payments/res/components/rich-option.js b/toolkit/components/payments/res/components/rich-option.js index 9db0b0157d2b..11919c70fb4c 100644 --- a/toolkit/components/payments/res/components/rich-option.js +++ b/toolkit/components/payments/res/components/rich-option.js @@ -14,19 +14,15 @@ class RichOption extends ObservedPropertiesMixin(HTMLElement) { static get observedAttributes() { return ["selected", "hidden"]; } - constructor() { - super(); - - this.addEventListener("click", this); - this.addEventListener("keypress", this); - } - connectedCallback() { this.render(); let richSelect = this.closest("rich-select"); if (richSelect && richSelect.render) { richSelect.render(); } + + this.addEventListener("click", this); + this.addEventListener("keydown", this); } handleEvent(event) { @@ -35,8 +31,8 @@ class RichOption extends ObservedPropertiesMixin(HTMLElement) { this.onClick(event); break; } - case "keypress": { - this.onKeyPress(event); + case "keydown": { + this.onKeyDown(event); break; } } @@ -52,7 +48,7 @@ class RichOption extends ObservedPropertiesMixin(HTMLElement) { } } - onKeyPress(event) { + onKeyDown(event) { if (!this.disabled && event.which == 13 /* Enter */) { for (let option of this.parentNode.children) { diff --git a/toolkit/components/payments/res/components/rich-select.js b/toolkit/components/payments/res/components/rich-select.js index 9b2e5954138a..c11342c18be5 100644 --- a/toolkit/components/payments/res/components/rich-select.js +++ b/toolkit/components/payments/res/components/rich-select.js @@ -24,7 +24,7 @@ class RichSelect extends ObservedPropertiesMixin(HTMLElement) { this.addEventListener("blur", this); this.addEventListener("click", this); - this.addEventListener("keypress", this); + this.addEventListener("keydown", this); } connectedCallback() { @@ -50,8 +50,8 @@ class RichSelect extends ObservedPropertiesMixin(HTMLElement) { this.onClick(event); break; } - case "keypress": { - this.onKeyPress(event); + case "keydown": { + this.onKeyDown(event); break; } } @@ -70,7 +70,7 @@ class RichSelect extends ObservedPropertiesMixin(HTMLElement) { } } - onKeyPress(event) { + onKeyDown(event) { if (event.key == " ") { this.open = !this.open; } else if (event.key == "ArrowDown") { diff --git a/toolkit/components/payments/test/mochitest/test_rich_select.html b/toolkit/components/payments/test/mochitest/test_rich_select.html index 533ff1ba813e..e6daa6586f81 100644 --- a/toolkit/components/payments/test/mochitest/test_rich_select.html +++ b/toolkit/components/payments/test/mochitest/test_rich_select.html @@ -98,8 +98,8 @@ function is_hidden(element, message) { ok(isHidden(element), message); } -function dispatchKeyPress(key, keyCode) { - select1.dispatchEvent(new KeyboardEvent("keypress", {key, keyCode})); +function dispatchKeyDown(key, keyCode) { + select1.dispatchEvent(new KeyboardEvent("keydown", {key, keyCode})); } add_task(async function test_addressLine_combines_address_city_region_postalCode_country() { @@ -184,27 +184,27 @@ add_task(async function test_up_down_keys_change_selected_item() { select1.focus(); ok(!select1.open, "select should not be open after focusing"); - dispatchKeyPress("ArrowDown", 40); + dispatchKeyDown("ArrowDown", 40); ok(!option1.selected, "option 1 should no longer be selected"); ok(option2.selected, "option 2 should now be selected"); - dispatchKeyPress("ArrowDown", 40); + dispatchKeyDown("ArrowDown", 40); ok(!option2.selected, "option 2 should no longer be selected"); ok(option3.selected, "option 3 should now be selected"); - dispatchKeyPress("ArrowDown", 40); + dispatchKeyDown("ArrowDown", 40); ok(option3.selected, "option 3 should remain selected"); ok(!option1.selected, "option 1 should not be selected"); - dispatchKeyPress("ArrowUp", 38); + dispatchKeyDown("ArrowUp", 38); ok(!option3.selected, "option 3 should no longer be selected"); ok(option2.selected, "option 2 should now be selected"); - dispatchKeyPress("ArrowUp", 38); + dispatchKeyDown("ArrowUp", 38); ok(!option2.selected, "option 2 should no longer be selected"); ok(option1.selected, "option 1 should now be selected"); - dispatchKeyPress("ArrowUp", 38); + dispatchKeyDown("ArrowUp", 38); ok(option1.selected, "option 1 should remain selected"); ok(!option3.selected, "option 3 should not be selected"); @@ -219,28 +219,28 @@ add_task(async function test_open_close_from_keyboard() { ok(!select1.open, "select should not be open by default"); - dispatchKeyPress(" ", 32); + dispatchKeyDown(" ", 32); ok(select1.open, "select should now be open"); ok(option1.selected, "option 1 should be selected by default"); - dispatchKeyPress("ArrowDown", 40); + dispatchKeyDown("ArrowDown", 40); ok(!option1.selected, "option 1 should not be selected"); ok(option2.selected, "option 2 should now be selected"); ok(select1.open, "select should remain open"); - dispatchKeyPress("ArrowUp", 38); + dispatchKeyDown("ArrowUp", 38); ok(option1.selected, "option 1 should now be selected"); ok(!option2.selected, "option 2 should not be selected"); ok(select1.open, "select should remain open"); - dispatchKeyPress("Enter", 13); + dispatchKeyDown("Enter", 13); ok(option1.selected, "option 1 should now be selected"); ok(!select1.open, "select should be closed"); - dispatchKeyPress(" ", 32); + dispatchKeyDown(" ", 32); ok(select1.open, "select should now be open"); - dispatchKeyPress("Escape", 27); + dispatchKeyDown("Escape", 27); ok(!select1.open, "select should be closed"); });