Clicking in datatables editor modal and dragging outside causes modal to close on chrome

aldenbe

When using chrome clicking in a content box and dragging to highlight text closes the modal if the user releases the mouse outside of the content div. This issue is only tested using bootstrap display.

This has an easy fix of changing on click binds to mousedown in editor.bootstrap.js and editor.bootstrap4.js;

Specifically

$(document).on('click', 'div.modal', function (e) {
    if ( $(e.target).hasClass('modal') && self._shown ) {
         self._dte.background();
    }
} );

should be changed to

$(document).on('mousedown', 'div.modal', function (e) {
    if ( $(e.target).hasClass('modal') && self._shown ) {
         self._dte.background();
    }
} );

allan

Hi,

Thanks for suggesting this - I agree and it has now been committed for the 1.9.1 release of Editor. I got bit by this one the other day as well...!

Regards,
Allan

aldenbe

I spoke too soon on this issue. Binding to mousedown causes clicking a modal div scrollbar to close the generated modal if the modal div is longer than the parent window.

My quick and dirty workaround is

$(document).on('mousedown', 'div.modal', function (e) {
  if ( $(e.target).hasClass('modal') && self._shown ) {
    if( $(document).outerWidth() - 20 > e.clientX ){
      self._dte.background();
    }
  }
} );

But I'm not sure if that is better than the behavior before the mousedown change.

allan

Interesting - thank you. I'll look into a solution using click and mouseleave which I think should do it. Will post back when I've done so.

Allan

allan

I've ended up with this:

        var allowBackgroundClick = false;
        $(document).on('mousedown', 'div.modal', function (e) {
            allowBackgroundClick = $(e.target).hasClass('modal') && conf.shown
                ? true
                : false;
        } );

        $(document).on('click', 'div.modal', function (e) {
            if ( $(e.target).hasClass('modal') && allowBackgroundClick ) {
                dte.background();
            }
        } );

Doesn't seem optimal, but I don't have an alternative idea at the moment!

Allan

karmendra

Is this going to be part of Editor v1.9.2? I have issue where after a modal is open and it is a long form and I click on vertical scrollbar to scroll down it closes the modal.

allan

Yes - Editor 1.9.2 is already available that the solution I suggested above is part of that download. It is in the editor.bootstrap4.js file.

Allan