app calls <component>.stateChanged(state) even when the component is inactive

[lp74]

Hello,

the stateChanged(state) method of the PageViewElement classes (views) is invoked even if they are inactive and hidden.

How to address this issue?

[sdykae]

Ahm, maybe using event listeners when something you want just happen once needed?

[lp74]

@sdyalor, maybe they would address this issue in the pwa helpers with some code in the stateChanged (e.g, similar to the shouldUpdate method). I've solved for my own needs.

[smashah]

from the connect mixin (here ) you can see that the state is unsubscribed upon the disconnectedCallback lifecycle event.

From the lit-element documentation you can see that disconnectedCallback is called when:

a component is removed from the document’s DOM

MyApp does not remove a PageViewElement component from the dom, It reacts to active being true/false and therefore it only 'hides' the component as seen here

       .page {
          display: none;
        }
        .page[active] {
          display: block;
        }

A possible solution to this would be to call this.disconnectedCallback in PageViewElement when active becomes false.

This may work:

shouldUpdate() {
if(!this.active) this.disconnectedCallback();
    return this.active;
  }

Edit: I just tested this solution. I can confirm that it works.

[lp74]

using immutability this is not an issue anymore.