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

Submit/Reset inputs lose text when value=undefined. #12872

Closed
ellsclytn opened this issue May 21, 2018 · 9 comments · Fixed by #12780
Closed

Submit/Reset inputs lose text when value=undefined. #12872

ellsclytn opened this issue May 21, 2018 · 9 comments · Fixed by #12780

Comments

@ellsclytn
Copy link
Contributor

ellsclytn commented May 21, 2018

Do you want to request a feature or report a bug?

Bug.

What is the current behavior?

Creating an <input type='submit' with value={undefined} results in a button with no text. https://codesandbox.io/s/nn7p94y3rl

The same behaviour can be seen with type='reset'

I have a PR open with a proposed fix. #12780

What is the expected behavior?

The input should use the browser's default value for the input (Submit for en, etc.).

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React 16.3.2. Chrome 66.0.3359.139. macOS 10.13.4. Works in React 15 (unsure of earlier versions)

@cyan33
Copy link
Contributor

cyan33 commented May 21, 2018

IMHO, this should be done outside of React, like:

<input type="submit" value={someVal ? someVal : 'whatever'} />

But let's also listen to other people's opinion. 😄

@ellsclytn
Copy link
Contributor Author

Possibly. I'm hoping to be able to rely on the browser's default text so that I don't have to worry about creating localised text for the button itself.

@cyan33
Copy link
Contributor

cyan33 commented May 21, 2018

Actually on second thought though, if you have this in your bare html:

<input type="submit" value>

It would also show up this button with no text on it as well. Consistent-wise, I think this should not be a case where React bothers to do extraneous work to give it a default value.

@ellsclytn
Copy link
Contributor Author

ellsclytn commented May 21, 2018

Ah, but remember that a bare attribute does not mean undefined in HTML. It usually gets interpreted as true. When you supply an attribute in JSX, but don't assign anything to it, it's basically saying <input value={true} (which you can do, if you want. I'm just used to my linter telling me that the ={true} is redundant).

In other words, setting <input type='submit' value={undefined} /> is not the same (and is almost the opposite) as setting <input type='submit' value />

@ellsclytn
Copy link
Contributor Author

Or, another way of expressing what I just said:

JSX

<div className={undefined}>Hello, world</div>

Computes to the following HTML:

<div>Hello, world</div>

I believe the behaviour should be the same for the situation I've described in this issue.

@aweary
Copy link
Contributor

aweary commented May 21, 2018

We recommend using undefined for uncontrolled inputs, so using undefined here shouldn't affect the value of the input. Since this worked in React 15 this is a breaking change that was undocumented and likely unintentional, so we should fix it.

@gaearon
Copy link
Collaborator

gaearon commented May 21, 2018

Do we know when this regressed?

@ellsclytn
Copy link
Contributor Author

@nhunzaker
Copy link
Contributor

Is the fix here to simply bail-early on ReactDOMInput behavior from applying to submit/reset inputs? I wonder what would happen if you switched from type="text" to type="submit".

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

Successfully merging a pull request may close this issue.

5 participants