3

I have an instance of CKEditor in a twitter bootstrap modal, which is working just fine, except for when you try to use a dialog that has a textbox or a dropdown it is not accessible.

I'm wondering if any one else has had such an issue and found a way to make it work.

Thanks

Edit:

I did some digging and found a hack that fixed the issue.

Community
  • 1
  • 1
Eman
  • 1,093
  • 2
  • 26
  • 49

2 Answers2

3

Just remove the tabindex="-1" from this line in your bootstrap modal.

<div class="modal fade" tabindex="-1" role="dialog">

Source

Note

Beware of accepted answer as it could make your browser crash.

If you open a modal from another modal, the accepted answer will create an infinite loop that will make the entire page crash.

Gudradain
  • 4,653
  • 2
  • 31
  • 40
  • I no longer use CKEditor or bootstrap but thanks for contributing for future readers – Eman Jul 12 '18 at 19:00
1

Just put this after Bootstrap script and all problem will fixed

<script>
     //The final solution code for all bugs ckeditor in twitter bootstrap3' modal
     $.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
                                     && $(e.target).parentsUntil('*[role="dialog"]').length === 0) {
                             $modalElement.focus();
                     }
             });
     };
</script>
Marco Caltagirone
  • 1,206
  • 1
  • 14
  • 23
  • If you have a modal that open another modal while keeping the first one open, this will make the browser tab crash. It seems to create an infinite loop for me. The error will be "Maximum call stack size exceeded" and will repeat itself constantly. – Gudradain Jul 11 '18 at 15:08