tagsbox: focus new tag row on shift-enter (#4514)

On shift-Enter from any tag, add a new empty tag at the
bottom and focus it. Alternative to tabbing to + button
and clicking it.

Fixes: #4394
This commit is contained in:
abaevbog 2024-08-07 00:03:38 -07:00 committed by GitHub
parent 55017926b5
commit b72bcc3118
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 45 additions and 3 deletions

View file

@ -296,6 +296,13 @@
event.preventDefault();
// Shift-Enter on a tag will add and focus an empty tag row at the bottom
if (event.shiftKey) {
event.stopPropagation();
this.addNew();
return;
}
var row = target.parentElement;
// Not sure why this can happen, but if the event fires on an unmounted node, just ignore it
if (!row.parentElement) {
@ -449,7 +456,6 @@
tags.forEach(tag => this.item.addTag(tag));
await this.item.saveTx();
this._forceRenderAll();
}
// Single tag at end
else {

View file

@ -16,7 +16,7 @@ describe("Item Tags Box", function () {
describe("Tag Editing", function () {
it("should update tag when pressing Enter in textbox", async function () {
before(async () => {
if (!doc.hasFocus()) {
// editable-text behavior relies on focus, so we first need to bring the window to the front.
// Not required on all platforms. In some cases (e.g. Linux), the window is at the front from the start.
@ -28,7 +28,8 @@ describe("Item Tags Box", function () {
Zotero.Utilities.Internal.activate(win);
await activatePromise;
}
});
it("should update tag when pressing Enter in textbox", async function () {
var tag = Zotero.Utilities.randomString();
var newTag = Zotero.Utilities.randomString();
@ -59,6 +60,41 @@ describe("Item Tags Box", function () {
assert.equal(rows[0].value, newTag);
assert.equal(rows.length, 1);
});
it("should focus a new empty tag on Shift-Enter in textbox", async function () {
var tag = Zotero.Utilities.randomString();
var updatedTag = Zotero.Utilities.randomString();
await createDataObject('item', { tags: [{ tag }] });
var tagsbox = doc.querySelector('#zotero-editpane-tags');
var rows = tagsbox.querySelectorAll('.row editable-text');
assert.equal(rows.length, 1);
var firstRow = rows[0];
firstRow.focus();
firstRow.ref.value = updatedTag;
firstRow.ref.dispatchEvent(new Event('input'));
// Press Shift-Enter in textbox
var shiftEnter = new KeyboardEvent('keydown', {
key: "Enter",
shiftKey: true
});
let promise = waitForItemEvent('modify');
firstRow.dispatchEvent(shiftEnter);
await promise;
rows = tagsbox.querySelectorAll('.row editable-text');
assert.equal(rows[0].value, updatedTag);
assert.equal(rows.length, 1);
// Wait for new tag to get focused
let waited = 0;
while (doc.activeElement.tagName == "window" && waited < 1000) {
waited += 1;
await Zotero.Promise.delay(10);
}
// New empty tag should have focus
assert.exists(doc.activeElement.closest("[isNew]"));
});
});