Textbox not clickable in TinyMCE modal box

Question

I'm developing a panel for a client which features a 'New Blog Post' button which opens up a modal and in that modal it is possible to click an 'Add image' box which opens another modal. The issue here is the fact that the 'Add image's' modal box contains text boxes which are supposed to be clickable however, these are not.

I was experimenting with Z-Index's to see if that was the issue however, I had no luck with resolving the problem.

These modals consist of Bootstrap and TinyMCE(for editing).

It can be found here: http://olidev.me/testpanel/ : under the 'American site' tab, click 'Add Blog Post' and then click on the 'Insert' tab on tool bar in the 'Post' area and 'Insert image'.

Sorry for the confusing access to this issue but hopefully its easily resolvable.

EDIT: I tried another application called 'CKEDITOR' and the exact same problem occurred, is this due to the 3 modals overlapping eachother??

Offal

Could you please post the relative code snippets here? – Tremolo

I think I know the answer, but I can't look through 250 lines of code to make sure it works. – Tremolo

jsfiddle.net/y9wgdfdw/3 Here you are. Apparently I cannot add this link to my description as it is not accompanied by code. I'm not sure where the issue is located so I cannot show specific code on the main post – Offal

One thing I noticed (which will not be the solution) is that the inputs to not have any 'type' attribute. – Galbraith

Answer 1

Since you are using Bootstrap (also applies to jQuery UI Dialog), the TinyMCE modal window is losing focus when launched so you can't click inside. The below code will prevent that from happening.

TinyMCE in a jQuery UI dialog

TinyMCE portion of code:

tinymce.init({
    selector: "textarea",
    plugins: [
    "advlist autolink link image lists charmap print preview hr anchor pagebreak",
    "searchreplace visualblocks visualchars code fullscreen insertdatetime media
     nonbreaking",
    "save table contextmenu directionality emoticons paste textcolor"
   ],
   toolbar: "insertfile undo redo | styleselect | bold italic | 
alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | 
link image | print preview media fullpage | forecolor backcolor emoticons", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
});

JQuery Modal focus fix:

// prevent Bootstrap from hijacking TinyMCE modal focus    
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".mce-window").length) {
    e.stopImmediatePropagation();
  }
});

JSFiddle

Afc

Fantastic. Thank you. Will award bounty when i can :) – Offal

Thanks, glad you can now move forward from this strange issue. :) – Afc

Thanks for beautiful solution. – Allomerism

In newer versions of tinyMCE (> 5.0), you need to look for $(e.target).closest(".tox").length – Shoelace

And in case someone has this problem with codesample plugin, like above but call for .tox-textarea; – Ypsilanti

Answer 2

Problem:

If you have a bootstrap modal with TinyMCE inside it and you want to insert a link or other option where it opens a tinyMCE dialog with text input field you cannot get focus on the input text fields (like it is in a disabled state)

Solution:

Remove the tabindex="-1" from the bootstrap modal html. This can be done in on the modal html container or prior initialization of TinyMCE.

Pinnatifid

Great and very easy and simple solutions, It should be a accepted answer. – Cupel

What a great solution should be the accepted answer... – Cavour

Exactly the solution to the problem. Thank you! – Faldstool

Answer 3

After looking into what you said about inserting an image, I also found it's the same behavior with videos. And it led me to believe the reason why is because you need to use a file manager plugin in order to handle files in TinyMCE, such as MoxieManager.

Once you have that, your image/video windows will look like this:

Then you will be able to choose and accept files.
Here is the official answer from the TinyMCE FAQ page:

Afc

Hmmm, but its not only the source box with this error, its also the image description box and dimensions. Sorry for being a pain but I have a feeling theres something else too it :/ I really appreciate your time. I'll give you a +1 considering its an alternative that would work and you've put alot of time into this issue – Offal

And i'm pretty sure the 'source' box can be a url pasted in rather than using a manager – Offal

There may be more to it, hard to say. But take a look at this: pixabay.com/en/blog/posts/direct-image-uploads-in-tinymce-4-42. I think once you can get the source field working you'll know for sure. – Afc

Answer 4

Eternalhour solution did the trick. However, I had to dig and change my setup on bootstrap. Since my page is using Bootstrap (v3.3.7) I had to do the following.

1. Look for the focusin event within the bootstrap.js file.

2. Find the function which is referenced in this post where the Bootstrap modal is called.

3. Test the fix adding the piece of code to the function.

4. After succesful testing, you should modify your minified file in case you are adding it to your project but be careful (I did it by hand).

Result:

Modal.prototype.enforceFocus = function () {
$(document)
  .off('focusin.bs.modal') // guard against infinite focus loop
  .on('focusin.bs.modal', $.proxy(function (e) {
    //IMPORTANT: I had To remove the following commented code block, which was the 
    // original code before the fix  
    /*
         if (document !== e.target && this.$element[0] !== e.target && 
         !this.$element.has(e.target).length) { this.$element.trigger('focus') 
         } 
    */
  if ($(e.target).closest(".mce-window").length){
    e.stopImmediatePropagation();
  }
  }, this))

}

By removing the code, and adding the accepted solution, I was able to click and edit the input field which in my case was the hyperlink field. I tested it in Edge, Firefox and Chrome and it worked.

Unbecoming