From 74e786053e47d5150a80d4e3105e45b71154c719 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 14 Nov 2021 19:18:37 +0000
Subject: [PATCH] fix: scroll to top in settings

fixes #108
---
 src/pages/settings/GenericSettings.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index f5acd826..34f22fa0 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/src/pages/settings/GenericSettings.tsx
@@ -5,7 +5,13 @@ import { useHistory, useParams } from "react-router-dom";
 import styles from "./Settings.module.scss";
 import classNames from "classnames";
 import { Text } from "preact-i18n";
-import { useCallback, useContext, useEffect, useState } from "preact/hooks";
+import {
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+} from "preact/hooks";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
@@ -74,6 +80,8 @@ export function GenericSettings({
         return () => document.body.removeEventListener("keydown", keyDown);
     }, [exitSettings]);
 
+    const pageRef = useRef<string>();
+
     return (
         <div
             className={classNames(styles.settings, {
@@ -155,7 +163,17 @@ export function GenericSettings({
             )}
             {(!isTouchscreenDevice || typeof page === "string") && (
                 <div className={styles.content}>
-                    <div className={styles.scrollbox}>
+                    <div
+                        className={styles.scrollbox}
+                        ref={(ref) => {
+                            // Force scroll to top if page changes.
+                            if (ref) {
+                                if (pageRef.current !== page) {
+                                    ref.scrollTop = 0;
+                                    pageRef.current = page;
+                                }
+                            }
+                        }}>
                         <div className={styles.contentcontainer}>
                             {!isTouchscreenDevice &&
                                 !pages.find(