fix(frontend): Newly typed text in Input fields vanishes on scroll (#8657)

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

@@ -20,7 +20,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "./ui/select";
-import { Input } from "./ui/input";
+import { LocalValuedInput } from "./ui/input";
 import NodeHandle from "./NodeHandle";
 import { ConnectionData } from "./CustomNode";
 import { CredentialsInput } from "./integrations/credentials-input";
@@ -413,11 +413,11 @@ const NodeKeyValueInput: FC<{
             />
             {!isConnected(key) && (
               <div className="nodrag mb-2 flex items-center space-x-2">
-                <Input
+                <LocalValuedInput
                   type="text"
                   placeholder="Key"
-                  ref={InputRef(key ?? "")}
-                  onBlur={(e) =>
+                  value={key ?? ""}
+                  onChange={(e) =>
                     updateKeyValuePairs(
                       keyValuePairs.toSpliced(index, 1, {
                         key: e.target.value,
@@ -426,11 +426,11 @@ const NodeKeyValueInput: FC<{
                     )
                   }
                 />
-                <Input
+                <LocalValuedInput
                   type="text"
                   placeholder="Value"
-                  ref={InputRef(value ?? "")}
-                  onBlur={(e) =>
+                  value={value ?? ""}
+                  onChange={(e) =>
                     updateKeyValuePairs(
                       keyValuePairs.toSpliced(index, 1, {
                         key: key,
@@ -640,17 +640,15 @@ const NodeStringInput: FC<{
           className="nodrag relative"
           onClick={schema.secret ? () => handleInputClick(selfKey) : undefined}
         >
-          <Input
+          <LocalValuedInput
             type="text"
             id={selfKey}
-            ref={InputRef(
-              schema.secret && value ? "*".repeat(value.length) : value,
-            )}
+            value={schema.secret && value ? "*".repeat(value.length) : value}
+            onChange={(e) => handleInputChange(selfKey, e.target.value)}
             readOnly={schema.secret}
             placeholder={
               schema?.placeholder || `Enter ${beautifyString(displayName)}`
             }
-            onBlur={(e) => handleInputChange(selfKey, e.target.value)}
             className="pr-8 read-only:cursor-pointer read-only:text-gray-500"
           />
           <Button
@@ -737,11 +735,13 @@ const NodeNumberInput: FC<{
   return (
     <div className={className}>
       <div className="nodrag flex items-center justify-between space-x-3">
-        <Input
+        <LocalValuedInput
           type="number"
           id={selfKey}
-          ref={InputRef(value)}
-          onBlur={(e) => handleInputChange(selfKey, parseFloat(e.target.value))}
+          value={value}
+          onChange={(e) =>
+            handleInputChange(selfKey, parseFloat(e.target.value))
+          }
           placeholder={
             schema.placeholder || `Enter ${beautifyString(displayName)}`
           }

autogpt_platform/frontend/src/components/ui/input.tsx

@@ -23,4 +23,35 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 );
 Input.displayName = "Input";
 
-export { Input };
+const LocalValuedInput: React.FC<InputProps> = ({
+  value,
+  onChange,
+  ...props
+}) => {
+  /**
+   * Input component that manages its own value state.
+   * This component is useful when you want to control the value of the input
+   * from the parent component, but also want to allow the user to change the value.
+   */
+  const [inputValue, setInputValue] = React.useState(value ?? "");
+
+  React.useEffect(() => {
+    if (value !== undefined && value !== inputValue) {
+      setInputValue(value);
+    }
+    // Note:
+    // It's intended that the `inputValue` not being added to the dependency array,
+    // `inputValue` should only be updated from the outside only when `value` changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+    if (onChange) onChange(e);
+  };
+
+  return <Input {...props} value={inputValue} onChange={handleChange} />;
+};
+LocalValuedInput.displayName = "LocalValuedInput";
+
+export { Input, LocalValuedInput };