CK Editor 5 link url not focussing when inside modal


I have an issue when using CKEditor 5 inside a modal - in that the link URL field doesn't get focus, so I can't type in the link.

I've read issues online but cannot seem to resolve.

Assistance would be great ! :-)

Text formatting options

Replies (6)


I've had the same issue.

you can find your joy here (a working example for link, even for table properties):

Thanks. I'm using the standard CK5 editor (as opposed to the balloon) - but I can now get the link dialogue to appear, but still not able to focus on the link url field itself - it keeps focussing on another input field on page.

Strange one


Can you try to remove tabindex attribute from the modal ?


I've tried most things and still can't seem to get this to work.
This is the code I use to invoke the modal.

added to css :
--ck-z-default: 100 !important;
--ck-z-modal: calc( var(--ck-z-default) + 999 ) !important;

I've tried removing tabIndex.

The link box now pops up, where it didn't before - but I cannot seem to type into the link field - another input field within the modal window keeps or steals focus.

$('#edit-modal-lg').on('', function (e) {
var button = $(e.relatedTarget);
var modal = $(this);

Ok - I managed to sort this, after much searching and head scratching.

First - the CSS :

inside the body element (not root)

--ck-z-default: 100;
--ck-z-modal: calc( var(--ck-z-default) + 999 );

then, this css class

.ck-body-wrapper{ z-index: 1300 !important;}

then - the CK editor element needs to be inside a new div

<div class="ck-body-wrapper">
in here

Thank you for sharing your solution. We will check this further and add Modal samples for CKEditor in the documentation. Appreciate your contribution!

Text formatting options
Text formatting options