Citation dialog: updated Enter handling in panels (#5281)

Unhandled Enter keypress from inside of a panel will now close it.
Enter on "Omit Author" checkbox or on the inactive locator
label dropdown will close the item details popup.
Enter on "Keep sources sorted" checkbox of settings
popup will close it for consistency.

Fixes: #5277
This commit is contained in:
abaevbog 2025-05-09 21:29:44 -07:00 • committed by GitHub
parent 9ed3f6363c
commit 1eacc8bbdf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 11 additions and 13 deletions

View file

@ -122,7 +122,7 @@
<input id="suffix" class="details-data"/>
</div>
<div id="suppress-author-row" class="row">
<input id="suppress-author" type="checkbox" class="keyboard-clickable"/>
<input id="suppress-author" type="checkbox"/>
<label for="suppress-author" data-l10n-id="integration-citationDialog-details-suppressAuthor"></label>
</div>
</div>
@ -138,7 +138,7 @@
<div class="vbox popup">
<div class="title" data-l10n-id="integration-citationDialog-settings-title"></div>
<div class="hbox">
<input id="keepSorted" type="checkbox" class="keyboard-clickable"/>
<input id="keepSorted" type="checkbox"/>
<label for="keepSorted" data-l10n-id="integration-citationDialog-settings-keepSorted"></label>
</div>
</div>

View file

@ -86,12 +86,19 @@ export class CitationDialogKeyboardHandler {
_handleTopLevelKeydown(event) {
let handled = false;
let tgt = event.target;
let isKeyboardClickable = tgt.classList.contains("keyboard-clickable") || tgt.tagName.includes("button");
// Space/Enter will click on a button or keyboard-clickable components
// Space/Enter will click on keyboard-clickable components.
// On macOS, focused buttons are only clickable with Space (not Enter),
// and on Windows they are clickable with both.
let isKeyboardClickable = tgt.classList.contains("keyboard-clickable") || (Zotero.isWin && tgt.localName == "button");
if (["Enter", " "].includes(event.key) && isKeyboardClickable) {
tgt.click();
handled = true;
}
// Unhandled Enter in a panel will close it
else if (event.key == "Enter" && tgt.closest("panel")) {
handled = true;
tgt.closest("panel").hidePopup();
}
// Unhandled Enter will accept the existing dialog's state
else if (event.key == "Enter" && !tgt.closest("panel")) {
handled = true;

View file

@ -84,8 +84,6 @@ export class CitationDialogPopupsHandler {
if (this._getNode("#itemDetails").state !== "open") return;
this.captureItemDetailsKeyDown(event);
}, true);
// Handle remaining keypress events with a usual bubbling listener
this._getNode("#itemDetails").addEventListener("keypress", this.handleItemDetailsKeypress.bind(this));
}
openItemDetails(dialogReferenceID, item, citationItem, itemDescription) {
@ -182,13 +180,6 @@ export class CitationDialogPopupsHandler {
}
}
handleItemDetailsKeypress(event) {
// Enter on a an input will save changes and hide the popup
if (event.key == "Enter" && ["input"].includes(event.target.tagName) && !event.target.getAttribute("type")) {
this._getNode("#itemDetails").hidePopup();
}
}
// Update item details and notify citation dialog about changes
handleItemDetailsChange() {
this.citationItem.label = this._getNode("#locator").value ? this._getNode("#label").value : null;