fix(reader): arrows stay page turns while the progress slider holds focus
Clicking the bottom progress slider left it focused, and the reader's keydown guard treats INPUT focus as typing — so arrow keys stepped the range input instead of turning pages. With step="any" each press moved ~1% of the book and key repeat crossed the whole book in seconds; the debounced progress saves then persisted every wild landing (positions scattered from page 5 to 285 to 100%, "progress no longer saves correctly after page turns"). Two layers: - reader.templ: all three progress sliders blur on pointerup, so a mouse scrub no longer leaves focus behind. - reader.ts handleKeydown: ArrowLeft/ArrowRight on a focused progress slider preventDefault, blur, and fall through to the page-turn handlers; every other key still belongs to the control, so a keyboard user who Tabbed to the slider keeps arrows for it.
This commit is contained in:
1 parent
6791d611f0
commit
807899b137
3 files changed
+18
-3
No files matched your search
@@ -3993,6 +3993,8 @@ document.addEventListener("alpine:init", () => {
|
||||
// Escape stays live so popovers/drawers can still be dismissed from
|
||||
// the keyboard even mid-note.
|
||||
const t = event.target as HTMLElement | null;
|
||||
const isProgressSlider =
|
||||
t instanceof HTMLInputElement && t.type === "range" && t.id.startsWith("progress-slider");
|
||||
const typing =
|
||||
t?.tagName === "INPUT" ||
|
||||
t?.tagName === "SELECT" ||
|
||||
@@ -4000,7 +4002,17 @@ document.addEventListener("alpine:init", () => {
|
||||
!!t?.isContentEditable;
|
||||
// NOTE: no chrome poke here — keyboard page turns are reading
|
||||
// actions and must leave the chrome alone (handoff item 7).
|
||||
if (typing && k !== "Escape") return;
|
||||
if (typing && k !== "Escape") {
|
||||
// A focused progress range swallows arrows as ~1% book-jumps —
|
||||
// with key repeat, holding an arrow crosses the entire book in
|
||||
// seconds and the debounced saves persist every wild landing
|
||||
// (2026-10-21 incident). Arrows are page turns everywhere in the
|
||||
// reader: release the slider and fall through to the turn
|
||||
// handlers. Every other key still belongs to the control.
|
||||
if (!(isProgressSlider && (k === "ArrowLeft" || k === "ArrowRight"))) return;
|
||||
event.preventDefault();
|
||||
t.blur();
|
||||
}
|
||||
if (k === "ArrowLeft" || k === "h") {
|
||||
if (event.altKey) {
|
||||
event.preventDefault();
|
||||
|
||||
Reference in new issue
Block a user