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:
lif
2026-01-06 00:10:47 +08:00
committed by GitHub
parent bdba0033de
commit 01f443190e
2 changed files with 11 additions and 3 deletions

View File

@@ -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);

View File

@@ -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)),
},