JSON editor note fix (#3260)

frontend/src/app/json-editor/_components/Note.tsx

@@ -66,16 +66,47 @@ function Note({
         });
     }, [script, setScript]);
 
-  const NoteItem = memo(
+    return (
-    ({ note, index }: { note: Script["notes"][number]; index: number }) => (
+        <>
+            <h3 className="text-xl font-semibold">Notes</h3>
+            {script.notes.map((note, index) => (
+                <NoteItem key={index} note={note} index={index} updateNote={updateNote} removeNote={removeNote} />
+            ))}
+            <Button type="button" size="sm" onClick={addNote}>
+                <PlusCircle className="mr-2 h-4 w-4" /> Add Note
+            </Button>
+        </>
+    );
+}
+
+const NoteItem = memo(
+    ({
+        note,
+        index,
+        updateNote,
+        removeNote,
+    }: {
+        note: Script["notes"][number];
+        index: number;
+        updateNote: (index: number, key: keyof Script["notes"][number], value: string) => void;
+        removeNote: (index: number) => void;
+    }) => {
+        const inputRef = useRef<HTMLInputElement | null>(null);
+
+        const handleTextChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+            updateNote(index, "text", e.target.value);
+            setTimeout(() => {
+                inputRef.current?.focus();
+            }, 0);
+        }, [index, updateNote]);
+
+        return (
             <div className="space-y-2 border p-4 rounded">
                 <Input
                     placeholder="Note Text"
                     value={note.text}
-          onChange={(e) => updateNote(index, "text", e.target.value)}
+                    onChange={handleTextChange}
-          ref={(el) => {
+                    ref={inputRef}
-            inputRefs.current[index] = el;
-          }}
                 />
                 <Select
                     value={note.type}
@@ -109,22 +140,11 @@ function Note({
                     <Trash2 className="mr-2 h-4 w-4" /> Remove Note
                 </Button>
             </div>
-    ),
         );
+    }
+);
 
-  NoteItem.displayName = 'NoteItem';
+NoteItem.displayName = 'NoteItem';
 
-  return (
-    <>
-      <h3 className="text-xl font-semibold">Notes</h3>
-      {script.notes.map((note, index) => (
-        <NoteItem key={index} note={note} index={index} />
-      ))}
-      <Button type="button" size="sm" onClick={addNote}>
-        <PlusCircle className="mr-2 h-4 w-4" /> Add Note
-      </Button>
-    </>
-  );
-}
 
 export default memo(Note);