Bug 1575046 - Improve tab key behavior when entering address lists. r=mkmelin a=jorgk
authorPaul Morris <paul@thunderbird.net>
Tue, 27 Aug 2019 10:55:40 -0400
changeset 79064 1ed138b39b4fceb2c8de1757d8ccb35b22a6cd1d
parent 79063 aef81082399d8a099f4715bc9120fd2ac6764f3a
child 79065 2e68d86cbf9fb8e95b821daa21a5b46b907d3521
push id9345
push userkaie@kuix.de
push dateFri, 20 Sep 2019 05:14:40 +0000
treeherdertry-comm-central@b9101c33b5e5 [default view] [failures only]
reviewersmkmelin, jorgk
bugs1575046
Bug 1575046 - Improve tab key behavior when entering address lists. r=mkmelin a=jorgk When a list of comma-separated addresses is entered when editing a mailing list and the tab key is pressed, split the addresses into separate rows before shifting focus to the cancel button.
mail/components/compose/content/addressingWidgetOverlay.js
--- a/mail/components/compose/content/addressingWidgetOverlay.js
+++ b/mail/components/compose/content/addressingWidgetOverlay.js
@@ -904,75 +904,87 @@ function awSetAutoComplete(rowNumber) {
 }
 
 function awRecipientOnFocus(inputElement) {
   inputElement.select();
 }
 
 /**
  * Handles keypress events for the email address inputs (that auto-fill)
- * in the Address Book Mailing List dialogs.
+ * in the Address Book Mailing List dialogs. When a comma-separated list of
+ * addresses is entered on one row, split them into one address per row. Only
+ * add a new blank row on "Enter" key. On "Tab" key focus moves to the "Cancel"
+ * button.
  *
- * @param event       The DOM keypress event
- * @param element     The element that triggered the keypress event
+ * @param {KeyboardEvent} event  The DOM keypress event.
+ * @param {Element} element      The element that triggered the keypress event.
  */
 function awAbRecipientKeyPress(event, element) {
-  // Only add new row when enter was hit (not for tab/autocomplete select).
-  if (event.key == "Enter") {
-    let inputElement = element;
+  if (event.key != "Enter" && event.key != "Tab") {
+    return;
+  }
 
-    if (element.value) {
-      // Prevent the dialog from closing.
-      event.preventDefault();
+  if (!element.value) {
+    if (event.key == "Enter") {
+      awReturnHit(element);
+    }
+  } else {
+    let inputElement = element;
+    let originalRow = awGetRowByInputElement(element);
+    let row;
+    let addresses = MailServices.headerParser.makeFromDisplayAddress(
+      element.value
+    );
 
-      let originalRow = awGetRowByInputElement(element);
-      let row;
-      let addresses = MailServices.headerParser.makeFromDisplayAddress(
-        element.value
-      );
+    if (addresses.length > 1) {
+      // Collect any existing addresses from the following rows so we don't
+      // simply overwrite them.
+      row = originalRow + 1;
+      inputElement = awGetInputElement(row);
 
-      if (addresses.length > 1) {
-        // Collect any existing addresses from the following rows so we don't
-        // simply overwrite them.
-        row = originalRow + 1;
+      while (inputElement) {
+        if (inputElement.value) {
+          addresses.push(inputElement.value);
+          inputElement.value = "";
+        }
+        row += 1;
         inputElement = awGetInputElement(row);
+      }
+    }
 
-        while (inputElement) {
-          if (inputElement.value) {
-            addresses.push(inputElement.value);
-            inputElement.value = "";
-          }
-          row += 1;
-          inputElement = awGetInputElement(row);
+    // Insert the addresses, adding new rows if needed.
+    row = originalRow;
+    let needNewRows = false;
+
+    for (let address of addresses) {
+      if (needNewRows) {
+        inputElement = awAppendNewRow(false);
+      } else {
+        inputElement = awGetInputElement(row);
+        if (!inputElement) {
+          needNewRows = true;
+          inputElement = awAppendNewRow(false);
         }
       }
 
-      // Insert the addresses, adding new rows if needed.
-      row = originalRow;
-      let needNewRows = false;
-
-      for (let address of addresses) {
-        if (needNewRows) {
-          inputElement = awAppendNewRow(false);
-        } else {
-          inputElement = awGetInputElement(row);
-          if (!inputElement) {
-            needNewRows = true;
-            inputElement = awAppendNewRow(false);
-          }
-        }
-
-        if (inputElement) {
-          inputElement.value = address;
-        }
-        row += 1;
+      if (inputElement) {
+        inputElement.value = address;
       }
+      row += 1;
     }
 
-    awReturnHit(inputElement);
+    if (event.key == "Enter") {
+      // Prevent the dialog from closing. "Enter" inserted a new row instead.
+      event.preventDefault();
+      awReturnHit(inputElement);
+    } else if (event.key == "Tab") {
+      // Focus the last row to let "Tab" move focus to the "Cancel" button.
+      let lastRow = row - 1;
+      awGetInputElement(lastRow).focus();
+    }
   }
 }
 
 /**
  * Handles keypress events for the email address inputs (that auto-fill)
  * in the Message Compose window.
  *
  * @param event       The DOM keypress event