From 9c2e61a2f3f56545bf91e081d3fb0447430f40e4 Mon Sep 17 00:00:00 2001
From: Polle Pas <polleps@gmail.com>
Date: Wed, 14 Feb 2024 14:39:44 +0100
Subject: [PATCH] #760 Fix input caret jumping to end when typing

---
 .../TablePage/PropertyForm/PropertyForm.tsx   |  1 -
 browser/react/src/hooks.ts                    | 32 +++++++++----------
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/browser/data-browser/src/views/TablePage/PropertyForm/PropertyForm.tsx b/browser/data-browser/src/views/TablePage/PropertyForm/PropertyForm.tsx
index 942f25ffb..c8f977076 100644
--- a/browser/data-browser/src/views/TablePage/PropertyForm/PropertyForm.tsx
+++ b/browser/data-browser/src/views/TablePage/PropertyForm/PropertyForm.tsx
@@ -80,7 +80,6 @@ export function PropertyForm({
   category,
 }: PropertyFormProps): JSX.Element {
   const [nameError, setNameError, onNameBlur] = useValidation('Required');
-
   const valueOptions = useMemo(
     () => ({
       handleValidationError(e: Error | undefined) {
diff --git a/browser/react/src/hooks.ts b/browser/react/src/hooks.ts
index c9740de65..664f57399 100644
--- a/browser/react/src/hooks.ts
+++ b/browser/react/src/hooks.ts
@@ -188,8 +188,8 @@ type useValueOptions = {
  * // Simple usage:
  * const resource = useResource('https://atomicdata.dev/classes/Agent');
  * const [shortname, setShortname] = useValue(
- *   'https://atomicdata.dev/properties/shortname',
  *   resource,
+ *   'https://atomicdata.dev/properties/shortname',
  * );
  * ```
  *
@@ -198,8 +198,8 @@ type useValueOptions = {
  * const resource = useResource('https://atomicdata.dev/classes/Agent');
  * const [error, setError] = useState(null);
  * const [shortname, setShortname] = useValue(
- *   'https://atomicdata.dev/properties/shortname',
  *   resource,
+ *   'https://atomicdata.dev/properties/shortname',
  *   {
  *     commit: true,
  *     validate: true,
@@ -220,10 +220,12 @@ export function useValue(
     commitDebounce = 100,
     handleValidationError,
   } = opts;
-  const [val, set] = useState<JSONValue>(undefined);
+  const [val, set] = useState<JSONValue>(resource.get(propertyURL));
+  const [prevResourceReference, setPrevResourceReference] = useState(resource);
+
   const store = useStore();
 
-  const [saveResource, isWaitingForDebounce] = useDebouncedCallback(
+  const [saveResource] = useDebouncedCallback(
     () => {
       if (!commit) {
         return;
@@ -269,22 +271,18 @@ export function useValue(
     [resource, handleValidationError, store, validate, saveResource],
   );
 
-  // If the hook is waiting to commit the changes return the current local value so the component using this hook shows the most recent value.
-  if (isWaitingForDebounce) {
-    return [val, validateAndSet];
-  }
-
-  // Value hasn't been set in state yet, so get the value
-  let value: JSONValue = undefined;
+  // Update value when resource changes.
+  if (resource !== prevResourceReference) {
+    try {
+      set(resource.get(propertyURL));
+    } catch (e) {
+      store.notifyError(e);
+    }
 
-  // Try to actually get the value, log any error
-  try {
-    value = resource.get(propertyURL);
-  } catch (e) {
-    store.notifyError(e);
+    setPrevResourceReference(resource);
   }
 
-  return [value, validateAndSet];
+  return [val, validateAndSet];
 }
 
 /**