Double focus issue on modal

[henne001]

I am experiencing unexpected behaviour when using the modal plugin.

Modal content is added to the DOM (standard html form: input fields, labels, some date/timepickers), afterwards modal.show is called with no extra options.

When clicking one of the input fields in the content, focus on that field is immediately lost. Even when passing a 'focusOn' option parameter, the focus is not set when the modal appears. Instead, when clicking again a random field, focus is lost, after which eventually the focus is set on the element passed in the option parameter.

It appears that the .focus event is triggered again when clicking on any field.

I've tracked the issue down to line 98 in the bootstrap-modal-manager.js.

var complete = function () {
that.setFocus();
modal.$element.triggerHandler('shown');
};

Commenting out 'that.setFocus()', resolves the issue. A less source-code-intrusive fix is subscribing to the focus event on the modal and preventing it from being executed.

$modal.on('focus', function(e){
     e.preventDefault();
});

Any ideas about the cause of this issue?

[adam-lynch]

As I said in #57, it seems that complete() is called on the first click of the modal, not when the transition ends (see bootstrap-modalmanager.js:97).
I know it's nothing to do $.support.transition.end because it occurs in more than one browser.

[jschr]

Can you test again this the latest version I think 3f5b6e4 might resolve the issue. If you are still having an issue, try uncommenting the 2 lines as well.

Let me know if that works

[henne001]

Unfortunately, this new version does not fix the issue. Uncommenting the 2 lines also did not fix it. It could be related to event clashing with the date/timepickers. It looks like another focus event is triggered somehow?

[jschr]

Hmm interesting, at first glance I thought it might be the same problem as #58 but it does not seem as though it is. It's possible there could be some clashing with the date pickers inside the modal - I haven't tried it before. I do try to prevent other components from interfering with the modal events so I'm not quite sure what's going on yet.

How easy is it for you to whip up a jsFiddle showing the issue?

[lookfirst]

I think #98 might be similar.

[jschr]

Will reopen if more info or even better a jsfiddle can be provided. I've had no issues with datepickers or any other components inside a modal clashing.

[lrenn]

This issue hit us as well. The fix provided in the original comment worked for us:

    $('#the-modal').live('focus', function(e){
        e.preventDefault();
    });

I understand the original was closed due to lack of a jsfiddle to reproduce. I'm unable to provide one at this time, but I'll try to get one. In our case, only the first text input was affected. All other input elements were fine.

[jschr]

What browser are you seeing the issue in? Do you see the problem on the demo site?

[lrenn]

Ah, I can't reproduce with your demo, but if I just use vanilla bootstrap's modal we get the same problem, so I'd say it has nothing to do with your plugin. We use bootstrap 2.3.1.

(Chrome only).

[apatkinson]

I had the same issue and the snippet posted by @irenn solved the problem.

[laurentdinclaux]

Same issue using the select2 script for select boxes. The search field continuously blur/focus.