fix(app): scroll jitter/loop

1 files changed, 29 insertions, 7 deletions

diff --git a/packages/ui/src/components/scroll-view.tsx b/packages/ui/src/components/scroll-view.tsx
index 52ed39a46..c3d878af6 100644
--- a/packages/ui/src/components/scroll-view.tsx
+++ b/packages/ui/src/components/scroll-view.tsx
@@ -6,6 +6,25 @@ export interface ScrollViewProps extends ComponentProps<"div"> {
   orientation?: "vertical" | "horizontal" // currently only vertical is fully implemented for thumb
 }
 
+export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => {
+  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+
+  switch (event.key) {
+    case "PageDown":
+      return "page-down"
+    case "PageUp":
+      return "page-up"
+    case "Home":
+      return "home"
+    case "End":
+      return "end"
+    case "ArrowUp":
+      return "up"
+    case "ArrowDown":
+      return "down"
+  }
+}
+
 export function ScrollView(props: ScrollViewProps) {
   const i18n = useI18n()
   const merged = mergeProps({ orientation: "vertical" }, props)
@@ -133,31 +152,34 @@ export function ScrollView(props: ScrollViewProps) {
       return
     }
 
+    const next = scrollKey(e)
+    if (!next) return
+
     const scrollAmount = viewportRef.clientHeight * 0.8
     const lineAmount = 40
 
-    switch (e.key) {
-      case "PageDown":
+    switch (next) {
+      case "page-down":
         e.preventDefault()
         viewportRef.scrollBy({ top: scrollAmount, behavior: "smooth" })
         break
-      case "PageUp":
+      case "page-up":
         e.preventDefault()
         viewportRef.scrollBy({ top: -scrollAmount, behavior: "smooth" })
         break
-      case "Home":
+      case "home":
         e.preventDefault()
         viewportRef.scrollTo({ top: 0, behavior: "smooth" })
         break
-      case "End":
+      case "end":
         e.preventDefault()
         viewportRef.scrollTo({ top: viewportRef.scrollHeight, behavior: "smooth" })
         break
-      case "ArrowUp":
+      case "up":
         e.preventDefault()
         viewportRef.scrollBy({ top: -lineAmount, behavior: "smooth" })
         break
-      case "ArrowDown":
+      case "down":
         e.preventDefault()
         viewportRef.scrollBy({ top: lineAmount, behavior: "smooth" })
         break