fix(platform): Fix text area input not updating input field

autogpt_platform/frontend/src/components/CustomNode.tsx

@@ -392,7 +392,7 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
   };
 
   const handleInputClick = (key: string) => {
-    console.log(`Opening modal for key: ${key}`);
+    console.debug(`Opening modal for key: ${key}`);
     setActiveKey(key);
     const value = getValue(key);
     setInputModalValue(

autogpt_platform/frontend/src/components/NavBarButtons.tsx

@@ -31,8 +31,6 @@ export function NavBarButtons({ className }: { className?: string }) {
 
   const activeButton = buttons.find((button) => button.href === pathname);
 
-  console.log(">>>> ", activeButton);
-
   return buttons.map((button) => (
     <Link
       key={button.href}

autogpt_platform/frontend/src/components/node-input-components.tsx

@@ -9,7 +9,6 @@ import {
   BlockIOStringSubSchema,
   BlockIONumberSubSchema,
   BlockIOBooleanSubSchema,
-  BlockIOCredentialsSubSchema,
 } from "@/lib/autogpt-server-api/types";
 import React, { FC, useCallback, useEffect, useState } from "react";
 import { Button } from "./ui/button";
@@ -313,6 +312,14 @@ const NodeCredentialsInput: FC<{
   );
 };
 
+const getInputRef = (value: any): React.RefObject<HTMLInputElement> => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  if (inputRef.current && value && inputRef.current.value !== value) {
+    inputRef.current.value = value;
+  }
+  return inputRef;
+};
+
 const NodeKeyValueInput: FC<{
   selfKey: string;
   schema: BlockIOKVSubSchema;
@@ -416,7 +423,7 @@ const NodeKeyValueInput: FC<{
                 <Input
                   type="text"
                   placeholder="Value"
-                  defaultValue={value ?? ""}
+                  ref={getInputRef(value ?? "")}
                   onBlur={(e) =>
                     updateKeyValuePairs(
                       keyValuePairs.toSpliced(index, 1, {
@@ -600,7 +607,9 @@ const NodeStringInput: FC<{
           <Input
             type="text"
             id={selfKey}
-            defaultValue={schema.secret && value ? "********" : value}
+            ref={getInputRef(
+              schema.secret && value ? "*".repeat(value.length) : value,
+            )}
             readOnly={schema.secret}
             placeholder={
               schema?.placeholder || `Enter ${beautifyString(displayName)}`
@@ -658,7 +667,6 @@ export const NodeTextBoxInput: FC<{
             schema?.placeholder || `Enter ${beautifyString(displayName)}`
           }
           onChange={(e) => handleInputChange(selfKey, e.target.value)}
-          onBlur={(e) => handleInputChange(selfKey, e.target.value)}
           className="h-full w-full resize-none overflow-hidden border-none bg-transparent text-lg text-black outline-none"
           style={{
             fontSize: "min(1em, 16px)",
@@ -696,7 +704,7 @@ const NodeNumberInput: FC<{
         <Input
           type="number"
           id={selfKey}
-          defaultValue={value}
+          ref={getInputRef(value)}
           onBlur={(e) => handleInputChange(selfKey, parseFloat(e.target.value))}
           placeholder={
             schema.placeholder || `Enter ${beautifyString(displayName)}`