CKEditor 5 popup controls not working in Bootstrap 3 - 2018

Question

The problem I'm having seems similar to this: How to use CKEditor in a Bootstrap Modal? but the accepted answer does not work with the following:

• CKEditor 5, v1.11.1
• jquery 3.2.1
• Bootstrap 3.3.7

I have created a fiddle to show the issue: http://jsfiddle.net/fg3va7zq/2/

If you click "Launch modal" it will open the modal. When trying to insert a link I get this:

I cannot click inside the input to insert a link.

The following CSS was used to make sure the z-index of the link input is above the modal:

.ck-rounded-corners .ck.ck-balloon-panel, .ck.ck-balloon-panel.ck-rounded-corners {
    z-index: 10055 !important;
}

This works, and without it the link box isn't even visible.

The following js was provided on the linked answer:

$.fn.modal.Constructor.prototype.enforceFocus = function () {
    var $modalElement = this.$element;
    $(document).on('focusin.modal', function (e) {
        var $parent = $(e.target.parentNode);
        if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length
            // add whatever conditions you need here:
            &&
            !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
            $modalElement.focus()
        }
    })
};

This does not fix the issue, as demonstrated on the updated fiddle: http://jsfiddle.net/fg3va7zq/3/

Does anyone know how to fix this? The other SO posts (most of which are several years old) on this subject do not fix the issue so I have opened it as a new question.

Answer 1

see updates for full details

Well, I was surprised I found the solution to this issue, but I have no idea how or why this is working so please don't ask me or i'll have to look for an actual answer to the why part. (Answer to the 'Why?' is below)

Simply remove the $modalElement.focus() from the function added, take a note, you CANNOT remove the whole function as it won't work if you do, you need to leave it that way and only remove the .focus() part.

$.fn.modal.Constructor.prototype.enforceFocus = function () {
    var $modalElement = this.$element;
    $(document).on('focusin.modal', function (e) {
        var $parent = $(e.target.parentNode);
        if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length &&
            !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
            
        }
    })
};

You can see its working in this fiddle: http://jsfiddle.net/fg3va7zq/4/

As I said, I have no idea why it works or if it might break something else, but its working :)

UPDATE

Why it works?

It didn't work because when you clicked inside the model, the focus was shifting to the model element it self, so every click on the url element, you were focusing out from the URL element and focusing in the parent model element.

The actual fix for this would be to focus on the clicked element and NOT on the model it self with e.target.focus(), like this:

$.fn.modal.Constructor.prototype.enforceFocus = function () {
    var $modalElement = this.$element;
    $(document).on('focusin.modal', function (e) {
        var $parent = $(e.target.parentNode);
        if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length &&
            !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
            e.target.focus()
        }
    })
};

UPDATE 2

Why it doesn't work when the whole function removed?

When you set the prototype you basically override the function bootstrap have by default, the bootstrap function is basically focusing on model when something is clicked, which is what the first function you set was doing.

So when you were overriding the function with a function that does nothing, well, it did nothing (it didn't focus on the model and stayed focused on the clicked element)

Answer 2

Using these options for modal fixes the issue:

$( '#yourModal' ).modal( {
   focus: false,

   // do not show modal when innitialized.
   show: false
} );

Live demo: https://codepen.io/ckeditor/pen/vzvgOe

Answer 3

Have you tried including the popper.js cdn?

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

Also some features require initialization on the .js

The following code will enable all popovers in the document:

Example

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>

From popover documentation

Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.

Answer 4

For those with React + CKEditor 5 and using reactstrap/bootstrap modals:

set autofocus on your modal to false:

<Modal autofocus={false} ...>
add the following styling:
:root { --ck-z-default: 100; --ck-z-modal: calc( var(--ck-z-default) + 999 ); }

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/css.html#compatibility-with-bootstrap

From: codythecoder-teslagovt in github

Answer 5

For bootstrap 5 use set as modal attr:

data-bs-focus="false"

Answer 6

ckeditor (v5) "integration guide" for css and bootstrap, with a section on bootstrap modals: https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/css.html#compatibility-with-bootstrap

They say the following concerning modals and links specifically:

We noticed that Bootstrap modals cover the UI of the rich-text editor and break the input fields. Knowing that, you will need to take the following steps to get CKEditor 5 working in the Bootstrap environment:

Configure the z-index of the floating editor UI (e.g. balloons) so it is displayed over the Bootstrap overlay. Configure Bootstrap so it stops “stealing” the focus from the rich-text editor input fields.

I'll paste the code and remainder too as links often change:

To address the first issue, add the following styles to your application:

/*
 * Configure the z-index of the editor UI, so when inside a Bootstrap
 * modal, it will be rendered over the modal.
 */
:root {
    --ck-z-default: 100;
    --ck-z-modal: calc( var(--ck-z-default) + 999 );
}

Pass the focus: false option to Bootstrap modal() function to fix the second issue:

$( '#modal-container' ).modal( {
    focus: false
} );

---

• ckeditor global variables you may wish to monkey with: https://github.com/ckeditor/ckeditor5-ui/blob/963b926bc9068affc0b534822f4963f06b224b63/theme/globals/_zindex.css#L7-L8

• ckeditor5 github issue for this topic if you're interested in the discussion: https://github.com/ckeditor/ckeditor5/issues/1142