Escape to close elements inside modal box of editor.

advania

Open a new editor modal form and then click ex a select2 box and do a search. the search data appears in a dropdown box and common use behavior is to 'escape' out of that seach. This escape however exists the modal completely.

Is this behavior something we can prevent? We would wish the escape to only exit the select2 box search window and not the modal window..

possibly a bug?

allan

The issue here is that Select2 and Editor are both listening for the same key event. onEsc in Editor can actually be given as a function so I've just tried using:

        formOptions: {
            main: {
                onEsc: function (ed, e) {
                    if ( $('.select2-results').length === 0 ) {
                        ed.close();
                    }
                }
            }
        }

but unfortunately Select2 runs its esc key handler first, and removes the result list, before that function is run in Editor. So there is no way to know in Editor that there was a select2 list shown.

We could use something like:

        formOptions: {
            main: {
                onEsc: function (ed, e) {
                    if ( ! $(document.activeElement).hasClass('select2-selection') ) {
                        ed.close();
                    }
                }
            }
        }

But it means that the esc key will never do anything for Editor in a Select2 input element (list shown or not). Ideally (to my mind) it would be possible to press escape to get out of the Select2 list and then again to get out of Editor. But I'm not sure there is a way to get the two to work like that at the moment. Let me have a bit of a think about it if I may.

Allan

advania

Thanks allan, it would be very nice to find a solution to make escape focus only on the selected element. Even if the solution only works for select2 boxes dropdown search (that's our current problem)

allan

If you want esc to just close the select2 dropdown and not close the Editor window use:

formOptions: {
    main: {
        onEsc: 'none'
    }
}

That will cause Editor to ignore the esc key, while Select2 will still have its own event listener for the key in place.

Allan