Description
Hello!
Say I have a component Test:
components/test/template.hbs
<div {{did-insert (fn (mut this.element))}} {{will-destroy (fn (mut this.element) null)}} />
When that component is destroyed, it results in the following error:
You modified "element" twice on [object Object] in a single render. It was rendered in undefined and modified in undefined. [...]
If I instead perform the registering/unregistering like so:
components/test/template.hbs
<div {{did-insert this.register}} {{will-destroy this.unregister}} />
components/test/component.js
@action
register(element) {
this.element = element;
}
@action
unregister() {
this.element = null;
}
Destroying the component doesn't result in an error.
This happens when mut-ing any property with any value on destroy, by the way, not just an element or a property that has been set before.
For reference, here's the code I used to test it:
{{#if this.show}}
<Test />
{{/if}}
<Button @onClick={{toggle-action 'show' this}}>Toggle</Button>
Also, I'm not sure it makes any difference, but I'm on a canary build of Ember:
"ember-source": "https://s3.amazonaws.com/builds.emberjs.com/canary/shas/55f876ebc10bd1645e1e62fc5e0408266952259b.tgz"
"ember-cli": "github:ember-cli/ember-cli#ba9e3ea9bcad1c6e2299e40fe265cffe61d7a25b"
Any help would be appreciated!
UPDATE: It works if I use the action helper instead of fn. It also passes if I use ember-fn-helper-polyfill for fn. If I use the Ember 3.11 version of fn however, it fails with the error specified above.