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:
parent
55017926b5
commit
b72bcc3118
2 changed files with 45 additions and 3 deletions
|
@ -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 {
|
||||
|
|
|
@ -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]"));
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue