Add link modal does not focus !

[Yves-K]

Hello,

Deep testing Trumbowyg i'm impressed...

Version 2.15.2 with custom css
Test on Chrome, Opera, FireFox

Clicking on the "add link" (not minimal) button, modal opens and displays fields but cannot focus on URL text field.

So it's impossible to add a link.

Works on your demo with the same version...

Any idea ? How can i help ?

Best regards

[Alex-D]

Without demo page or steps to reproduce, I can't help.
Sorry :/

[Yves-K]

Hello,

I can give you access if required (on private)
This only happens when Trumbowyg is inside an ui dialog.
Seems the object is added outside the box (not related to its ancestors)

Regards

[Yves-K]

Solved now.
In script openModal (remove css and change appendTo)

  var $modal = $('<div/>', {class: prefix + 'modal ' + prefix + 'fixed-top'})
  .css({
-    top: t.$box.offset().top + t.$btnPane.height(),
-    zIndex: 99999
  })
- .appendTo($(t.doc.body));
+ .appendTo($(t.$btnPane));

In css

  .trumbowyg-modal {
    position: absolute;
+   top: 100% !important;
+   z-index: +1;

So the modal is always related to the toolbar in any dialog depth.
;-)

Best regards

[rsmithlal]

Thanks so much @Yves-K! This is exactly the bug that we were running into and your fix works great! Kudos! The problem was the same. We have a trumbowyg editor initialized inside a bootstrap modal. We weren't able to interact with the add link or add image dialogs until trying this fix!

[rsmithlal]

On closer examination, this is not a bug with trumbowyg but rather an issue with the Bootstrap modal enforcing focus. This answer from stack overflow shows how to fix it: https://stackoverflow.com/a/43104663/4531155.

For Bootstrap 3 modals:

$.fn.modal.Constructor.prototype.enforceFocus = function() {
  var $modalElement = this.$element;
  $(document).on('focusin.modal',function(e) {
    if ($modalElement[0] !== e.target
      && !$modalElement.has(e.target).length
      && $(e.target).parentsUntil('*[role="dialog"]').length === 0) {
      $modalElement.focus();
    }
  });
};

[mariocalin]

I confirm that the solution provided by @Yves-K is working well. In my case, (same as @rsmithlal ) I was using the text editor inside a Bootstrap 4 Modal. With this tweak works fine. However I had to change the trumbowyg-modal-button css class because it was shown with opacity.

[tfsmag]

I've found another way around this. I had this problem with the image plugin. Inside of the bootstrap 4 modal shown event.

$("#messagemodal").on('shown.bs.modal', function () {
$(document).off('focusin.modal');
});

worked like a charm!

[shrrayan-goel-cognoai]

Just remove the tabindex attribute from the modal. It should solve the issue with less efforts.
$(document).ready(function() {
$('.modal').removeAttr("tabindex")
})

[35grain]

Solving the issues described above, I have proposed a pull request in which the modal is appended right after the Trumbowyg editor container, so that the modal can be focused on in Bootstrap modals without any additional side effects. Adding the modal into the button pane as proposed previously by @Yves-K would require unnecessary modifications in CSS.
#1346

[alextselegidis]

FYI

Changing this:

var $modal = $('<div/>', {
                class: prefix + 'modal ' + prefix + 'fixed-top'
            }).css({
                top: t.$box.offset().top + t.$btnPane.height(),
                zIndex: 99999
            }).appendTo($(t.doc.body));

To this:

var $modal = $('<div/>', {
                class: prefix + 'modal ' + prefix + 'fixed-top'
            })
                .css({
                    zIndex: 99999
                })
                .appendTo($(t.$box)); 

Did the trick for me on Bootstrap 5.

[idovmamane]

I had the same issue on Bootstrap v5 and found this solution :

Add this data-bs-focus="false" :

<div class="modal fade" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true" data-bs-focus="false">

Worked for me.