Bug 1431368 - Change from keypress to keydown per standards change. r?mattn draft
authorJared Wein <jwein@mozilla.com>
Thu, 18 Jan 2018 06:29:54 -0500
changeset 723176 2fd7fd8dc3b396f0634bce864ec1555d0e353acd
parent 722753 7861a7df0c4dda3414529637d638c68724e3521a
child 723177 e414c52b81ffe6a20ddbd17420a209f8a1788954
push id96344
push userbmo:jaws@mozilla.com
push dateMon, 22 Jan 2018 17:17:23 +0000
reviewersmattn
bugs1431368
milestone59.0a1
Bug 1431368 - Change from keypress to keydown per standards change. r?mattn MozReview-Commit-ID: phprPvOfuU
toolkit/components/payments/res/components/rich-option.js
toolkit/components/payments/res/components/rich-select.js
toolkit/components/payments/test/mochitest/test_rich_select.html
--- 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");