Ember.js: 3.11 regression when using "elementId" in templates

[kanongil]

After upgrading my code to 3.11, I receive an error: "Error: Changing a view's elementId after creation is not allowed".

Since I don't change the elementId anywhere in my code, and the new value is identical to the recorded value, I have explored further and found it to be a new bug.

I can trigger the issue with the following:

templates/application.hbs

{{my-test elementId="my-id" handler=(action test) value=myValue}}

controllers/application.js

export default Controller.extend({
    myValue: 123,

    test() {
        console.log('not used...');
    },

    init() {
        this._super(...arguments);

        next(() => {
            this.set('myValue', 321);
        });
    }
});

templates/components/my-test.hbs

Empty...

You can find failing copy here: https://github.com/kanongil/ember-fail

Note that I also tested it with angle-bracket components, and here it doesn't fail until I make the value {{mut}}.

It seems that the bug is triggered by a combination of using elementId, an action handler, and a mutable value that is set after it has been rendered.

[rwjblue]

Thank you for reporting!

[boris-petrov]

@rwjblue - is this on the roadmap for a fix soon? We cannot update past 3.10 because of this bug and I'll have to start thinking for workarounds if this is not something that is going to be fixed in a patch release. Thanks!

[rwjblue]

I'm definitely keen on getting a fix into a patch release, but I haven't had a chance to dig in to find the right fix yet.

[boris-petrov]

@rwjblue - ok, thanks, no worries, take your time, I just wanted to know if I had to think of workarounds.

[simonihmig]

I remember being able to "fix" this by passing id instead of elementId in a template (https://github.com/kaliber5/ember-bootstrap/pull/807/files), when tests started to fail in canary (at that time).

I contributed this to passing elementId as the "wrong" way to do it, i.e. pass id in a template as this makes it look more natural, HTML-like - and use elementId within the component's JS (if needed). But it seems passing elementId also is valid (see https://api.emberjs.com/ember/3.11/classes/Component/properties/elementId?anchor=elementId), so we have two equivalent APIs (in template-land) for the same thing (which is a bit confusing).

[boris-petrov]

@simonihmig - thanks for the idea! I was finally able to update to 3.11. :)

I still do think that this is a bug though and has to be researched.

[rwjblue]

Definitely agree that this needs to be fixed, just haven't had time to dig into it.

[barryofguilder]

I just ran into this when trying to upgrade my app yesterday 😀 Looks like the workaround will work for us too, so thanks @simonihmig!

[Samsinite]

Just ran into this yesterday as well when upgrading to 3.12, glad to at least see a work-around :). Is id going to continue to be supported? Didn't know that was even a property we could override and it isn't documented :(.

[chriskrycho]

@rwjblue and I just figured out what we need to do to fix, and I'll have a PR with both failing tests and a fix for it in a little bit! Thanks for the reports and the workarounds!

[rwjblue]

Thanks for working on this @chriskrycho! Assuming the fix is as "simple" as we expect, I think we'll be able to backport to 3.16 and 3.12.