From cd5358dc9b9ec74ad7ad690444dcfc2a4cdd6dd6 Mon Sep 17 00:00:00 2001
From: MechaCat02 <MechaCat02@example.com>
Date: Mon, 13 Jul 2026 21:28:57 +0200
Subject: [PATCH] fix: stop reader key navigation leaking behind open overlays

Arrows/j/k/Home/End bubbled to the reader's window handler while a
jump/settings/action/collections/tags/context overlay was open, paging the
chapter behind it (FE-1); native select/contenteditable weren't exempt (FE-4).
New unit-tested isTypingTarget() + an overlay-open early return fix both.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 backend/Cargo.lock                            |  2 +-
 backend/Cargo.toml                            |  2 +-
 frontend/package.json                         |  2 +-
 frontend/src/lib/readerKeys.test.ts           | 23 +++++++++++++++++++
 frontend/src/lib/readerKeys.ts                | 19 +++++++++++++++
 .../[id]/chapter/[chapter_id]/+page.svelte    | 21 ++++++++++++++---
 6 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/lib/readerKeys.test.ts
 create mode 100644 frontend/src/lib/readerKeys.ts

diff --git a/backend/Cargo.lock b/backend/Cargo.lock
index dd23e30..bdc3ea6 100644
--- a/backend/Cargo.lock
+++ b/backend/Cargo.lock
@@ -1558,7 +1558,7 @@ checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
 
 [[package]]
 name = "mangalord"
-version = "0.128.13"
+version = "0.128.14"
 dependencies = [
  "anyhow",
  "argon2",
diff --git a/backend/Cargo.toml b/backend/Cargo.toml
index 50709f9..d12d172 100644
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "mangalord"
-version = "0.128.13"
+version = "0.128.14"
 edition = "2021"
 default-run = "mangalord"
 
diff --git a/frontend/package.json b/frontend/package.json
index 9b01c0b..5d5deff 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mangalord-frontend",
-  "version": "0.128.13",
+  "version": "0.128.14",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/frontend/src/lib/readerKeys.test.ts b/frontend/src/lib/readerKeys.test.ts
new file mode 100644
index 0000000..0c4b06f
--- /dev/null
+++ b/frontend/src/lib/readerKeys.test.ts
@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest';
+import { isTypingTarget } from './readerKeys';
+
+function el(tag: string, contentEditable = false): HTMLElement {
+    const node = document.createElement(tag);
+    if (contentEditable) node.setAttribute('contenteditable', 'true');
+    return node;
+}
+
+describe('isTypingTarget', () => {
+    it('is true for text-entry and native-key elements', () => {
+        expect(isTypingTarget(el('input'))).toBe(true);
+        expect(isTypingTarget(el('textarea'))).toBe(true);
+        expect(isTypingTarget(el('select'))).toBe(true);
+        expect(isTypingTarget(el('div', true))).toBe(true);
+    });
+
+    it('is false for ordinary elements and null', () => {
+        expect(isTypingTarget(el('div'))).toBe(false);
+        expect(isTypingTarget(el('button'))).toBe(false);
+        expect(isTypingTarget(null)).toBe(false);
+    });
+});
diff --git a/frontend/src/lib/readerKeys.ts b/frontend/src/lib/readerKeys.ts
new file mode 100644
index 0000000..e432a6f
--- /dev/null
+++ b/frontend/src/lib/readerKeys.ts
@@ -0,0 +1,19 @@
+/**
+ * Whether a keyboard event's target is a place the user is typing (or otherwise
+ * expects native key handling), so the reader must NOT hijack arrows/j/k/Home/End
+ * for page navigation. Covers text inputs, textareas, native `<select>` dropdowns
+ * (whose Home/End/arrows are their own), and any contenteditable region.
+ */
+export function isTypingTarget(target: EventTarget | null): boolean {
+    const el = target as HTMLElement | null;
+    if (!el) return false;
+    const tag = el.tagName;
+    // `isContentEditable` is the correct runtime signal (accounts for inherited
+    // editability); the attribute check is a robust fallback for the explicit
+    // case and for environments that don't compute the property (jsdom).
+    const editable =
+        el.isContentEditable === true ||
+        el.getAttribute?.('contenteditable') === 'true' ||
+        el.getAttribute?.('contenteditable') === '';
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || editable;
+}
diff --git a/frontend/src/routes/manga/[id]/chapter/[chapter_id]/+page.svelte b/frontend/src/routes/manga/[id]/chapter/[chapter_id]/+page.svelte
index ab9e5b1..f674020 100644
--- a/frontend/src/routes/manga/[id]/chapter/[chapter_id]/+page.svelte
+++ b/frontend/src/routes/manga/[id]/chapter/[chapter_id]/+page.svelte
@@ -3,6 +3,7 @@
     import { browser } from '$app/environment';
     import { afterNavigate, goto, invalidateAll } from '$app/navigation';
     import { fileUrl, ApiError } from '$lib/api/client';
+    import { isTypingTarget } from '$lib/readerKeys';
     import { GAP_PX, type ReaderPageGap } from '$lib/api/preferences';
     import { preferences } from '$lib/preferences.svelte';
     import { updateReadProgress } from '$lib/api/read_progress';
@@ -675,9 +676,9 @@
     );
 
     function onKeydown(e: KeyboardEvent) {
-        // Don't hijack keys while the user is typing in an input.
-        const target = e.target as HTMLElement | null;
-        if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) return;
+        // Don't hijack keys while the user is typing or focused on a native
+        // control (input/textarea/select/contenteditable own their own keys).
+        if (isTypingTarget(e.target)) return;
         // `?` opens the keyboard-shortcut help overlay. While it's open,
         // swallow every key here so paging can't happen behind it — the
         // Sheet owns its own Escape/close.
@@ -687,6 +688,20 @@
             return;
         }
         if (shortcutsOpen) return;
+        // Any other overlay (jump/settings/action/collections/tags/context menu)
+        // owns its own keys; swallow reader paging so arrows/j/k/Home/End can't
+        // act on the chapter *behind* the overlay. Those overlays only
+        // stopPropagation() on Escape, so navigation keys otherwise bubble here.
+        if (
+            chapterJumpOpen ||
+            settingsOpen ||
+            contextMenuOpen ||
+            actionSheetOpen ||
+            collectionsModalOpen ||
+            tagsModalOpen
+        ) {
+            return;
+        }
         // Esc always exits fullscreen if active — applies in both
         // modes, including when the bars are hidden. Handled before
         // the per-mode switches so it doesn't get shadowed.