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

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
keenthemes mega bundle