Enable specifying elements which can be focused

[dana-shalev]

A modal dialog does not enable any element which is not a descendant of the dialog to recieve focus.
This makes a lot of sense, of course but it also creates undesriable behavior in extreme cases where controls have elements which are direct descendants of the body element.
For example, drop down elements are usually descendants of the body element and therefore does not behave nicely inside dialogs.

Related issues (drop down inside bootstrap modal dialog does not recieve focus):

• Bootstrap: Unable to focus positioned elements in modals #6996
• Select2: https://github.com/ivaynberg/select2/issues/600
• ckEditor: http://dev.ckeditor.com/ticket/9934

I found many discussions on this issue and no final solution.
However, I did find that the same problem existed in JQuery dialog and it solution (described here: https://github.com/ivaynberg/select2/issues/1246).

The idea is that the dialog exposes a method which enables the client to specify whether the element can recieve focus or not.

My change does exactly that: added an allowFocus method which is called from the enforceFocus method. If allowFocus returns true focus will not be enforced by the dialog.

The usage for enabling select2 dropdown to recieve focus is as follows:

$.fn.modal.Constructor.prototype.allowFocus = function (e) {
    return !!$(e.target).closest('.select2-drop');
};

[cvrebert]

The changes fail jshint; see the Travis log.

[fat]

that is undefined in your pr. also you can just turn the enforce focus off by setting Modal.prototype.enforceFocus to a noop

[dana-shalev]

I don't think this will solve the problem since i do want to enforce focus for all element except a specific one.
As you can see from the references to the issues i added this is a very common problem.

[mkurz]

I think this is quite a good approach for fixing the problems mentioned above.
Any chance this will be merged?

@dana-shalev Could you please update the pull request so that.allowFocus becomes this.allowFocus?
Like this:

if (this.$element[0] !== e.target && !this.$element.has(e.target).length && !this.allowFocus(e)) {
    this.$element.focus()
}