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
This commit is contained in:
abaevbog 2024-07-18 23:34:28 -07:00 • committed by GitHub
parent 38391f356c
commit 53fed83e05
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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);