CODEWITHSUNDEEP
javascripthtmljqueryckeditorbootstrap-5
Meet Turakhia
Meet Turakhia

Reputation: 91

ckeditor's popup input fields dont work when used with bootstrap 5 modal (ckeditor 4)

I have come across an error while using ckeditor in bootstrap 5 modal and it looks like it's a very known error and many have given solution for it for different bootstrap versions but i am not able to figure out one for bootstrap 5, please have a look.

Here is the problem with solution:- https://stackoverflow.com/a/31679096

Other similar problems:-

CKEditor Plugin: text fields not editable

Bootstrap with CKEditor equals problems

Mainly what would be the alternative of below line for bootstrap 5. $.fn.modal.Constructor.prototype.enforceFocus

If I search for it in bootstrap 4 js file I'm able to find fn.modal.Constructor in there but not in bootstrap 5. Please if someone can recreate the verified solution in the above link according to bootstrap 5 it would be very appreciated. Thank you for your time.

image describing problem

Also few notes:-

  1. All the other input types like checkboxes and dropdown works but not just text field.

  2. I have also tried removing tabindex="-1" from bootstrap modal code but the problem remains.

Upvotes: 9

Views: 2802

Answers (4)

Carlos Salgado
Carlos Salgado

Reputation: 31

Surely you've already solved it, but so others who encounter the error have it, the solution for me, with Bootstrap 5.3 and CKEditor 4, was to add data-bs-focus="false" to the modal's HTML.

By deactivating the modal's automatic focus, it ensures that the elements within the modal are ready to be initialized correctly when the shown.bs.modal event is triggered

Upvotes: 1

stephenr85
stephenr85

Reputation: 189

Thanks for this. Saved me a lot of head scratching. As of Bootstrap 5.3, this requires a small tweak:

bootstrap.Modal.prototype._initializeFocusTrap = function () { return { activate: function () { }, deactivate: function () { } } };

Upvotes: 7

Seif Mohy
Seif Mohy

Reputation: 1

Bootstrap does not support nesting modals disabling enforce focus will allow other modals to get focused: <Modal enforceFocus={false}>

Upvotes: 0

dh6984
dh6984

Reputation: 108

Not sure if you figured out the answer to this yet, but I've had this same issue with a sweetalert2 modal. I scoured bootstrap's source code and found that you can remove the focus with this:

$.fn.modal.Constructor.prototype._initializeFocusTrap = function () { return { activate: function () { }, deactivate: function () { } } };

Works as of Bootstrap 5.1.3

Upvotes: 2

Related Questions