From a708c10c8cd9e5f6be7eaf1459fd9b9dea16bf5c Mon Sep 17 00:00:00 2001
From: Diego de la Hera <delahera@gmail.com>
Date: Wed, 25 Sep 2024 20:27:50 -0300
Subject: [PATCH 1/2] Make the PID row input element React-controlled

---
 src/components/pidRow.tsx | 23 ++++++++---------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/components/pidRow.tsx b/src/components/pidRow.tsx
index 9133aef..3fbcff0 100644
--- a/src/components/pidRow.tsx
+++ b/src/components/pidRow.tsx
@@ -14,37 +14,28 @@ function PIDRow(props: {
 	const [value, setValue] = useState(props.item.getPID(props.type));
 	const [url, setUrl] = useState(props.item.getPidUrl(props.type));
 
+	const [oldPid, setOldPid] = useState(value);
+
 	useEffect(() => {
 		setValue(props.item.getPID(props.type));
 	}, [props.item, props.type]);
 
 	useEffect(() => {
 		setUrl(props.item.getPidUrl(props.type));
-		// update the value of the input to match the new PID
-		(
-			document.getElementById(
-				`pid-row-input-${props.item.key}-${props.type}`,
-			)! as HTMLInputElement
-		).value = props.item.getPID(props.type) || "";
 	}, [props.type, value]);
 
 	function handleCommit(newPid: string) {
-		if (newPid != value) {
+		if (newPid != oldPid) {
 			if (props.validate && !props.validate(props.type, newPid)) {
+				setValue(oldPid);
 				return;
 			}
 			props.item.setPID(props.type, newPid, props.autosave);
-			// set new value immediately
-			// if autosave is true, it will be updated twice
-			// but second time (via props.item) might take some time
-			setValue(props.item.getPID(props.type));
 		}
 	}
 
 	async function onFetch() {
 		await props.item.fetchPID(props.type, props.autosave);
-		// set new value immediately (see note in handleCommit)
-		setValue(props.item.getPID(props.type));
 	}
 
 	return (
@@ -58,10 +49,12 @@ function PIDRow(props: {
 			<div className="editable-container">
 				<input
 					type="text"
-					id={`pid-row-input-${props.item.key}-${props.type}`}
 					className={props.editable ? "zotero-clicky" : ""}
 					readOnly={!props.editable}
-					defaultValue={value || ""}
+					value={value || ""}
+					onChange={(event) => setValue(event.target.value)}
+					// when the input gains focus, save its value for reference
+					onFocus={() => setOldPid(value || "")}
 					// when the input loses focus, update the item's PID
 					onBlur={(event) => handleCommit(event.target.value)}
 				/>

From 8f23a021678c7caa50ad88f3f55dcf88ce8b974a Mon Sep 17 00:00:00 2001
From: Diego de la Hera <delahera@gmail.com>
Date: Wed, 25 Sep 2024 20:36:07 -0300
Subject: [PATCH 2/2] Reintroduced comment about replacing  with  component

---
 src/components/pidRow.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/pidRow.tsx b/src/components/pidRow.tsx
index 3fbcff0..0037f5c 100644
--- a/src/components/pidRow.tsx
+++ b/src/components/pidRow.tsx
@@ -47,6 +47,8 @@ function PIDRow(props: {
 				{props.type.toUpperCase()}
 			</label>
 			<div className="editable-container">
+				{/* <Editable */}
+				{/* 973e924 replaced Editable with input until we work out how to import zotero components */}
 				<input
 					type="text"
 					className={props.editable ? "zotero-clicky" : ""}