Question

Just started using the Ace editor (http://ace.ajax.org) and although it works fine on a regular editor, as soon as I put it inside a jquery-ui dialog that has the ‘modal: true’ option, I can do everything except input text. That is, I can select, use ctrl combinations, and even DELETE text, but I can’t insert letters.

Any idea how that ‘modal: true’ option might interfere with regular character insert? Is there a ‘stopPropagation’ function that might stop the key-stroke from getting to the editor?

Answer 1

The problem was that jquery-dialogs look for a z-index on the target element (in this case, the textarea of the Ace editor) before allowing the event to continue. At the time of writing, this is where they do this check:

jquery.ui.dialog.js starting on line 685.

create: function( dialog ) {
  if ( this.instances.length === 0 ) {
    ...
    setTimeout(function() {
      // handle $(el).dialog().dialog('close') (see #4065)
      if ( $.ui.dialog.overlay.instances.length ) {
        $( document ).bind( $.ui.dialog.overlay.events, function( event ) {
          // stop events if the z-index of the target is < the z-index of the overlay
          // we cannot return true when we don't want to cancel the event (#3523)


          // HERE's THE CHECK
          if ( $( event.target ).zIndex() < $.ui.dialog.overlay.maxZ ) {
            return false;
          }
        });
      }
    }, 1 );

There are several ways to handle this, but I found the easiest was to set the z-index of Ace’s textarea to a really high value. Here’s the part of the CSS where I did this:

ace_uncomplessed.js starting on line 16211.

"\n" +
".ace_editor textarea {\n" +
"    position: fixed;\n" +
"    z-index: 2000;\n" +