bug: stop scrolling page when moving through search results

[apps/outliner/.git] / src / search.ts

diff --git a/src/search.ts b/src/search.ts
index 9bbff3c92fb3414de3bbe43db690294064abb011..0329c2f408a9c52016c6f05b7f36df362ea71a3a 100644 (file)
--- a/src/search.ts
+++ b/src/search.ts
@@ -2,6 +2,7 @@ import { create, insert, insertBatch, search } from '@lyrasearch/lyra';
 import { map } from 'lodash';
 import { OutlineNode } from 'outline';
 import keyboardJS from 'keyboardjs';
+import {isVisible} from 'dom';
 
 const searchModal = `
 <div class="modal">
@@ -38,19 +39,27 @@ export class Search {
       });
 
       keyboardJS.bind('down', e => {
+        e.preventDefault();
         document.getElementById('search-query').blur();
         const el = document.querySelector('.search-result.selected');
         if(el.nextElementSibling) {
           el.classList.remove('selected');
           el.nextElementSibling.classList.add('selected');
+          if(!isVisible(el.nextElementSibling as HTMLElement)) {
+            el.nextElementSibling.scrollIntoView();
+          }
         }
       });
 
-      keyboardJS.bind('up', () => {
+      keyboardJS.bind('up', e => {
+        e.preventDefault();
         const el = document.querySelector('.search-result.selected');
         if(el.previousElementSibling) {
           el.classList.remove('selected');
           el.previousElementSibling.classList.add('selected');
+          if(!isVisible(el.previousElementSibling as HTMLElement)) {
+            el.previousElementSibling.scrollIntoView();
+          }
         }
       })