Keyboar selection in list using arrow keys

chrome/script.browserify.js

@@ -43,34 +43,35 @@ function view() {
     }
   }
 
-  return [
-    // search form
-    m("div.search", [
-      m(
-        "form",
-        {
-          onsubmit: submitSearchForm
-        },
-        [
-          m("input", {
-            type: "text",
-            name: "s",
-            placeholder: "Search password..",
-            autocomplete: "off",
-            autofocus: "on"
-          }),
-          m("input", {
-            type: "submit",
-            value: "Search",
-            style: "display: none;"
-          })
-        ]
-      )
-    ]),
-
-    // results
-    m("div.results", results)
-  ];
+  return m('div.container', { onkeydown: keyHandler }, [
+      // search form
+      m("div.search", [
+        m(
+          "form",
+          {
+            onsubmit: submitSearchForm
+          },
+          [
+            m("input", {
+              type: "text",
+              id: "search-field",
+              name: "s",
+              placeholder: "Search password..",
+              autocomplete: "off",
+              autofocus: "on"
+            }),
+            m("input", {
+              type: "submit",
+              value: "Search",
+              style: "display: none;"
+            })
+          ]
+        )
+      ]),
+
+      // results
+      m("div.results", results)
+    ]);
 }
 
 function submitSearchForm(e) {
@@ -149,3 +150,30 @@ function getLoginData() {
     }
   );
 }
+
+// This function uses regular DOM
+// therefore there is no need for redraw calls
+function keyHandler(e) {
+  switch (e.key) {
+  case 'ArrowUp':
+    switchFocus('button.login:last-child', 'previousElementSibling');
+    break;
+
+  case 'ArrowDown':
+    switchFocus('button.login:first-child', 'nextElementSibling');
+    break;
+  }
+}
+
+function switchFocus(firstSelector, nextNodeAttr) {
+  var inputId = 'search-field';
+  var newActive = document.activeElement.id === inputId ?
+      document.querySelector(firstSelector) :
+      document.activeElement[nextNodeAttr];
+
+  if (newActive) {
+    newActive.focus();
+  } else {
+    document.getElementById(inputId).focus();
+  }
+}