From 3514b4dc1c7bbb872fc62cd8d8b26dff007660a9 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Thu, 10 Sep 2026 08:27:16 -0400
Subject: [PATCH] fix(reader): close the highlight popover on outside clicks in
 the book
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Clicks on reader chrome already dismissed the selection popover via the
host-document outside-click handler, but clicks inside the book happen
in content iframes whose events never bubble to the host document — the
host handler never sees them. The only iframe-side dismissal ran through
the selection tracker's collapsed check, which hides the popover solely
in create mode: once the popover was open in EDIT mode (clicked a
highlight, writing a note), clicking anywhere in the book did nothing
and Esc was the only way out.

Each content iframe now gets a pointerdown listener that dismisses the
popover in any mode. Clicking a painted highlight still opens the edit
popover: this hides first, then foliate's show-annotation re-opens it.
---
 web/src/reader/reader.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/web/src/reader/reader.ts b/web/src/reader/reader.ts
index 59c2358..aed9b15 100644
--- a/web/src/reader/reader.ts
+++ b/web/src/reader/reader.ts
@@ -744,6 +744,21 @@ document.addEventListener("alpine:init", () => {
             () => setTimeout(checkSelection, 0),
             { passive: true },
           );
+          // Clicks in the book dismiss the popover in ANY mode: iframe
+          // events never bubble to the host document (so the host
+          // outside-click dismiss never sees them), and the collapsed
+          // check above only covers create mode — edit mode had no
+          // outside-click path at all, leaving Esc as the only way out.
+          // Clicking a painted highlight still works: this hides, then
+          // foliate's show-annotation re-opens it in edit mode.
+          doc.addEventListener(
+            "pointerdown",
+            () => {
+              if (this.selectionPopover.open)
+                this.hideSelectionPopover();
+            },
+            { passive: true },
+          );
           doc.addEventListener(
             "keyup",
             (ev: KeyboardEvent) => {