bug: stencil core 4.22.3 listener

[RobinSchuler]

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

4.22.3

Current Behavior

Unfortunately I do not have a reproduction case right now.
With 4.22.3 we have a problem that listeners are not working. With 4.22.2 it works fine.
What I assume is happening:
we have 2 components (A and B) that both have a Subcomponent (C) which has a event listener.
When navigating from component A to B the Subcomponent C within B does not set the listener.
I think A (with Sub B) is not yet destructed properly which denies the setup of the listener B/C (change from here: #6052)

This result in stuff not working, pressing reload (or f5) makes them work for the current page.

Expected Behavior

This could be an Issue with us navigating before destruction so this is more of a question.

Expected:
Navigating from Component A to Component B that share a Subcomponent C should set the listener correctly

System Info

$npx stencil info

System: node 20.9.0
Platform: windows (16.0.19045)
CPU Model: Intel(R) Xeon(R) Gold 6248 CPU @ 2.50GHz (8 cpus)
Compiler: C:\dev\kommunikation\kommunikation-presentation\node_modules\@stencil\core\compiler\stencil.js
Build: 1732216626
Stencil: 4.22.3
TypeScript: 5.5.4
RoLLup: 2.50.3
Parse5: 7.1.2
]Query: 4.0.0-pre
Terser: 5.31.1

Steps to Reproduce

Have 2 Components A and B that share a Component C which has a Event listener. Navigate from A to B => C (in B) does not set Event listeners

Code Reproduction URL

https://github.com/OFurnell/stencil-listener-issue
thx @OFurnell

Additional Information

No response

[RobinSchuler]

As question (if my assumption is true):
Should stencil be able to handle that case or should we look to properly destruct before we navigate ?

Thanks for the clarification and sorry for a incomplete case (kinda busy right now because we release today and everything was broken)

[OFurnell]

I've had the same issue as well. I've created a repo that should replicate the issue: stencil-listener-issue

In this example, the component listener-component is a child of both sub-component-a and sub-component-b and should log to the console when clicked. When switching between the two sub components it reruns the connectedCallback for listener-component but hasHostListenerAttached is already set to true so addHostEventListeners doesn't run.

[zolakt]

Not sure if this is related to listeners. I suspect it could be. I'll move it to another issue if it's not.
I'm having two problems after updating from 4.22.2 to .4.23.3. And both of them go away when I roll back to 4.22.2.

1. in ion-tab-bar when a ion-tab-button is selected the tab-selected css class gets added to it. After update, this only works on the first button. No other button get the selected styling, when it is selected
2. when using labels and custom components in ion-item, the styling of the label doesn't get detected. Before the update css classes item-label item-label-floating were getting added to ion-item. After the update they don't. e.g.

<ion-item>
@if(label){
    <ion-label position="floating">My label</ion-label>
}
    <ionic-selecable>...</ionic-selectable>
</ion-item>

[gaaarg]

We’ve identified a bug that seems related to this issue. Please let us know if you'd prefer we open a separate issue.

Our Use Case

1. We use @listen in one of our components.
2. This component is exported as a Webapp Output Target (web-component) and works perfectly when used multiple times within a view.

However, when we export the same component using the Angular Output Target (outputType: standalone), we encounter an issue:

• When the component is used multiple times in the same Angular view, the event listeners are only attached to the first instance. The subsequent instances don’t have any listeners attached, so their events are not triggered.

The expected behavior is working fine with the 4.2.22 version of Stencil but not in the 4.2.23 version.

Let us know how we can assist in diagnosing or resolving this!

[dwirz]

Hi @christian-bromann,

Thank you for all the work you and the team put into maintaining this project—it’s incredibly valuable to us, our clients and the community! 🙌

We’ve encountered the same issue described here, and since it’s critical for our use case, I’ve submitted a PR that addresses the problem.

If you or someone from the Ionic team could take a look at it soon, it would mean a lot to us. This fix is crucial for our client, and we’d love to help move it forward however we can. Thanks again for your time and dedication! 😊

[christian-bromann]

A fix for this was released in Stencil v4.23.0