diff --git a/ui-v2/app/components/app-view.js b/ui-v2/app/components/app-view.js index ed526eab0d4d..f4ae4791ce7a 100644 --- a/ui-v2/app/components/app-view.js +++ b/ui-v2/app/components/app-view.js @@ -11,6 +11,7 @@ export default Component.extend(SlotsMixin, { classNameBindings: ['enabled::disabled', 'authorized::unauthorized'], dom: service('dom'), didReceiveAttrs: function() { + this._super(...arguments); // right now only manually added classes are hoisted to const $root = get(this, 'dom').root(); let cls = get(this, 'class') || ''; @@ -22,18 +23,22 @@ export default Component.extend(SlotsMixin, { if (cls) { // its possible for 'layout' templates to change after insert // check for these specific layouts and clear them out - [...$root.classList].forEach(function(item, i) { + const receivedClasses = new Set(templatize(cls.split(' '))); + const difference = new Set([...$root.classList].filter(item => !receivedClasses.has(item))); + [...difference].forEach(function(item, i) { if (templatize(['edit', 'show', 'list']).indexOf(item) !== -1) { $root.classList.remove(item); } }); - $root.classList.add(...templatize(cls.split(' '))); + $root.classList.add(...receivedClasses); } }, didInsertElement: function() { + this._super(...arguments); this.didReceiveAttrs(); }, didDestroyElement: function() { + this._super(...arguments); const cls = get(this, 'class') + ' loading'; if (cls) { const $root = get(this, 'dom').root();