Fixes webcompat#1489 - Adds functionality for when the user presses E…

…nter inside label editor input.
brizental · May 4, 2017 · a7b1dfe · a7b1dfe
1 parent 5a66af1
commit a7b1dfe
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/webcompat/static/css/development/components/label-editor.css b/webcompat/static/css/development/components/label-editor.css
@@ -121,14 +121,13 @@
       padding: .5em .3125em;
     }
 
-      .wc-LabelEditor--list-item:last-child {
+      .wc-LabelEditor-list-item:last-child {
           border-bottom:1px solid #ddd;
       }
 
       /* event */
-      .wc-LabelEditor--list-item:focus,
-      .wc-LabelEditor--list-item:hover,
-      .wc-LabelEditor--list-item:active {
+      .wc-LabelEditor-list-item:focus,
+      .wc-LabelEditor-list-item.focused {
           outline-width: 2px;
           outline-style: solid;
           outline-color: Highlight;

diff --git a/webcompat/static/js/lib/labels.js b/webcompat/static/js/lib/labels.js
@@ -95,6 +95,7 @@ issues.LabelEditorView = Backbone.View.extend({
     "keyup": "closeEditor",    
     "keyup .wc-LabelEditor-search": "filterLabels",
     "keyup .wc-LabelEditor-list-item": "checkUncheckLabels",
+    "keydown .wc-LabelEditor-list-item:visible:first input": "removeFocus",
     "keydown .wc-LabelEditor-list-item:visible:last": "backToTop"
   },
   keyboardEvents: {
@@ -194,6 +195,16 @@ issues.LabelEditorView = Backbone.View.extend({
     }
   },
   filterLabels: _.debounce(function(e) {
+    setTimeout(function() {
+      if (e.keyCode === 13) {
+        $(".wc-LabelEditor-list-item:visible:first").focus();
+        // if you call the focus() function in a label element,'
+        // the focues automatically goes ato the input.
+        // that's why we need to add the focused class.
+        $(".wc-LabelEditor-list-item:visible:first").addClass("focused");
+      }
+    }, 100);
+
     var escape = function(s) {
       return s.replace(/[-\/\\^$*+?:.()|[\]{}]/g, "\\$&");
     };
@@ -214,7 +225,14 @@ issues.LabelEditorView = Backbone.View.extend({
   }, 100),
   checkUncheckLabels: _.debounce(function(e) {
     if (e.keyCode === 13) {
-      $(e.target).find("input").click();
+      $(e.target).click();
+    }
+  }, 100),
+  removeFocus: _.debounce(function(e) {
+    console.log(e.keyCode);
+    if (e.keyCode === 9) {
+      console.log($(".wc-LabelEditor-list-item:visible:first").hasClass("focused"));
+      $(".wc-LabelEditor-list-item:visible:first").removeClass("focused");
     }
   }, 100),
   backToTop: _.debounce(function(e) {