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

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

aldenbealdenbe Posts: 2Questions: 1Answers: 0

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();
    }
} );

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • aldenbealdenbe Posts: 2Questions: 1Answers: 0
    edited September 2019

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • karmendrakarmendra Posts: 20Questions: 7Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.