search

taisuke-j / progress-ring-component

Animated web component showing progress in percentage
MIT License
16 stars 2 forks source link

Bug: Error `this.resumeFrames is not a function` when reattached to DOM #22

Open johnemau opened 2 months ago

johnemau commented 2 months ago

Reproduction steps:

  1. Go to https://unpkg.com/progress-ring-component@1.0.34/demo/demo-01.html
  2. Open the browser DevTools (F12 / Context menu -> Inspect)
  3. Run the following in the DevTools Console document.body.append(document.querySelector('progress-ring'))

Expect: No error

Actual:

TypeError: this.resumeFrames is not a function
    at a.connectedCallback (p-2ec5f97f.entry.js:1:7049)
    at A (p-bc0fba79.js:1:4729)
    at q (p-bc0fba79.js:1:5837)
    at p-bc0fba79.js:1:6407
    at p-bc0fba79.js:1:7104
    at Object.jmp (p-bc0fba79.js:1:107)
    at a.connectedCallback (p-bc0fba79.js:1:6341)
    at <anonymous>:1:15

This might be a bug with stencil, I am not familiar with their component lifecycle, but somehow the resumeFrames function is null when the components connectedCallback is invoked.

I assume that disconnecting the component from the DOM somehow clears the resumeFrames reference without reseting the isLoaded state, so when we reattach to the DOM the component is in a bad state.

johnemau commented 2 months ago

Although the reproduction steps may seem convoluted, they are really just an easy minimum reproduction. I encountered this issue when manipulating a list of <progress-ring>'s and needing to move a component from one positing in the list to another by changing it's DOM position.

taisuke-j commented 2 months ago

@johnemau Please let me know if the issue still persists with 1.0.35.