Ace editor + jQueryUI tabs kill my browser

Question

I have a following problem: my browser (Chrome) does not respond after I change the tab. See fiddle here. I did not test with other browsers and there is no need to do, because Chrome is my target to make it work.

My goal is to put editor in the second tab, and not in the first. That's the code I use:

HTML:

<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab without</a></li>
    <li><a href="#tab2">Tab with</a></li>
  </ul>
  <div id="tab1">

  </div>
  <div id="tab2">
    <textarea id="ta"></textarea>
  </div>
<div>

JavaScript:

$(function(){
  $("#tabs").tabs({
    activate: function(event,ui){
      if (ui.newPanel.attr("id") == "tab2") {
        setTimeout(function(){
          var editor = ace.edit("ta");
          editor.setTheme("ace/theme/twilight");
          editor.session.setMode("ace/mode/xml");
        },10);
      }
    }
  });
});

It fails on this row: var editor = ace.edit("ta");

After I switch the tab to the second one, the browser is "frozen" and in one minute it fills the RAM upto round about 2.5 GB and nothing is rendered. Then even operating system is very slow until I break the processes.

In my implementation I do this activation only on the first run; here I've excluded this to simplify the code.

Thank you for any kind of help.

Answer 1

Try to use div instead of textearea, even on ace site you can see that they use div

Answer 2

Yes, I ran into this same issue. Seems to be caused by using Ace on a textarea. See this somewhat revelant thread as well: https://github.com/angular-ui/ui-ace/issues/37