Bug 1431368 - Change from keypress to keydown per standards change. r?mattn
MozReview-Commit-ID: phprPvOfuU
--- a/toolkit/components/payments/res/components/rich-option.js
+++ b/toolkit/components/payments/res/components/rich-option.js
@@ -9,55 +9,51 @@
*/
/* global ObservedPropertiesMixin */
/* exported RichOption */
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) {
switch (event.type) {
case "click": {
this.onClick(event);
break;
}
- case "keypress": {
- this.onKeyPress(event);
+ case "keydown": {
+ this.onKeyDown(event);
break;
}
}
}
onClick(event) {
if (this.closest("rich-select").open &&
!this.disabled &&
event.button == 0) {
for (let option of this.parentNode.children) {
option.selected = option == this;
}
}
}
- onKeyPress(event) {
+ onKeyDown(event) {
if (!this.disabled &&
event.which == 13 /* Enter */) {
for (let option of this.parentNode.children) {
option.selected = option == this;
}
}
}
--- a/toolkit/components/payments/res/components/rich-select.js
+++ b/toolkit/components/payments/res/components/rich-select.js
@@ -19,17 +19,17 @@ class RichSelect extends ObservedPropert
];
}
constructor() {
super();
this.addEventListener("blur", this);
this.addEventListener("click", this);
- this.addEventListener("keypress", this);
+ this.addEventListener("keydown", this);
}
connectedCallback() {
this.setAttribute("tabindex", "0");
this.render();
}
get popupBox() {
@@ -45,18 +45,18 @@ class RichSelect extends ObservedPropert
case "blur": {
this.onBlur(event);
break;
}
case "click": {
this.onClick(event);
break;
}
- case "keypress": {
- this.onKeyPress(event);
+ case "keydown": {
+ this.onKeyDown(event);
break;
}
}
}
onBlur(event) {
if (event.target == this) {
this.open = false;
@@ -65,17 +65,17 @@ class RichSelect extends ObservedPropert
onClick(event) {
if (!this.disabled &&
event.button == 0) {
this.open = !this.open;
}
}
- onKeyPress(event) {
+ onKeyDown(event) {
if (event.key == " ") {
this.open = !this.open;
} else if (event.key == "ArrowDown") {
let selectedOption = this.selectedOption;
let next = selectedOption.nextElementSibling;
if (next) {
next.selected = true;
selectedOption.selected = false;
--- a/toolkit/components/payments/test/mochitest/test_rich_select.html
+++ b/toolkit/components/payments/test/mochitest/test_rich_select.html
@@ -93,18 +93,18 @@ function get_selected_clone() {
function is_visible(element, message) {
ok(!isHidden(element), message);
}
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() {
ok(option1, "option1 exists");
let addressLine = option1.querySelector(".addressLine");
/* eslint-disable max-len */
is(addressLine.textContent,
`${option1.addressLine} ${option1.city} ${option1.region} ${option1.postalCode} ${option1.country}`);
@@ -179,73 +179,73 @@ add_task(async function test_up_down_key
ok(select1, "select1 exists");
ok(option1.selected, "option 1 should be selected by default");
ok(!select1.open, "select should not be open before focusing");
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");
// Wait for any mutation observer notifications to fire before exiting.
await Promise.resolve();
openObserver.disconnect();
});
add_task(async function test_open_close_from_keyboard() {
select1.focus();
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");
});
add_task(async function test_clicking_on_options_maintain_one_item_always_selected() {
ok(!select1.open, "select should be closed by default");
ok(option1.selected, "option 1 should be selected by default");
select1.click();
ok(select1.open, "select should now be open");