From 53fed83e050cb3b1ad6cb08e103c0b747e1bb05d Mon Sep 17 00:00:00 2001
From: abaevbog <bogdan@zotero.org>
Date: Thu, 18 Jul 2024 23:34:28 -0700
Subject: [PATCH] do not save edits on Escape in reader tags popup (#4399)

<panel> takes over Escape handling by just closing the popup via
what looks like a capturing listener on document, since Escape
keydown events never even reach the popup itself. When the popup
is just closed like that, tagsBox is blurred so all unwanted edits get saved.

To properly handle Escape, attach our own capturing listener that will
reset all edits before the popup is closed.

Fixes: #4398
---
 chrome/content/zotero/xpcom/reader.js | 28 +++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/chrome/content/zotero/xpcom/reader.js b/chrome/content/zotero/xpcom/reader.js
index 32cb0af94d..9dcd96410b 100644
--- a/chrome/content/zotero/xpcom/reader.js
+++ b/chrome/content/zotero/xpcom/reader.js
@@ -909,16 +909,32 @@ class ReaderInstance {
 
 	_openTagsPopup(item, x, y) {
 		let tagsPopup = this._window.document.createXULElement('panel');
-		tagsPopup.addEventListener('popuphidden', function (event) {
+		// <panel> completely takes over Escape keydown event, by attaching a capturing keydown
+		// listener to document which just closes the popup. It leads to unwanted edits being saved.
+		// Attach our own listener to this._window.document to properly handle Escape on edited tags
+		let handleKeyDown = (event) => {
+			if (event.key !== "Escape") return;
+			let focusedTag = tagsPopup.querySelector("editable-text.focused");
+			if (focusedTag) {
+				if (focusedTag.closest("[isNew]")) {
+					// remove newly added tag
+					focusedTag.closest(".row").remove();
+				}
+				else {
+					// or reset to initial value if the tag is not new
+					focusedTag.value = focusedTag.initialValue;
+				}
+			}
+			// now that all tags values are reset, close the popup
+			tagsPopup.hidePopup();
+		};
+		tagsPopup.addEventListener('popuphidden', (event) => {
 			if (event.target === tagsPopup) {
 				tagsPopup.remove();
 			}
+			this._window.document.removeEventListener("keydown", handleKeyDown, true);
 		});
-		tagsPopup.addEventListener('keydown', function (event) {
-			if (event.key == "Escape") {
-				tagsPopup.hidePopup();
-			}
-		});
+		this._window.document.addEventListener("keydown", handleKeyDown, true);
 		tagsPopup.className = 'tags-popup';
 		let tagsbox = this._window.document.createXULElement('tags-box');
 		tagsPopup.appendChild(tagsbox);