Custom tagName Components don't work with boolean HTML attributes

[owain]

HTML attributes on a custom element (Ember Component with custom tagName) don't work with attributeBindings as expected. When trying to bind the disabled state of a custom element the attribute is not set correctly according to it's boolean value.

Example

<button disabled={{isDisabled}}> will work as expected but {{custom-button disabled=isDisabled}} (with tagName: ‘custom-button’) won't work as it produces <custom-button disabled=“false”> (the presence of the disabled attribute means it’s disabled even though it's set to false).

So the following Ember Component:

App.CustomButtonComponent = Em.Component.extend({
  tagName: 'custom-button',
  attributeBindings:['disabled'],
  disabled: false
});

Output: <custom-button disabled="false">Press Me</custom-button>
Expected: <custom-button>Press Me</custom-button>

---

Here's a JSBin Example to illustrate the issue.

The behaviour seems to have changed in Ember 1.10/1.11. This JSBin shows the behaviour in Ember 1.9.1 where the disabled attribute never gets set to true. But I'm sure this used to work in our app before we upgrade so I'm a bit confused.

I chatted a bit with @mmun and it's likely because Ember uses HTMLUnknownElement for custom elements and attrName in elementInstance to check if its a DOM property or not.

[mmun]

I'm marking this as a regression for now, but the behaviour of custom elements was never specified.

[owain]

Mentioning #9595 as it looks related.
@rwjblue suggested using null for attributes that should not be added - but this wan't in the context of a custom tag name.

[Truffula]

I'll throw this in here in case it helps someone in the meantime:

// There are two hard things in computer science...
Ember.computed.nullIfEmptyOrFalse = function(name) {
    return Ember.computed(name, {
        get: function() {
            var val = Ember.get(this, name);
            return !val || Ember.isEmpty(val) ?
                null :
                val;
        }
    });
};

[webark]

in ember 1.13.3 (cli 1.13.1), <button disabled="{{false}}"> Button </button> is redering <button disabled> Button </button> for me.

[mmun]

Use disabled={{false}}.

[webark]

ooohhh... 🐑.... (force wave) "I was never here"

[mmun]

Did you guys hear something?

[rwjblue]

I believe this is working as intended currently. Using null or undefined prevents setting an attribute (similar to how {{bind-attr}} worked previously), but using false is coerced to a string which means true.

Demo using null: http://emberjs.jsbin.com/heqecu/edit?html,js,output