"You modified "attachmentClass" twice" assertion failure when used with ember-tether

[pgengler]

I'm trying to use 5ad754f (the most recent commit to master as of right now, to get the isDestroyed fix from #255) and I get an assertion failure when using ember-modal-dialog with ember-tether:

Assertion Failed: You modified "attachmentClass" twice on <ember-modal-dialog-bug@component:modal-dialog::ember226> in a single render. It was rendered in "component:ember-modal-dialog/-tether-dialog" and modified in "component:ember-modal-dialog/-tether-dialog". This was unreliable and slow in Ember 1.x and is no longer supported. See emberjs/ember.js#13948 for more details.

I was able to reproduce this in a new app that only includes ember-modal-dialog/ember-tether (see https://github.com/pgengler/ember-modal-dialog-double-modified-bug).

The short version is that this:

<div id="tether-target"></div>

{{#modal-dialog tetherTarget="#tether-target"}}
  Hi
{{/modal-dialog}}

will trigger the assertion; if tetherTarget is omitted then it works.

[lukemelia]

Thanks for the report @pgengler. I assume from your wording that this does not happen with the most recent release?

[pgengler]

It seems like it is happening with the released 3.0.0-beta.0 as well (sorry, I've been working on upgrading an app so there are a lot of dependencies changing). It seems like this is Ember-version dependent - it starts happening with Ember 3.2 and up; with 3.1 it works.

[Redsandro]

I've been struggling with this for the past few hours on Ember 3.3 after upgrading. Google brought me here. Good to see that it doesn't necessarily have to be me who broke my own build. 😉

However, when removing tetherTarget I'm getting the following error:

There was an error running your app in fastboot. More info about the error:
Error: ember-wormhole failed to render into #modal-overlays because the element is not in the DOM

Similar to #248 but this is not a test. It doesn't help to add a custom div to the index.html.

[pgengler]

I did a little more digging and the problem seems to be here: https://github.com/yapplabs/ember-modal-dialog/blob/master/addon/components/tether-dialog.js#L19

(attachment is a dependent key of attachmentClass in components/modal-dialog.js). Including a value for attachment when using the component seems to avoid the problem.

With ember-cli & ember-source updated to ^3.2.0 in package.json this test will reproduce the problem

tests/integration/components/tether-dialog-test.js

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

module('Integration | Component | tether-dialog', function(hooks) {
  setupRenderingTest(hooks);

  test('without attachment', async function(assert) {
    await render(hbs`
      <div id="tether-target"></div>
      {{#modal-dialog
        tetherTarget="#tether-target"
      }}
        Hi
      {{/modal-dialog}}
    `);

    assert.ok(true);
  });

  test('with attachment', async function(assert) {
    await render(hbs`
      <div id="tether-target"></div>
      {{#modal-dialog
        attachment="middle center"
        tetherTarget="#tether-target"
      }}
        Hi
      {{/modal-dialog}}
    `);

    assert.ok(true);
  });
});

not ok 1 Chrome 68.0 - [undefined ms] - Global error: Uncaught Error: Assertion Failed: You modified "attachmentClass" twice on <dummy@component:modal-dialog::ember125> in a single render. It was rendered in "component:ember-modal-dialog/-tether-dialog" and modified in "component:ember-modal-dialog/-tether-dialog". This was unreliable and slow in Ember 1.x and is no longer supported. See https://github.com/emberjs/ember.js/issues/13948 for more details. at http://localhost:7357/assets/vendor.js, line 13154
 While executing test: Integration | Component | tether-dialog: without attachment
    ---
        Log: |
            { type: 'warn',
              text: '\'unable to require.unsee, please upgrade loader.js to >= v3.3.0\'\n' }
            { type: 'error',
              testContext:
               { id: 1,
                 name: 'Integration | Component | tether-dialog: without attachment',
                 items: [],
                 state: 'executing' },
              text: 'Uncaught Error: Assertion Failed: You modified "attachmentClass" twice on <dummy@component:modal-dialog::ember125> in a single render. It was rendered in "component:ember-modal-dialog/-tether-dialog" and modified in "component:ember-modal-dialog/-tether-dialog". This was unreliable and slow in Ember 1.x and is no longer supported. See https://github.com/emberjs/ember.js/issues/13948 for more details. at http://localhost:7357/assets/vendor.js, line 13154\n' }
    ...
not ok 2 Chrome 68.0 - [225 ms] - Integration | Component | tether-dialog: without attachment
    ---
        actual: >
            null
        stack: >
            http://localhost:7357/assets/vendor.js:13154
        message: >
            Uncaught Error: Assertion Failed: You modified "attachmentClass" twice on <dummy@component:modal-dialog::ember125> in a single render. It was rendered in "component:ember-modal-dialog/-tether-dialog" and modified in "component:ember-modal-dialog/-tether-dialog". This was unreliable and slow in Ember 1.x and is no longer supported. See https://github.com/emberjs/ember.js/issues/13948 for more details.
        negative: >
            false
        Log: |
    ...
ok 3 Chrome 68.0 - [120 ms] - Integration | Component | tether-dialog: with attachment

[pgengler]

BTW, for anyone else having this problem, as a workaround I've created app/components/modal-dialog.js in my app with this content:

import ModalDialog from 'ember-modal-dialog/components/modal-dialog';

export default ModalDialog.extend({
  attachment: 'middle center'
});

[jameshahn2]

@pgengler Exactly what I needed, thank you!