itembox value fields and editable-text tweaks

- fixed creator names text selection glitch (hide the comma instead
of not displaying it + removed redundant value update that's no longer
needed)
- set selection direction in editableText on tab to not scroll to the
end of input
- added autocomplete to observedAttributes of editable-text to
properly add autocomplete even if autocomplete params are set after
the element has been rendered (which is needed for creator names). This
fixes wrong Esc behavior that erases autocomplete fields instead of
resetting to previous value.
- fixed creator names autocomplete and type switch regression after
the comma was removed

chrome/content/zotero/elements/editableText.js

@@ -37,7 +37,8 @@
 			'aria-label',
 			'aria-labelledby',
 			'value',
-			'nowrap'
+			'nowrap',
+			'autocomplete'
 		];
 		
 		get noWrap() {
@@ -188,7 +189,7 @@
 					this.classList.add("focused");
 					// Select all text if focused via keyboard
 					if (!this.getAttribute("mousedown")) {
-						this._input.select();
+						this._input.setSelectionRange(0, this._input.value.length, "backward");
 					}
 					this._input.dataset.initialValue = this._input.value;
 				});

chrome/content/zotero/elements/itemBox.js

@@ -822,11 +822,6 @@
 			this.querySelectorAll("[ztabindex]").forEach((node) =>{
 				node.setAttribute("tabindex", 0);
 			});
-			for (let elem of [...this.querySelectorAll("editable-text")]) {
-				if (!elem.getAttribute("autocomplete")) {
-					this.addAutocompleteToElement(elem);
-				}
-			}
 		}
 		
 		addItemTypeMenu() {
@@ -1204,7 +1199,6 @@
 			// Change if button position changes
 			var creatorNameBox = row.querySelector(".creator-name-box");
 			var lastName = creatorNameBox.firstChild;
-			var comma = creatorNameBox.firstChild.nextSibling;
 			var firstName = creatorNameBox.lastChild;
 
 			let tab;
@@ -1221,7 +1215,6 @@
 				
 				// Hide first name field and prepend to last name field
 				firstName.hidden = true;
-				comma.hidden = true;
 				
 				if (!initial) {
 					var first = firstName.value;
@@ -1273,7 +1266,6 @@
 				}
 				
 				firstName.hidden = false;
-				comma.hidden = false;
 			}
 			
 			// Save the last-used field mode
@@ -1527,6 +1519,10 @@
 			else {
 				valueElement.style.textAlign = 'left';
 			}
+			if (!fieldName.includes("creator")) {
+				// autocomplete for creator names is added in addCreatorRow
+				this.addAutocompleteToElement(valueElement);
+			}
 			return valueElement;
 		}
 		
@@ -1580,9 +1576,8 @@
 			if (field == 'creator') {
 				value = this.item.getCreator(creatorIndex)[creatorField];
 				if (value === undefined) {
-					value = "";
+					elem.value = "";
 				}
-				elem.value = value;
 			}
 			else {
 				value = this.item.getField(fieldName);
@@ -1787,10 +1782,10 @@
 				// Update the other label
 				let label;
 				if (otherField == 'firstName') {
-					label = textbox.nextSibling.nextSibling;
+					label = textbox.nextSibling;
 				}
 				else if (otherField == 'lastName') {
-					label = textbox.previousSibling.previousSibling;
+					label = textbox.previousSibling;
 				}
 				
 				label.value = creator[otherField];

scss/elements/_itemBox.scss

@@ -190,7 +190,7 @@ item-box {
 			margin-inline-end: calc(max(0px, 4px - var(--editable-text-padding-inline)));
 		}
 		// Add comma when the last name is not focused
-		*[fieldMode="0"]:first-child:not(.focused) {
+		*[fieldMode="0"]:first-child {
 			position: relative;
 			&::after {
 				content: ",";
@@ -198,6 +198,9 @@ item-box {
 				right: 0;
 				bottom: var(--editable-text-padding-block);
 			}
+			&.focused::after {
+				visibility: hidden;
+			}
 		}
 	}