Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: <input> value never updated in unit test #5934

Closed
japgolly opened this issue Jan 28, 2016 · 6 comments
Closed

Bug: <input> value never updated in unit test #5934

japgolly opened this issue Jan 28, 2016 · 6 comments

Comments

@japgolly
Copy link

Say I have a component that renders an <input type="text" value="whatever">. If I try to unit test it using ReactTestUtils.Simulate.change, the component gets the updated value but then the value attribute in the DOM doesn't get the update.

See https://jsfiddle.net/c1ht6zwm/3/

@Josh-a-e
Copy link
Contributor

That's expected behaviour, read the controlled components docs for a better explanation https://facebook.github.io/react/docs/forms.html

@Josh-a-e
Copy link
Contributor

Apologies, I thought you meant the value was hard coded rather than inserted via state

@japgolly
Copy link
Author

Cool, I just re-read Controlled Components and was about to say "aren't I doing the same thing?" 😄

@jimfb
Copy link
Contributor

jimfb commented Jan 29, 2016

React does not guarantee to change the markup. As long as the rendered value within the input box is correct (ie. what the user sees is correct), then React is doing its job correctly. The markup is irrelevant.

FWIW, this behavior will probably be closer to what you want when #5680 merges.

@jimfb jimfb closed this as completed Jan 29, 2016
@zpao
Copy link
Member

zpao commented Jan 29, 2016

To clarify what @jimfb is saying - When React updates value, it currently does so via the property, which doesn't affect outerHTML. A super simplified example to show what React currently does: https://jsfiddle.net/1z2fey46/

@japgolly
Copy link
Author

Oh wow, I didn't know there was a difference. Rather, I thought outerHTML was a dynamic reflection of the tag and its (non-event) properties - I'm surprised to learn that it's not. Thanks @jimfb & @zpao.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants