React: Submit/Reset inputs lose text when value=undefined.

[ellsclytn]

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. https://github.com/facebook/react/pull/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]

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]

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]

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]

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]

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]

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]

Do we know when this regressed?

[ellsclytn]

Here: https://github.com/facebook/react/commit/fd69c239a0bb8fde412aa7c1c0cea9c7fda287a9#diff-2364bccf91025269af6a1cc9483ffdb3L247

[nhunzaker]

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".