From 872e7b24278a2f00d7558aa9055d7f641c1a768a Mon Sep 17 00:00:00 2001 From: Abe Jellinek Date: Fri, 9 Feb 2024 14:38:56 -0500 Subject: [PATCH] Item/attachment box: Prevent default label focus/blur behavior Since ceb1dd7da3b0e1efdbc824506f65a5c500a909cf added a tabindex on #zotero-view-item, clicking anywhere outside a field in the pane will blur the active field. That's an improvement, but it conflicted with our custom label behavior - when an active field's label is clicked, we want to blur it and keep it blurred, but the default behavior is to re-focus it on mouseup. Fix by preventing the default focus behavior on mousedown/click. --- chrome/content/zotero/elements/attachmentBox.js | 8 +++++++- chrome/content/zotero/elements/itemBox.js | 10 +++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/chrome/content/zotero/elements/attachmentBox.js b/chrome/content/zotero/elements/attachmentBox.js index 3d9a6f6363..ea50e72a5f 100644 --- a/chrome/content/zotero/elements/attachmentBox.js +++ b/chrome/content/zotero/elements/attachmentBox.js @@ -264,7 +264,11 @@ } }); - this.querySelectorAll(".meta-label").forEach(label => label.addEventListener("click", this._handleMetaLabelClick)); + for (let label of this.querySelectorAll(".meta-label")) { + // Prevent default focus/blur behavior - we implement our own below + label.addEventListener("mousedown", event => event.preventDefault()); + label.addEventListener("click", this._handleMetaLabelClick); + } } destroy() { @@ -625,6 +629,8 @@ } _handleMetaLabelClick = (event) => { + event.preventDefault(); + let labelWrapper = event.target.closest(".meta-label"); if (labelWrapper.nextSibling.contains(document.activeElement)) { document.activeElement.blur(); diff --git a/chrome/content/zotero/elements/itemBox.js b/chrome/content/zotero/elements/itemBox.js index 8e71561f98..31d49a069b 100644 --- a/chrome/content/zotero/elements/itemBox.js +++ b/chrome/content/zotero/elements/itemBox.js @@ -854,7 +854,15 @@ if (!this.editable) { break; } - label.addEventListener('click', (_) => { + + label.addEventListener('mousedown', (event) => { + // Prevent default focus/blur behavior - we implement our own below + event.preventDefault(); + }); + + label.addEventListener('click', (event) => { + event.preventDefault(); + let labelWrapper = label.closest(".meta-label"); if (labelWrapper.nextSibling.contains(document.activeElement)) { document.activeElement.blur();