Skip to content

Non-index keys in React causing inputs to be uncontrolled when removing array fields #1363

Open
@juanvilladev

Description

@juanvilladev

Describe the bug

When mapping through array fields, using static keys (non-changing) such as indexes, results in:

"A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://react.dev/link/controlled-components"

Your minimal, reproducible example

https://stackblitz.com/edit/vitejs-vite-tayuhyi2?file=package.json

Steps to reproduce

Add rows > open console > remove any row

Expected behavior

We should not receive any error messages from React regarding controlled/uncontrolled components.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

TS 5.7, Tanstack Form 1.2.3.

TanStack Form adapter

react-form

TanStack Form version

1.2.3

TypeScript version

5.7.2

Additional context

This PR #1319, I believe was supposed to fix this issue, however we can still replicate it on version 1.2.3 which is supposed to have the fix.
Edit: Actually looks like #1319 was not targeting this issue so this is still valid. Other users have also faced this issue on the discord:
https://discord.com/channels/719702312431386674/1100437019857014895/1353165162953314319

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions