From 01f443190e415e0203e10182772abb7cc4c4867e Mon Sep 17 00:00:00 2001
From: lif <1835304752@qq.com>
Date: Tue, 6 Jan 2026 00:10:47 +0800
Subject: [PATCH] fix(frontend): allow empty values in number inputs and fix
 AnyOfField toggle (#11661)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- ⚠️ 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>
---
 .../fields/AnyOfField/useAnyOfField.tsx              | 12 ++++++++++--
 .../widgets/TextInputWidget/TextInputWidget.tsx      |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/renderers/input-renderer/fields/AnyOfField/useAnyOfField.tsx b/autogpt_platform/frontend/src/components/renderers/input-renderer/fields/AnyOfField/useAnyOfField.tsx
index 7b35776476..073ed1f8e5 100644
--- a/autogpt_platform/frontend/src/components/renderers/input-renderer/fields/AnyOfField/useAnyOfField.tsx
+++ b/autogpt_platform/frontend/src/components/renderers/input-renderer/fields/AnyOfField/useAnyOfField.tsx
@@ -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);
 
diff --git a/autogpt_platform/frontend/src/components/renderers/input-renderer/widgets/TextInputWidget/TextInputWidget.tsx b/autogpt_platform/frontend/src/components/renderers/input-renderer/widgets/TextInputWidget/TextInputWidget.tsx
index d9fea28a8d..83fe826223 100644
--- a/autogpt_platform/frontend/src/components/renderers/input-renderer/widgets/TextInputWidget/TextInputWidget.tsx
+++ b/autogpt_platform/frontend/src/components/renderers/input-renderer/widgets/TextInputWidget/TextInputWidget.tsx
@@ -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)),
     },