Boolean element attributes (disabled, checked, etc.) in JSX

[jjt]

This is how I've been conditionally putting the disabled attribute on elements, with a boolean variable:

<input disabled={isDisabled} type=... />

When isDisabled is falsey, the attribute won't be output. When true, it will output the following, which works in browsers but is against the HTML5 spec:

<input disabled="true" type=... />

I could get in line with the spec by setting disabled="disabled" on the element, but that requires a ternary operation instead of a simple boolean:

<input disabled={isDisabled ? "disabled" : false} ... />

Ideally, my current bit of JSX (at the top of this issue) would output this HTML, assuming disabled is set to true:

<input disabled type=... />

More generally, if a known boolean attribute gets assigned a variable set to true as in my example, JSX should output just the attribute as per the HTML5 spec.

[sophiebits]

Agree that we should go with disabled="disabled" or just disabled. The former is XHTML-compatible, which may be desirable. Want to take a crack at a PR for this? :)

[jjt]

Sure, I'll take a look at it in the next few days.

Personally I'd rather emit HTML5-style bare attributes, but XHTML compatibility could be good as you say. Some sort of configuration or option to control that?

[chenglou]

I'm for the bare attributes! Although I don't think we should have configurations over this... it's a bit too granular imo.

[syranide]

I don't see why it should be configurable, if it can emit bare attributes, it should use disabled="disabled" as a fallback for when the browser isn't up to spec. EDIT: Hmm, IE8 actually supports bare attributes as well, are we actually supporting any browsers that don't? If so we should just go ahead and make it the only behavior.

I think it's worth considering adding bare attributes to JSX as well. EDIT: Oh wow, it already does, I had no idea.

[sophiebits]

@syranide Bare attributes were the standard way to do things before XHTML came along and told everyone to do disabled="disabled", so it should be supported everywhere (except in XHTML documents, of course).

[syranide]

@spicyj Cool, then it should be an easy and safe change right?

[sophiebits]

I think so.

[zpao]

cc @yungsters - I vaguely remember doing this for a reason. But if bare attributes work, then cool.

[yungsters]

I think this is a good idea, and the only reason it hasn't already been done is probably due to oversight.

You'll have to update DOMPropertyOperations.createMarkupForProperty and DOMPropertyOperations.setValueForProperty. Also, does this make sense for all attributes in DefaultDOMPropertyConfig that are configured with HAS_BOOLEAN_VALUE?

[syranide]

@yungsters Probably need to validate that all properties with HAS_BOOLEAN_VALUE really are meant to be bare.

[yungsters]

Yeah. If you find that there are some that should not be "valueless", may we need a HAS_NO_VALUE configuration.

[zpao]

Closed with #1005