diff --git a/packages/ember-htmlbars/tests/integration/component_invocation_test.js b/packages/ember-htmlbars/tests/integration/component_invocation_test.js
index 438147b671c..cc7c56ea63e 100644
--- a/packages/ember-htmlbars/tests/integration/component_invocation_test.js
+++ b/packages/ember-htmlbars/tests/integration/component_invocation_test.js
@@ -777,6 +777,28 @@ QUnit.test('non-block with each rendering child components', function() {
equal(jQuery('#qunit-fixture').text(), 'In layout. [Child: Tom.][Child: Dick.][Child: Harry.][Child: James.]');
});
+QUnit.test('specifying classNames results in correct class', function(assert) {
+ expect(1);
+
+ registry.register('component:some-clicky-thing', Component.extend({
+ tagName: 'button',
+ classNames: ['foo', 'bar'],
+ click() {
+ assert.ok(true, 'click was fired!');
+ }
+ }));
+
+ view = EmberView.extend({
+ template: compile('{{#some-clicky-thing classNames="baz"}}Click Me{{/some-clicky-thing}}'),
+ container: container
+ }).create();
+
+ runAppend(view);
+
+ let button = view.$('button');
+ ok(button.is('.foo.bar.baz.ember-view'), 'the element has the correct classes: ' + button.attr('class'));
+});
+
// jscs:disable validateIndentation
if (isEnabled('ember-htmlbars-component-generation')) {
QUnit.module('component - invocation (angle brackets)', {
diff --git a/packages/ember-views/lib/compat/attrs-proxy.js b/packages/ember-views/lib/compat/attrs-proxy.js
index c20ee49911c..0f1466ba506 100644
--- a/packages/ember-views/lib/compat/attrs-proxy.js
+++ b/packages/ember-views/lib/compat/attrs-proxy.js
@@ -40,13 +40,19 @@ let AttrsProxyMixin = {
_propagateAttrsToThis() {
let attrs = this.attrs;
- let values = {};
+
for (let prop in attrs) {
- if (prop !== 'attrs') {
- values[prop] = this.getAttr(prop);
+ if (prop !== 'attrs' &&
+ // These list of properties are concatenated and merged properties of
+ // Ember.View / Ember.Component. Setting them here results in them being
+ // completely stomped and not handled properly, BAIL OUT!
+ prop !== 'actions' &&
+ prop !== 'classNames' &&
+ prop !== 'classNameBindings' &&
+ prop !== 'attributeBindings') {
+ this.set(prop, this.getAttr(prop));
}
}
- this.setProperties(values);
},
initializeShape: on('init', function() {