form icon indicating copy to clipboard operation
form copied to clipboard

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

Open juanvilladev opened this issue 9 months ago • 1 comments

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

juanvilladev avatar Apr 01 '25 01:04 juanvilladev