bug: ref called in specified order and not after initializing element with all its attributes/properties

[jcfranco]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

2.20.0/3.0.1

Current Behavior

The order of ref matters and can lead to props/attributes being outdated by the time the callback is invoked.

Expected Behavior

ref is called right after the element is fully initialized with all props/attributes. This aligns with other libraries that implement a similar ref mechanism (e.g., React, preact, maquette).

System Info

OS X 13.2.1, npm 8.3.1, node 16.13.2, Chrome 110.0.5481.100

Steps to Reproduce

Follow the steps to the repro case below.

Code Reproduction URL

https://github.com/jcfranco/stencil-ref-called-in-prop-order-instead-of-after-node-being-initialized

Additional Information

For comparison, I also created the following repro cases:

• React
• Preact
• Maquette

[alicewriteswrongs]

Hi @jcfranco, thanks for reporting this issue!

We have a few issues relating to ref and order-of-operations which have been previously reported. For instance #3564 reports issues with new and old refs, and #3253 reports on a situation where a ref can be set to null in a situation where it shouldn't.

Is it possible that this issue is reflective of the same underlying problem? By that I mean, those particular issues really can only be fixed by refactoring how Stencil's virtual DOM works to commit changes in an atomic way. We have plans to scope out and make that sort of fix in the future, but haven't been able to work it in to our plans just yet.

Anywhooo - if you think that this is a separate issue we can for sure keep this issue open, but if it's a different symptom of the same underlying problem it might be good to add some of the information here on one of the other existing issues.

Thanks again for filing and providing a reproduction case! I know that these ref and rendering callback order errors are not great to run into.

[jcfranco]

@alicewriteswrongs Thanks for reply. 😄

if you think that this is a separate issue we can for sure keep this issue open, but if it's a different symptom of the same underlying problem it might be good to add some of the information here on one of the other existing issues.

I think this could remain open mainly because the referenced issues above have no context about the order of props/attributes affecting the ref callback node. I think that makes it different from the others, but I'll let you make that call.

[alicewriteswrongs]

Sure, we can leave this open for now. We do have plans to address these ref and lifecycle related issues in a holistic way, so I'll add this issue to a list which we're using to validate any possible changes / check for regressions / etc.

Thanks for filing!

[rwaskiewicz]

The fix for this issue has been released as a part of today's Stencil v4.14.1 release.