Cannot use CKEditor modals

Hello,

I just add a fix to this issue in the related issue https://www.drupal.org/project/drupal/issues/3065095#comment-13188391

Regards.

Hi,

I was able to reproduce this without Layout Builder Modal in Drupal core, so let's postpone this issue on #3065095: CKEditor native dialogs not clickable inside of jQuery UI dialogs

I believe the solution outlined in https://www.drupal.org/project/drupal/issues/3065095#comment-13311079 may be a good patch stop-gap for this. Can anyone confirm that this method resolves the issue outlined in the original post?

I had this same issue when using CKEditor Media Embed with Layout Builder Modal.

The solution linked to in #5 by @Webbeh resolves this problem for me.

I had the same issue using Ckeditor modal on the Layout builder modal.
I was able to fix this issue by adding a small javascript code (code snippet below) on the page.

orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
  $.ui.dialog.prototype._allowInteraction = function (event) {
    if ($(event.target).closest('.cke_dialog').length) {
      return true;
    }
    return orig_allowInteraction.apply(this, arguments);
  };

Note: The code must be added on page load. so i suggest adding a js library and load the code on all pages or at least concerned pages.

I had similar issue comment #8 resolved my issue. But I put the code inside theme script file at the end.

/**
 * Ckeditor Modal
 */
(function ($, Drupal) {

  orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
  $.ui.dialog.prototype._allowInteraction = function(event) {
    if ($(event.target).closest('.cke_dialog').length) {
      return true;
    }
    return orig_allowInteraction.apply(this, arguments);
  };

})(jQuery, Drupal);

We're getting TypeError: $.ui.dialog is undefined with this change. This can be fixed by wrapping the code:

if ($.ui.dialog) { ... }

It could also be done to not add this code to pages that don't have a dialog.

I'm having this problem when trying to use https://www.drupal.org/project/ckeditor_bootstrap_buttons

In limited testing this morning, we were seeing that "$.ui" was undefined, not "$.ui.dialog" as Liam had noted. It further seemed that this error was only happening when logged out - it was fine when there was a user logged in. (Logged out, the error was preventing other JS on the page from running.)

When we wrap the whole thing in a check for "$.ui", it seems to work.

/**
 * Ckeditor Modal
 */
(function ($, Drupal) {
  if ($.ui) {
    orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
    $.ui.dialog.prototype._allowInteraction = function(event) {
      if ($(event.target).closest('.cke_dialog').length) {
        return true;
      }
      return orig_allowInteraction.apply(this, arguments);
    };
  }
})(jQuery, Drupal);

It's possible that with further testing we may still find places where "$.ui.dialog" is undefined, but for now this seems to work.

Using Drupal core 9.2.10 and Layout Builder Modal 8.x-1.1, I had multiple problems with modals in Layout Builder, the main two being:

1.) Unable to save a Linkit dialogue when adding a link to text in CKEditor in Layout Builder - plenty of JS errors in console:

2.) When opening the Media Library as in the above screenshot, the modal only offered a letterbox-sized display, but this was fixed by a rejig of the code mentioned above starting in #8 and progressing through #9 and #12, as can be seen in the before and after here:

The rejigged code, which similarly to #12 wraps the original snippet from #8, is as follows:

(function ($, Drupal) {

  $(window).once('dialog copy interaction settings').on('dialog:aftercreate', function () {
    let orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
    $.ui.dialog.prototype._allowInteraction = function (event) {
      if ($(event.target).closest('.cke_dialog').length) {
        return true;
      }
      return orig_allowInteraction.apply(this, arguments);
    };
  });

})(jQuery, Drupal);

I should also add that I implemented the code as per a comment in a different issue, linked to by #5 here, so I can confirm that that works (essentially adding a main.js file to a custom module with the above code in it and including core/jquery.ui.dialog under dependencies in that module's .libraries.yml file).

Furthermore, for a separate but no doubt related problem regarding tables in modals I previously experienced, the patch here worked, as I have commented in that already-mentioned issue, and judging by the code in the patch I am confident it would work here for these problems, though I have not also tried that here.