79 Keyboard scrolling support (#91)

* ide: add debug configuration * fix: keyboard arrow scrolling for fontpicker
ae9is · Feb 10, 2025 · e5173bf · e5173bf
1 parent 05a3025
commit e5173bf
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,18 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}/packages/fontpicker/src",
+            "sourceMapPathOverrides": {
+                "webpack:///./packages/fontpicker/src/*": "${workspaceFolder}/packages/fontpicker/src/*"
+            }
+        }
+    ]
+}
diff --git a/packages/fontpicker/src/components/FontPicker.tsx b/packages/fontpicker/src/components/FontPicker.tsx
@@ -384,15 +384,16 @@ export default function FontPicker({
       // selectedFont should be undefined IFF fontCategories is changed and the currently
       //  selectedFont is not in the new category.
       if (selectedFont) {
-        const fontElement = popout.querySelector('.font-preview-' + selectedFont.sane) as HTMLElement
-        if (fontElement && fontElement instanceof HTMLElement) {
-          const fontTop = fontElement.offsetTop
-          const fontBottom = fontTop + fontElement.offsetHeight
+        const fontPreviewElement = popout.querySelector('.font-preview-' + selectedFont.sane) as HTMLElement
+        const fontOptionElement = fontPreviewElement?.parentElement
+        if (fontOptionElement && fontOptionElement instanceof HTMLElement) {
+          const fontTop = fontOptionElement.offsetTop
+          const fontBottom = fontTop + fontOptionElement.offsetHeight
           const popTop = popout.scrollTop
           const popBottom = popTop + popout.clientHeight
           if (why === 'opening' || fontTop <= popTop) {
             popout.scrollTop = fontTop
-            fontElement.parentElement?.classList.add('selected')
+            fontOptionElement.classList.add('selected')
             const optionRef = getOptionsRef()?.get(selectedFont.sane)
             optionRef?.classList.add('selected')
           } else if (fontBottom >= popBottom) {