allows keyboard to scroll search result list

DataUSA · Apr 25, 2019 · 65b8712 · 65b8712
1 parent 34e9d82
commit 65b8712
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/app/toCanon/Search.jsx b/app/toCanon/Search.jsx
@@ -105,14 +105,28 @@ class Search extends Component {
 
             const currentIndex = [].indexOf.call(results, highlighted);
 
+            let newHighlight = false;
             if (key === DOWN && currentIndex < results.length - 1) {
-              results[currentIndex + 1].classList.add("highlighted");
+              newHighlight = results[currentIndex + 1];
               highlighted.classList.remove("highlighted");
             }
             else if (key === UP) {
-              if (currentIndex > 0) results[currentIndex - 1].classList.add("highlighted");
+              if (currentIndex > 0) newHighlight = results[currentIndex - 1];
               highlighted.classList.remove("highlighted");
             }
+
+            if (newHighlight) {
+              newHighlight.classList.add("highlighted");
+              const parent = newHighlight.parentNode;
+              const top = newHighlight.offsetTop;
+              const height = newHighlight.offsetHeight;
+              const pHeight = parent.offsetHeight;
+              const pTop = parent.scrollTop;
+              const diff = top + height - (pTop + pHeight);
+              if (diff > 0) parent.scrollTop += diff;
+              else if (top < pTop) parent.scrollTop = top;
+            }
+
           }
         }