fix(frontend): stop silently destroying dict entries when key cleared by djpjronline-netizen · Pull Request #12847 · Significant-Gravitas/AutoGPT

djpjronline-netizen · 2026-04-18T13:54:10Z

Why / What / How

Why: WrapIfAdditionalTemplate (the RJSF template for dict / additional-properties fields) wired onBlur on the key input to call onRemoveProperty whenever the field was empty. A user who tabbed through a populated entry and briefly cleared the key — or pressed Delete by accident — would lose the entry with no warning, no confirmation, and no announcement to assistive tech. An explicit Remove button already exists immediately below the entry; the implicit blur-to-delete path was pure data-loss risk. WCAG 3.2.2 (On Focus), 3.3.4 (Error Prevention).

What: Keep the convenient "abandoned new entry cleans up on blur" flow, but stop destroying populated entries when the key is cleared.

How: Track whether the key has ever been non-empty with a ref initialized from the mount-time label:

New entry (never populated) + blur with empty key → auto-remove (preserves original UX)
Populated entry + user clears the key + blur → fall through to onKeyRenameBlur (entry stays, RJSF surfaces empty key as a validation error)

User has to use the explicit Remove button to actually delete a populated entry.

Changes 🏗️

One file: src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx (+19 / −3 lines).

Preserves the abandoned-new-entry cleanup. Removes the silent-destruction hazard for populated entries.

Checklist 📋

For code changes:

I have clearly listed my changes in the PR description
I have made a test plan
I have tested my changes according to the test plan:
- pnpm types passes
- Block with a dict field (e.g., HTTP Request headers). Click Add Item → new empty entry appears. Click away without typing → entry auto-removes (unchanged behavior)
- Add an entry, type a key, type a value, click away. Then clear the key and click away → entry stays with empty key (RJSF shows validation error) instead of disappearing silently
- Click the explicit Remove button on a populated entry → entry is removed (unchanged)

Part of a six-branch accessibility pass. Does not depend on the other five branches.

WrapIfAdditionalTemplate wired `onBlur` on the dict-key input to call `onRemoveProperty` whenever the field was empty. A user who tabbed through a populated entry and briefly cleared the key (or pressed Delete by accident) would lose the value with no warning, no confirmation, and no announcement to assistive tech. An explicit Remove button already exists right below — the implicit path was pure data-loss risk. Fix: track whether the key has ever been non-empty. Auto-remove still fires for the "added a new entry, blurred without typing anything" flow (so brand new empty entries clean up as before), but once a user has entered a key, clearing and blurring just renames to empty string. RJSF surfaces an empty key as a validation error, and the user has to use the Remove button to actually delete. Preserves the convenience of the abandoned-new-entry cleanup. Removes the silent-destruction hazard for populated entries.

CLAassistant · 2026-04-18T13:54:18Z

All committers have signed the CLA.

github-actions · 2026-04-18T13:54:19Z

