Attach listener not handling two-level parentNode inserting

[danielgindi]

Expected Behavior

Chart should render as soon as the parent is inserted into the DOM.

Current Behavior

Canvas remains blank.

Possible Solution

Attach listener should use contains to check if the node inserted includes the chart element.
Keeping a reference for every parent node is not feasible.

function createAttachObserver(chart, type, listener) {
  const canvas = chart.canvas;
  const observer = new MutationObserver(entries => {
    entries.forEach(entry => {
      for (let i = 0; i < entry.addedNodes.length; i++) {
        const added = entry.addedNodes[i];
        if (added === canvas || added.contains(canvas)) {
          listener(entry.target);
        }
      }
    });
  });
  observer.observe(document, {childList: true, subtree: true});
  return observer;
}

Steps to Reproduce

https://codepen.io/danielgindi/pen/bGWavLX

Context

Environment

• Chart.js version: 3.5.0
• Browser name and version: Chrome 92

[danielgindi]

@kurkle It's like the other side of #9448

[kurkle]

Right, the isAttached works, but the attachment is not detected.

[danielgindi]

@kurkle Please note, that even when applying this fix, there's an odd new behavior - when the element is added to the dom, a vertical bar chart animates like from a 0 on 0 size, not from fullWidth on 0 size.

[snowsunny]

I had same issue, and I fixed by same the solution. It working for my case.