Skip to content

Commit

Permalink
fix(frontend): Newly typed text in Input fields vanishes on scroll (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
majdyz authored Nov 15, 2024
1 parent ea214d9 commit f27f596
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 16 deletions.
30 changes: 15 additions & 15 deletions autogpt_platform/frontend/src/components/node-input-components.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)}`
}
Expand Down
33 changes: 32 additions & 1 deletion autogpt_platform/frontend/src/components/ui/input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 };

0 comments on commit f27f596

Please sign in to comment.