@children timing issue

[JeroenVinke]

This is a continuation of https://github.com/aurelia/templating/issues/379#issuecomment-225373659

When bluebird is used a timing issue occurs where the @children array is empty from the attached() callback. I was able to resolve this by using the unminified bluebird (instead of the minified one) but this doesn't resolve the issue for everyone. @children is used a lot in aurelia-kendoui-bridge. For example, @children is used to get <ak-col> definitions inside a <ak-grid>.

Since a lot of people rely on bluebird to resolve the Edge issue this effectively makes the bridge unusable. I was able to workaround this issue by delaying code in the attached() callback using the taskqueue but that caused other issues.

gist.run: https://gist.run/?id=14ac85668b3ca27dcd8ad6d3f6579fb0 repository: https://github.com/JeroenVinke/children-timing-issue

[JeroenVinke]

this workaround instead of using @children seems to work for everyone. So we're good for a while

[EisenbergEffect]

Bear in mind, you only really need to use child/children if the collection is going to change over time. If you do use it, the best way to know when it's happening is to implement the change handler. That will ensure you don't have timing issues. I'm pretty curious why bluebird would cause this issue though. It's very odd. Does it happen on all browsers?

[pfurini]

@JeroenVinke the workaround you linked, I suspect it doesn't work when you need live changes from children elements, is it correct? I can't rely on custom elements anymore, because currently I can't find a working way to react to changes to children elements. See also my last attempt in the issue I opened yesterday: https://github.com/aurelia/templating/issues/401 Now my only options are dirty checking the innerHTML or switch to using custom attributes..

[JeroenVinke]

@EisenbergEffect

Using the minified bluebird shows the bug in all browsers, but the bug doesn't show up in chrome when the unminified version of bluebird is used.

[JeroenVinke]

@nexbit nope it doesn't detect when child elements are added / removed.

[DerAlbertCom]

i have a similar problem with @child('foo') foo, it works and is filled on attached() in a fresh load of the complete application (F5), but if i navigate to that page foo is undefined.

In Chrome, everything minimized ;) no bluebird promises at all

[cerealBoxx]

Will this get a fix soon?

[EisenbergEffect]

We can't give an exact timeline on this fix. Hopefully in the next week or two. To speed things up, someone can help to track down what is going on and recommend some improvements or submit a PR.

[cerealBoxx]

Hello, can you tell me how I could submit a PR for the resolution of this bug because it's delaying our development? I tried in the meantime to track the issue, however, I couldn't do much. The component I have has an if.bind on it and all I could find is that the If object has a children property which remains unpopulated and the if eventually throws an error because the _runValueChanged function returns an undefined.

[EisenbergEffect]

@cerealBoxx Can you create a simples possible reproduction of the issue, zip it and attach it here? There's a good change we can address it next week.

[cerealBoxx]

https://github.com/JeroenVinke/children-timing-issue this project has a very similar error to ours also here is a demo of our issue - basically the same error in the console:

https://github.com/cerealBoxx/aurelia-children-error/

Thank you in advance

[swalters]

any update on this issue? I'm seeing it in Firefox and not Chrome

[EisenbergEffect]

Since there's a workaround above we've lowered the priority on this. Community members are welcome to send a PR if it's an important issue for them. The best way to get an issue fixed that you care about is to fix it and send it to us.

[swalters]

Believe me, I get it. But I think this should be a very high priority because @children is not dependable and should be documented as 'do not use' until this is fixed.

[ejsmith]

This just bit us pretty hard. Has there been any progress in figuring this issue out? It only happened in Firefox for us.

[Vheissu]

Just got bitten by this and was linked to this issue.

For me, the problem occured after moving polyfills to be included before aurelia-bootstrapper in my Webpack configuration file. The @children decorator was working fine and accessible from within attached and then, nothing.

The fix for me was to use a change callback on my @children decorator similarly to how @bindable and @observable currently work.

export class MyClass {
    @children('step') currentSteps;

    currentStepsChanged() {
        // this.currentSteps is populated
    }

    attached() {
        // this.currentSteps is undefined in here for me
    }
}