mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-01-10 07:38:04 -05:00
fix(frontend): allow empty values in number inputs and fix AnyOfField toggle (#11661)
<!-- ⚠️ Reminder: Think about your Changeset/Docs changes! --> <!-- If you are introducing new blocks or features, document them for users. --> <!-- Reference: https://github.com/Significant-Gravitas/AutoGPT/blob/dev/CONTRIBUTING.md --> ## Summary This PR fixes two related issues with number/integer inputs in the frontend: 1. **HTMLType typo fix**: INTEGER input type was incorrectly mapped to `htmlType: 'account'` (which is not a valid HTML input type) instead of `htmlType: 'number'`. 2. **AnyOfField toggle fix**: When a user cleared a number input field, the input would disappear because `useAnyOfField` checked for both `null` AND `undefined` in `isEnabled`. This PR changes it to only check for explicit `null` (set by toggle off), allowing `undefined` (empty input) to keep the field visible. ### Root cause analysis When a user cleared a number input: 1. `handleChange` returned `undefined` (because `v === "" ? undefined : Number(v)`) 2. In `useAnyOfField`, `isEnabled = formData !== null && formData !== undefined` became `false` 3. The input field disappeared ### Fix Changed `useAnyOfField.tsx` line 67: ```diff - const isEnabled = formData !== null && formData !== undefined; + const isEnabled = formData !== null; ``` This way: - When toggle is OFF → `formData` is `null` → `isEnabled` is `false` (input hidden) ✓ - When toggle is ON but input is cleared → `formData` is `undefined` → `isEnabled` is `true` (input visible) ✓ ## Test plan - [x] Verified INTEGER inputs now render correctly with `type="number"` - [x] Verified clearing a number input keeps the field visible - [x] Verified toggling the nullable switch still works correctly Fixes #11594 🤖 AI-assisted development disclaimer: This PR was developed with assistance from Claude Code. --------- Signed-off-by: majiayu000 <1835304752@qq.com> Co-authored-by: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
This commit is contained in:
@@ -64,7 +64,9 @@ export const useAnyOfField = (
|
||||
|
||||
const [selectedType, setSelectedType] = useState<string>(initialSelectedType);
|
||||
|
||||
const isEnabled = formData !== null && formData !== undefined;
|
||||
// Only check for explicit null (set by toggle off), not undefined (empty input)
|
||||
// This allows users to clear number inputs without the field disappearing
|
||||
const isEnabled = formData !== null;
|
||||
|
||||
const handleTypeChange = (t: string) => {
|
||||
setSelectedType(t);
|
||||
@@ -79,7 +81,13 @@ export const useAnyOfField = (
|
||||
}
|
||||
};
|
||||
|
||||
const handleValueChange = (value: any) => onChange(value);
|
||||
const handleValueChange = (value: any) => {
|
||||
if (isNullableType && value === null) {
|
||||
onChange(undefined);
|
||||
return;
|
||||
}
|
||||
onChange(value);
|
||||
};
|
||||
|
||||
const currentTypeOption = typeOptions.find((o) => o.type === selectedType);
|
||||
|
||||
|
||||
@@ -51,7 +51,7 @@ export const TextInputWidget = (props: WidgetProps) => {
|
||||
handleChange: (v: string) => (v === "" ? undefined : Number(v)),
|
||||
},
|
||||
[InputType.INTEGER]: {
|
||||
htmlType: "account",
|
||||
htmlType: "number",
|
||||
placeholder: "Enter integer value...",
|
||||
handleChange: (v: string) => (v === "" ? undefined : Number(v)),
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user