Property does not re-render when fired from custom event

[Siavee-uni]

Hey, somehow, properties don't update if I fire a custom element and receive it in another component, not being the parent or the same component the event was fired from.

When I console log, the property changed. But it doesn't re-render.

Example here: https://stackblitz.com/edit/typescript-18e7yc?file=components/custom-event.ts

[kevinpschaaf]

It's pretty unclear from your code what you intend to happen, so it would be good if your bug report had "expected" and "actual" sections.

However, one thing it appears you're getting tripped up on is passing an unbound function to addEventListener:

    document
      .querySelector('custom-event')
      .addEventListener('custom-event', this.changeStringParent);

When an un-bound function is passed to addEventListener, the function will be called with the this of the event target, not the class instance the function was defined on.

Instead, if you want changeStringParent to be called on the local class, you need to pass a bound function, either using arrow syntax or bind, e.g.:

    document
      .querySelector('custom-event')
      .addEventListener('custom-event', () => this.changeStringParent());

Please see this for an updated version and confirm if these results are what you intende: https://stackblitz.com/edit/typescript-ppx3bl?file=app.ts

[Siavee-uni]

Wow thanks. Yes i though this was referring to the class instance. Made that connections because of this.

<my-element @my-event="${this._handleClick}"></my-element>

Here I can target the local class with this

[webm2]

Hi, I'm wondering if this is the same problem I'm having...

I'm developing a custom audio player web component using Lit Elements and the seek bar stops moving after the user interacts with it and triggered the OnChange event.

The seek function works fine and properly advances and rewinds the audio, but the range slider stops auto-updating the knob position after the first OnChange event is triggered.

If the OnChange Event is never triggered, the seek bar range slider performers as expected.

Input Element Code:

<input

          type="range"
          id="seekbar"
          @change="${this.seek}" 
          class="progress-meter"
          value="${this.currentTime}"
          max="${this.duration}"
/>

Seek Function:

seek(e) {

     this.audio.currentTime = e.target.value;

 }

Any feedback would be greatly appreciated as I've been struggling to figure this out for a month. Thank you!

You can see the player in action and the bug with the seek bar here... https://shoptalkshow.com/484/

[sorvell]

It may be that you're hitting an issue addressed via the live directive. Closing optimistically due to age, but please feel free to open a new issue if there is something else going on. Thanks.