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: 50,303Questions: 1Answers: 7,478 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 11

    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: 50,303Questions: 1Answers: 7,478 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

Sign In or Register to comment.