From 32bfc267a7c4847b6b9324154edf9ade9ed9be6b Mon Sep 17 00:00:00 2001
From: abaevbog <bogdan@zotero.org>
Date: Fri, 5 Jan 2024 07:07:16 -0500
Subject: [PATCH] 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
---
 .../content/zotero/elements/editableText.js   |  5 +++--
 chrome/content/zotero/elements/itemBox.js     | 19 +++++++------------
 scss/elements/_itemBox.scss                   |  5 ++++-
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/chrome/content/zotero/elements/editableText.js b/chrome/content/zotero/elements/editableText.js
index 6218252b20..aa64431acd 100644
--- a/chrome/content/zotero/elements/editableText.js
+++ b/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;
 				});
diff --git a/chrome/content/zotero/elements/itemBox.js b/chrome/content/zotero/elements/itemBox.js
index 6d5731700c..a0277c26ae 100644
--- a/chrome/content/zotero/elements/itemBox.js
+++ b/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];
diff --git a/scss/elements/_itemBox.scss b/scss/elements/_itemBox.scss
index 72184a0f54..01e313ee36 100644
--- a/scss/elements/_itemBox.scss
+++ b/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;
+			}
 		}
 	}