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: 51,260Questions: 1Answers: 7,721 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: 51,260Questions: 1Answers: 7,721 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: 51,260Questions: 1Answers: 7,721 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

Sign In or Register to comment.