Repository: react
Issue: Boolean DOM properties coerce empty string to false, contrary to HTML standard
Labels: Type: Discussion

<!--
  Note: if the issue is about documentation or the website, please file it at:
  https://github.com/reactjs/reactjs.org/issues/new
-->

This is in kind of the same space as https://github.com/facebook/react/pull/13372 and is an offshoot of my attempt to better [model React DOM props in Flow](https://github.com/facebook/flow/pull/6727).

**tl;dr:** Should React warn when the value `""` is passed into a known boolean DOM prop?

---

**Do you want to request a *feature* or report a *bug*?**

Depends on interpretation 😅  This is possibly a bug, definitely an inconsistency worth mitigating IMHO.

**What is the current behavior?**

React normalises values supplied to [known DOM boolean props](https://github.com/facebook/react/blob/69e2a0d732e1ca74f6dc5df9d0ddd0bf24373965/packages/react-dom/src/shared/DOMProperty.js#L278-L331) (e.g. `readOnly`) such that passing the empty string `""` (being falsy in JavaScript) results in the corresponding attribute being omitted from the HTML output. However, in [HTML](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attribute), the empty string is a truthy value in this context; it's one of the values that the standard specifically allows in boolean attributes.

The above is a potential source of confusion in itself, but React 16's handling of unknown attributes gives rise to the following hypothetical scenario: a new DOM boolean attribute `foobar` is introduced, some people write JSX code that uses it as `foobar=""` (passed through to HTML, truthy), and later React adds `foobar` to its internal whitelist in a minor/patch version and starts processing it as a boolean (JS falsy, omitted from HTML); this would _technically_ be a breaking change for those people.

**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.**

https://codesandbox.io/s/y0pmz9149x

**What is the expected behavior?**

There is definitely a clash of expectations here at the interface of JS and HTML.

1. Coming from JS, `""` is falsy and treating it as such in a "boolean" prop is fine; from this perspective, the current behaviour is justifiable.
2. Coming from HTML, it might not be obvious that React is doing this "extra" processing and deviating from what's clearly stated in the HTML spec; from this perspective, the current behaviour is surprising.

There probably isn't justification for changing React's actual handling of `""` (not least for fear of breaking code that relies on this long-standing behaviour, see version information below), but perhaps a warning about the ambiguity is warranted, a la #13372?

Note that a warning won't fully mitigate the worst-case scenario I mentioned above (since we can't warn about a prop that we don't _know_ is a DOM boolean), but at least it would give some signal _after_ the React version update that the code might not be doing the expected thing anymore.

**Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?**

Versions of React as far back as 0.14 (and probably way older) process whitelisted boolean DOM props the same way.