Ace Editor Losing Focus in Ionic App

Question

I am working on an app using the Ionic Framework and would like to include an ace editor component in an <ion-view>.

Issue:

When I click within the the ace editor I can see it select the line but the cursor doesn't display.

You can see the issue in this codepen (not my codepen but same issue exists)

The issue I am having appears to be that the ace editor keeps loosing focus but I can't seem to figure out what could be stealing the focus. I think this is the issue because in the elements panel in chrome I can see that the following class is assigned to the div.

ace_layer ace_cursor-layer ace_hidden-cursors

Interestingly, If i hold down the mouse click a little longer it will gain focus and the cursor will display. Short mouse clicks don't work.

My html template for the editor:

<ion-view view-title="Editor">
  <ion-content>
    <div>
      <pre id="ace-editor">this is a test</pre>
    </div>  
  </ion-content>
</ion-view>

And my angular controller where i set the ace editor:

.controller('EditorCtrl', function ($scope, $stateParams) {
  var init = function () {
    editor = ace.edit('ace-editor');
    editor.setTheme('ace/theme/monokai');
    editor.setOption("dragEnabled", false);
    editor.removeAllListeners("mousedown");
    editor.getSession().setMode("ace/mode/javascript");    
  };

  init();
});

I tried removing all mousedown events on the ace editor seeing if it was related that but it didn't fix.

I've also tried removing the sidemenu drag from the ionic side menu but that didn't fix either.

Answer 1

Use data-tap-disabled="true" like this:

<pre id="ace-editor" data-tap-disabled="true">this is a test</pre>

I found it here: http://www.ionicframework.com/docs/api/page/tap/