fix: scroll searc results when overflow

markboard-io · May 13, 2023 · 619ed48 · 619ed48
1 parent c1f870c
commit 619ed48
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/imports/pages/Board/FileExplorerPanel/FindAnything/FindAnything.module.scss b/imports/pages/Board/FileExplorerPanel/FindAnything/FindAnything.module.scss
@@ -82,6 +82,7 @@
     position: absolute;
     top: calc(var(--margin-top) + var(--search-box-height) - var(--search-box-radius));
     padding-top: var(--search-box-radius);
+    max-height: calc(90vh - var(--margin-top));
     width: 600px;
     background-color: white;
     box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
@@ -111,10 +112,10 @@
 
   .SearchResultText {
     display: flex;
-    flex-direction: row;
     font-size: 0.8em;
     padding: 0 0.1em 0 0;
     color: rgb(163, 163, 163);
+    flex-wrap: wrap;
   }
 
   .SearchResultTexts {

diff --git a/imports/pages/Board/FileExplorerPanel/FindAnything/FindAnything.tsx b/imports/pages/Board/FileExplorerPanel/FindAnything/FindAnything.tsx
@@ -40,13 +40,29 @@ export function FindAnything() {
     // `Ctrl + P` to select previous item
     if (isFindAnythingModalOpen && ctrlKey && key === 'p') {
       ev.preventDefault()
-      setActiveIndex(index => Math.max(0, index - 1))
+      setActiveIndex(index => {
+        const nextIndex = Math.max(0, index - 1)
+
+        const activeElement = document.querySelector(`#search-item-${nextIndex}`)
+        if (activeElement != null) {
+          activeElement.scrollIntoView({ block: 'center' })
+        }
+        return nextIndex
+      })
     }
 
     // `Ctrl + N` to select next item
     if (isFindAnythingModalOpen && ctrlKey && key === 'n') {
       ev.preventDefault()
-      setActiveIndex(index => Math.min(candidateBoards.length - 1, index + 1))
+      setActiveIndex(index => {
+        const nextIndex = Math.min(candidateBoards.length - 1, index + 1)
+
+        const activeElement = document.querySelector(`#search-item-${nextIndex}`)
+        if (activeElement != null) {
+          activeElement.scrollIntoView({ block: 'center' })
+        }
+        return nextIndex
+      })
     }
 
     // `Escape` hide search modal if it's open
@@ -96,15 +112,18 @@ export function FindAnything() {
           </div>
           {candidateBoards.length > 0 ? (
             <div className={styles.SearchResults}>
-              {candidateBoards.map((result, index) => {
+              {candidateBoards.map((board, index) => {
+                if (input$.current == null) return null
                 return (
                   <div
                     key={index}
                     className={cx(styles.SearchResult, index === activeIndex && styles.active)}
+                    id={`search-item-${index}`}
+                    onClick={() => switchBoard(board.boardId)}
                   >
-                    <div onClick={() => switchBoard(result.boardId)}>
-                      {result.titles
-                        .split(new RegExp(`(${input$.current.value})`, 'gi'))
+                    <div>
+                      {board.titles
+                        .split(new RegExp(`(${input$?.current?.value ?? ''})`, 'gi'))
                         .map((part, index) => {
                           const isMatch = part.toLowerCase() === input$.current.value.toLowerCase()
                           if (isMatch) {
@@ -119,7 +138,7 @@ export function FindAnything() {
                         })}
                     </div>
                     <div className={styles.SearchResultTexts}>
-                      {result.validTexts.map((text, index) => {
+                      {board.validTexts.map((text, index) => {
                         const parts = text.split(new RegExp(`(${input$.current.value})`, 'gi'))
                         return (
                           <div key={index} className={styles.SearchResultText}>