Unsaved changes close confirmation when ESC key pressed

zajc

This example https://editor.datatables.net/examples/api/confirmClose.html doesn't work in Firefox or Chrome. I fix it with preClose event:

    var openVals;
    editor
        .on( 'open', function () {
            // Store the values of the fields on open
            openVals = JSON.stringify( editor.get() );
        } )
       .on( 'preClose', function ( e ) {
            // On close, check if the values have changed and ask for closing confirmation if they have
            if ( openVals !== JSON.stringify( editor.get() ) ) {
                return confirm( 'You have unsaved changes. Are you sure you want to exit?' );
            }
        } )       
       .on( 'preBlur', function ( e ) {
            // On close, check if the values have changed and ask for closing confirmation if they have
            if ( openVals !== JSON.stringify( editor.get() ) ) {
                return confirm( 'You have unsaved changes. Are you sure you want to exit?' );
            }
        } );

I'm using bootstrap styling. If I press Esc key, the 'preClose' event is triggered but the editor form hides and if I choose 'Cancel' the form is still hidden. I couldn't figure it out how can I prevent ESC key to hide the editor before I decided what to do. It works fine if I press close icon or click outside the form. Any idea?

Example: https://zajc.xyz/hasdjh/test.esc.html

allan

Thanks for flagging this up. The issue is that Bootstrap is also listening for the esc key and we need to disabled that.

If you have a look in the editor.bootstrap.js file you will find:

            .modal( {
                backdrop: "static"
            } );

Add keyboard: false to that object and it will work as expected on preClose. That will be included in the next release.

Regarding the example - it actually does work as expected, but perhaps I'm expecting it to work slightly differently from you (my description on the page is a little poor perhaps) :-).

Editor has a blur event which is triggered when the form might loose focus - for example a click on the background, but that is not triggered for an explicit close event (esc for example). The example you linked to uses the preBlur event, so it is not triggered for esc. preClose is how it could be done for all close cases (although be aware that it will trigger after the Ajax submit as well! You would need to remove it after a successful submit.

Allan