Error while creating an editor (using node tree cloned from template before appending to DOM?)

[AgainPsychoX]

Situation

My guess is, it may have something to do with fact I am creating it node tree cloned from template, before being appended to actual DOM.

Steps to reproduce, vaguely:

1. Have <template> with child node you want to attach the editor to.

   <template class="something">
       <div class="something-else"></div>
       <div class="editor"></div>
   </template>

2. Get template and clone it. Access the node you want attach the editor, and try to use it.

   const fragment = document.querySelectior('template.something').content.cloneNode(true);
   const editorElement = fragment.querySelect('.editor');
   const editor = ace.edit(editorElement);

3. Later of course the fragment is attached to the DOM (in the same code-flow).

Stacktrace

ace.min.js:1 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
    at Object.o.scrollbarWidth (ace.min.js:1:6019)
    at new l (ace.min.js:1:270981)
    at new e (ace.min.js:1:293008)
    at Object.o.edit (ace.min.js:1:362270)
    at StrategiesManager.registerStrategy (strategies.js:250:24)
    at registerStrategy (index.js:68:56)
    at static-naive.js:2:1

Tracking the issue

1. ace/lib/ace/lib/dom.js

   Line 263 in d957259

   body.appendChild(outer);

2. ace/lib/ace/scrollbar.js

   Line 106 in 94422a4

   this.width = dom.scrollbarWidth(parent.ownerDocument);

3. ace/lib/ace/virtual_renderer.js

   Line 108 in 94422a4

   this.scrollBarV = new VScrollBar(this.container, this);

4. ace/lib/ace/virtual_renderer.js

   Line 70 in 94422a4

   this.container = container || dom.createElement("div");

   
   and here I'll stop, because it looks like only uses for this VirtualRenderer classes are related to testing: [removed image] because I was lazy and found workaround anyway.

Workaround:

Currently, I use setTimeout or requestAnimationFrame to delay attaching the editor to the element, but it looks bad.

[andrewnester]

Fixed in 1.13.0