From a3aec5928ca18befae7f68759f28e531d1a265d5 Mon Sep 17 00:00:00 2001
From: Twirre Meulenbelt <43213592+TwirreM@users.noreply.github.com>
Date: Thu, 13 Nov 2025 12:23:44 +0100
Subject: [PATCH] fix: allow parent updates to the TextField component

By setting an effect on the `value` prop, changes can be detected and the state can be updated.

ref: N25B-287
---
 src/components/TextField.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/TextField.tsx b/src/components/TextField.tsx
index 58de55d..1fe8b06 100644
--- a/src/components/TextField.tsx
+++ b/src/components/TextField.tsx
@@ -1,4 +1,4 @@
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import styles from "./TextField.module.css";
 
 /**
@@ -86,6 +86,11 @@ export function TextField({
 }) {
   const [inputValue, setInputValue] = useState(value);
 
+  // The value may be changed from the outside, for example, when a program is loaded. We need to update the input value accordingly.
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
   const onCommit = () => setValue(inputValue);
 
   return <RealtimeTextField