This PR targets the master branch but does not come from dev or a hotfix/* branch.

Automatically setting the base branch to dev.

coderabbitai · 2026-04-18T13:54:30Z

Walkthrough

Modified blur event handling in an object property input component to better track whether a key field has been populated, improving logic for deciding whether to remove or retain properties when the input is cleared.

Changes

Cohort / File(s)	Summary
Object Input Property Management `autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx`	Added `useRef` to track whether the key field ever had a non-empty value. Updated `handleBlur` logic to distinguish between never-populated keys (removes property) versus previously-populated keys (retains entry by calling `onKeyRenameBlur` instead of `onRemoveProperty`).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

size/s, platform/frontend

Suggested reviewers

ntindle

Poem

🐰 A key that whispered, then forgot to stay,
Now tracked with care through blur and day,
The ref remembers what was typed before,
So empty fields won't vanish anymore!
Smart logic hops where data flows.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main change: preventing silent destruction of dictionary entries when keys are cleared.
Description check	✅ Passed	The description provides clear context about why the change was made (accessibility and data-loss prevention), what was changed, how it was implemented, and includes a detailed test plan and checklist.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx (1)
48-67: ⚠️ Potential issue | 🟠 Major

Move hadKeyRef above the conditional return.

useRef is called only when additional is true (line 67, after the early return on line 49). This violates React's rules of hooks — hooks must be called unconditionally and in the same order on every render. Move const hadKeyRef = useRef(Boolean(label)) to the top of the component, before the if (!additional) check.

Use a function declaration for handleBlur instead of an arrow function.

Per the coding guidelines, handlers in React components should use function declarations, not arrow functions (reserve arrow functions for small inline callbacks like map/filter).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx`
around lines 48 - 67, The hook useRef is currently called conditionally (const
hadKeyRef = useRef(Boolean(label)) after the early return for additional), which
breaks React's Rules of Hooks; move the declaration of hadKeyRef to the top of
the component body so it executes unconditionally before the if (!additional)
return. Also replace the arrow-function handler for handleBlur with a named
function declaration (e.g., function handleBlur(event) { ... }) per the
project's handler style; ensure references to id, label, keyId and
generateObjectPropertyTitleId remain unchanged and that handleBlur continues to
update hadKeyRef and perform the same blur logic.

🧹 Nitpick comments (1)

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx (1)

69-83: Use a function declaration for the modified handler.

This handler is part of the changed blur behavior, so it should follow the frontend handler style.

♻️ Proposed refactor

-  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+  function handleBlur(e: React.FocusEvent<HTMLInputElement>) {
     if (e.target.value !== "") {
       hadKeyRef.current = true;
       onKeyRenameBlur(e);
       return;
@@
     } else {
       onRemoveProperty();
     }
-  };
+  }

As per coding guidelines, autogpt_platform/frontend/**/*.{tsx,ts}: Use function declarations (not arrow functions) for components and handlers.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx`
around lines 69 - 83, Convert the arrow handler to a function declaration:
replace the const arrow "handleBlur = (e: React.FocusEvent<HTMLInputElement>) =>
{ ... }" in WrapIfAdditionalTemplate.tsx with a function declaration "function
handleBlur(e: React.FocusEvent<HTMLInputElement>) { ... }" keeping the exact
existing logic and references to hadKeyRef.current, onKeyRenameBlur(e), and
onRemoveProperty(); ensure the signature uses React.FocusEvent<HTMLInputElement>
and that the function is used the same way by any JSX props or event bindings.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In
`@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx`:
- Around line 48-67: The hook useRef is currently called conditionally (const
hadKeyRef = useRef(Boolean(label)) after the early return for additional), which
breaks React's Rules of Hooks; move the declaration of hadKeyRef to the top of
the component body so it executes unconditionally before the if (!additional)
return. Also replace the arrow-function handler for handleBlur with a named
function declaration (e.g., function handleBlur(event) { ... }) per the
project's handler style; ensure references to id, label, keyId and
generateObjectPropertyTitleId remain unchanged and that handleBlur continues to
update hadKeyRef and perform the same blur logic.

---

Nitpick comments:
In
`@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx`:
- Around line 69-83: Convert the arrow handler to a function declaration:
replace the const arrow "handleBlur = (e: React.FocusEvent<HTMLInputElement>) =>
{ ... }" in WrapIfAdditionalTemplate.tsx with a function declaration "function
handleBlur(e: React.FocusEvent<HTMLInputElement>) { ... }" keeping the exact
existing logic and references to hadKeyRef.current, onKeyRenameBlur(e), and
onRemoveProperty(); ensure the signature uses React.FocusEvent<HTMLInputElement>
and that the function is used the same way by any JSX props or event bindings.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9e3106f3-eddc-4170-86fd-9c10b327de9d

📥 Commits

Reviewing files that changed from the base of the PR and between 1c0c7a6 and 2ac3bb7.

📒 Files selected for processing (1)

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx

📜 Review details

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: Seer Code Review

🧰 Additional context used

📓 Path-based instructions (11)

autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Use Node.js 21+ with pnpm package manager for frontend development
Always run 'pnpm format' for formatting and linting code in frontend development

Format frontend code using pnpm format

Files:

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx

autogpt_platform/frontend/**/*.{tsx,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

autogpt_platform/frontend/**/*.{tsx,ts}: Use function declarations for components and handlers (not arrow functions) in React components
Only use arrow functions for small inline lambdas (map, filter, etc.) in React components
Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Use Tailwind CSS utilities only for styling in frontend components
Use design system components from 'src/components/' (atoms, molecules, organisms) in frontend development
Never use 'src/components/legacy/' in frontend code
Only use Phosphor Icons (@phosphor-icons/react) for icons in frontend components
Use generated API hooks from '@/app/api/generated/endpoints/' instead of deprecated 'BackendAPI' or 'src/lib/autogpt-server-api/'
Use React Query for server state (via generated hooks) in frontend development
Default to client components ('use client') in Next.js; only use server components for SEO or extreme TTFB needs
Use '' component for rendering errors in frontend UI; use toast notifications for mutation errors; use 'Sentry.captureException()' for manual exceptions
Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)

Files:

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx

autogpt_platform/frontend/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

autogpt_platform/frontend/**/*.{ts,tsx}: No barrel files or 'index.ts' re-exports in frontend code
Regenerate API hooks with 'pnpm generate:api' after backend OpenAPI spec changes in frontend development

autogpt_platform/frontend/**/*.{ts,tsx}: Fully capitalize acronyms in symbols, e.g. graphID, useBackendAPI
Use function declarations (not arrow functions) for components and handlers
No dark: Tailwind classes — the design system handles dark mode
Use Next.js <Link> for internal navigation — never raw <a> tags
No any types unless the value genuinely can be anything
No linter suppressors (// @ts-ignore``, // eslint-disable) — fix the actual issue
Keep files under ~200 lines; extract sub-components or hooks into their own files when a file grows beyond this
Keep render functions and hooks under ~50 lines; extract named helpers or sub-components when they grow longer
Use generated API hooks from `@/app/api/generated/endpoints/` with pattern `use{Method}{Version}{OperationName}` and regenerate with `pnpm generate:api`
Do not use `useCallback` or `useMemo` unless asked to optimise a given function
Separate render logic (`.tsx`) from business logic (`use*.ts` hooks)
Use ErrorCard for render errors, toast for mutations, and Sentry for exceptions in the frontend

Files:

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx

autogpt_platform/frontend/src/components/**/*.{tsx,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Structure React components as: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts (exception: small 3-4 line components can be inline; render-only components can be direct files)

Files:

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx

autogpt_platform/frontend/src/components/**/*.{ts,tsx}