Bug: New input is not emptied after condition changes

This issue has been created since 2022-11-19.

React version: 18.1.0

Steps To Reproduce

  1. https://codesandbox.io/s/great-franklin-0c08dm?file=/src/App.js
  2. Enter any value in the textbox and press "Next"
  3. On the second page, you will see that the value entered is retained even though it's a new totally different textbox (they have different ids and different props.

Link to code example: https://codesandbox.io/s/great-franklin-0c08dm?file=/src/App.js

The current behavior

The second input retains the value from the first input.

The expected behavior

The second input's value should be reset and display the placeholder text.

frontend-winter wrote this answer on 2022-11-21

I found the same thing

frontend-winter wrote this answer on 2022-11-21

This is still true when I try to use the defaultValue property, why isn't it officially marked as a bug

vkurchatkin wrote this answer on 2022-11-21

This is not a bug. As far as React can tell, this is the same input

it's a new totally different textbox (they have different ids and different props.

This doesn't matter for React. If you want to indicate that two elements are distinct, you need to add key property for them

nubpro wrote this answer on 2022-11-22

This is not a bug. As far as React can tell, this is the same input

it's a new totally different textbox (they have different ids and different props.

This doesn't matter for React. If you want to indicate that two elements are distinct, you need to add key property for them

I understand this is how React currently sees it, perhaps there could be an enhancement made or a warning to indicate the possible problems like how React warns when you try to make changes to uncontrolled input?

On top of your suggested method, I've found that I could avoid this problem by making both inputs controlled (but this is far from ideal as it causes re-render on every key stroke). That aside, one of the Discord member Spork suggested to split the second screen into a different component, that too works.

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-12-10
Star Count 198882
Watcher Count 6638
Fork Count 41302
Issue Count 1120

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Detection and semantic task, the detection mAP is 11.3 and does not reach the mAP64 mentioned in the paper? 2 2021-11-17 2022-11-13
how can get intrinsic calibration k1、k2、k3、k4 1 2021-11-17 2022-11-13
In the detection task, the size of anchor? 1 2021-11-18 2022-11-13
Synchronization fails. 1 2022-09-05 2022-10-05
Fail to run block-cli v2.0.0.beta 2 0 2021-06-11 2022-12-09
Legacy tokens for Slack 2 2021-03-31 2022-08-06
Smart TOC两年多没更新了,建议替换 0 2022-05-02 2022-10-26
can't convert excel ton dataframe 3 2021-07-20 2022-12-05
Turing example broken with MethodError on whiten() 0 2022-09-18 2022-09-28
Catching volume buttons 3 2022-08-29 2022-11-30
Binary-blob detection is broken in filter-repo-demos/lint-history with Python3 1 2021-03-13 2022-09-29
Mask-RCNN TF 2.4.1 Compatibility 4 2022-02-04 2022-11-17
Make Insights Table More Descriptive in Spam 2 3 2022-04-06 2022-11-22
Fix Typo Error in 103 "hiden" to "hidden" 9 2022-04-06 2022-09-09
.setRelationLoadStrategy("query") missing 6 2022-04-08 2022-10-04
Inconsistencies with 4 broken limbs 3 2022-01-11 2022-09-21
You can't use min_value without also using max_value 0 2021-11-05 2022-10-12
Enqueue parent widget CSS when extending basic gallery widget and Improved CSS Loading experiment enabled 2 2022-02-22 2022-09-28
🐞 Bug report: Placeholder image duplication on import [ Third Party Addon Pack issue ] 0 2022-02-22 2022-10-27
0.60.0 is incompatible with git < 2.28 7 2021-10-25 2022-11-05
PolicyFragment ARM Template deployment fails - The policy fragment is not a valid XML: 0 2022-08-24 2022-12-02
POST API Validate-Content Policy - Inconsistent errors for missing JSON array beginning and end square brackets 1 2021-09-10 2022-12-02
Container doesn't stop on SIGINT 1 2021-07-29 2022-10-12
新问题请在 mirai 仓库提交 0 2021-12-13 2022-01-16
/help能不能用转发消息的方式 3 2021-10-27 2022-01-16
添加"使单独某个账号下线"的命令 3 2021-09-23 2022-01-16
[Bug Report] [Component] [carousel, carousel-item] el-input组件的 :prefix-icon属性 在 Carousel组件 中失效 2 2022-04-15 2022-10-16
[Bug Report] [Component] [transfer]校验Form表单中的ElTransfer时,会把ElTransfer里面的搜索框置成错误状态 1 2022-04-15 2022-10-09
No Android SDK available for Nix builds on Darwin aarch64 10 2021-11-05 2022-12-09
openvpn - unable to contact daemon, service not running? 13 2021-08-05 2022-11-30
Binary compatibility for 1.0 document 1 2020-06-09 2022-09-30
Sketch a template to augment existing specifications 4 2020-08-20 2022-12-04
Translation for the page 'Components -> MarkdownPage' 0 2019-02-16 2022-11-29
Add Debian PPA mindforger.com/debian-bullseye 2 2022-01-09 2022-11-28
504 Gateway Timeout When Doing Very Long Computations On Home Server 1 2022-09-05 2022-12-04
PDFs, please? 1 2019-04-10 2022-01-09
Getting BrowserslistError in WebdriverIO 1 2021-07-06 2022-09-28
Board calendar for 2020 1 2020-09-10 2022-11-20
Fix issue of state info message including archived block height 0 2020-05-06 2022-07-15
Add S2I support for the iot-demo 1 2018-03-19 2022-11-22
about fine-tune using sdcup 1 2022-07-06 2022-11-23
fullnat 模式下 ipvsadm -S 与 ipvsadm -R 的问题 3 2016-01-08 2022-11-30
My font-icons and logo images have failed to load when i use the reactjs production build(npm run build) 8 2019-05-10 2022-12-07
Bump to actions/[email protected] in cifuzz template ? 3 2022-11-14 2022-11-23
description panel 1 2022-01-13 2022-01-14
mypy/pylint paths are incorrectly synced and not found when custom config is removed 5 2021-11-10 2022-08-09
Add /healthz check 0 2019-07-09 2021-11-28
gunicorn worker is hanging on "Worker exiting" 4 2021-12-23 2022-11-25
Async component doesn't get initial props which are passed as element properties 0 2019-11-11 2022-11-10
Now uses the Maui Maui.Core 0 2021-04-06 2022-11-09