Stencil: Cannot listen for events emitted at onComponentDidUnload

[rdesistoz]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
When an event is emitted when a child component unloads, the event either does not fire or does not get picked up by any listeners.

Expected behavior:
It should be possible to listen for unload events when a child component unloads.

Steps to reproduce:
Demo: https://github.com/rdesistoz/broken-unload

Related code:

@Event() dynCompDidUnload: EventEmitter<void>;
  componentDidUnload() {
    this.dynCompDidUnload.emit();
  }

  @Listen('dynCompDidUnload')
  onDynUnloaded(event: CustomEvent) {
    console.log(event, 'unloaded'); // never happens
  }

Other information:

[Nightbr]

Same here @stencil/[email protected]

[Nightbr]

Upgrading to @stencil/[email protected] but still the same bug.

[rdesistoz]

Just tried this in 0.17.0 anyone else test this and still have issues?

[Nightbr]

I still have the issue in 0.17.0:

I have my soon-component:

  componentDidUnload() {
    console.log('component unload', this.el);
    this.soonComponentDidUnload.emit();
  }

and my container soon-component-container:

  @Listen('soonComponentDidUnload')
  async onComponentUnLoad() {
    console.log('component UNLOAD from container');
    await this.loadComponents();
    this.orderlist();
    this.updateComponents();
  }

When I remove a <soon-component> from DOM:

Only componentDidUnload of the child component is triggered. I don't know why the parent is not receiving the event...

[robmarti]

I just tried out the demo provided by @rdesistoz with @stencil/[email protected]. The bug seems to be still present when using the @Listen() decorator. However, when binding the handler directly to a component in JSX , the events fired within a child components componentDidUnload() method can now be consumed by its parent component. Seems like the fix only worked for the "JSX event listeners".

my-component.tsx

onDynUnloaded(event: CustomEvent) {
    console.log(event, 'unloaded');
  }

  render() {
    return [
      <button type="button" onClick={ () => this.loadOptionsA()}>Options A</button>,
      <button type="button" onClick={ () => this.loadOptionsB()}>Options B</button>,
      this.options.map(o => <dyn-comp value={o} onDynCompDidUnload={ ev => this.onDynUnloaded(ev) } />)
    ];
  }

Also it seems that the dyn-comp components are not actually removed from the DOM when switching between _Options A_ and _Options B_ . The other way around, only one component gets actually removed.
I guess the components are reused somehow since after the first call of loadOptionsA() or loadOptionsB(), only one component instance is created/destroyed (according to the logs) when switching between the two options .
When removing the components from the DOM manually via Browser DevTools, the listeners seem to work perfectly ( when they are implemented as described above ).

Does anyone know if the reuse of components is intended ( maybe to boost performance ) ?

[gagaXD]

I'm experiencing the same bug in "@stencil/core": "0.18.0"

Anyone also have this issue ?

[fanick-ber]

I face this issue with "@stencil/core": "1.0.7".
Did anyone also face this issue and found a suitable workaround?

[pr3tori4n]

I can verify I'm seeing this as well. I'm also noticing the same behavior when trying to use either componentDidUnload() or disconnectedCallback() lifecycle method.

[driskull]

Digging into this a little bit, it seems like this isn't a bug and acting as expected. A bare bones web component has the same behavior.

When a custom element is removed from the DOM, the event is fired but the bubbling doesn't work anymore since the element is no longer in the DOM. In the codepen below, the body will never receive the disconnectedCallback event. So I guess it has something to do with bubbling.

Sample Codepen

The workaround seems to be to emit the event listener on an element that is still in the DOM and make sure the listener can catch it. For example, listen for that event on the document.body.

@Listen("myEvent", { target: "body" })

[handfulglitter]

I am also facing this issue. The componentDidUnload selectively works and even if it works the event that I'm emitting isn't fired. I also tried to listen to the event on body level, but no event that I'm firing in the componentDidUnload.

[manucorporat]

At this point is alreeady to latte to emit the event since the element was already disconnected from the dom, unfortunatelty we can't know in advanced when a component is going to be disconnected.

[theo-staizen]

@manucorporat just out of curiosity, was componentDidUnload renamed to disconnectedCallback ?