Sweetalert2: Text input not clickable when bootstrap modal is open

[tobiv]

Fiddle: https://jsfiddle.net/0Lng89tq/2/

When a bootstrap modal is open and a sweetalert opens on top of it, text input is not clickable. Buttons however work fine. I also noticed that the alert text can't be selected.
If you remove the bootstrap modal div (not backdrop), text input becomes selectable again.

I fiddled around with z-index/positioning on the sweetalert, but can't figure out what's happening.

[birjolaxew]

It's not an issue with z-index (swal2 specifically has its z-index set to be above bootstrap modals), but an issue with some kind of event listener setting the focused element to be the bootstrap modal whenever it loses focus.

Buttons and the backdrop still work since they rely on click, not focus.

---

After tracking down the part of Bootstrap's code that does so, it appears to be an issue with Bootstrap. The responsible event listener instantly sets focus to the bs modal if focus is given to an element that isn't inside it. I don't think there's much we can do.

[tobiv]

Excellent, thanks for your answer. Looking for the event listener, I found a solution in bootstrap:

    $('#myModal').on('shown.bs.modal', function() {
        $(document).off('focusin.modal');
    });

https://jsfiddle.net/0Lng89tq/5/

[limonte]

nice workaround @tobiv :+1:

[birjolaxew]

@tobiv Yes, that was the solution I was going to suggest. Good find.

Note that doing so will allow the user to Tab to inputs/buttons outside of the modal (which is the original reason the code was added to Bootstrap).

[moazam1]

Thanks @tobiv

[lc850]

Thanks @tobiv real and good solution.

[cookienfy]

Excellent, Thanks for @tobiv . This problem has confused a long time. Today it was solved finally.

[JamoCA]

Hey @tobiv I noticed the bootstrap solution you posted in 2016 doesn't appear to work now.
https://jsfiddle.net/0Lng89tq/5/

MagnificPopUp hasn't changed since Feb 2016, so I'm wondering if something in sweetalert regressed or if new browser features are preventing this from functioning properly. (The input field doesn't seem to gain focus.)

[aramiscubillo]

For me the problem was that I was using jquery 3.2.1, so I change it to 2.1.3 which was use on previous app we had develop and everything worked fine. Might be something with jquery and bootstrap compatibility versions.

[ghost]

I'm looking to solve this problem in R. Would anyone here know how to code it for R? I have an app with the problem here on github that you can use to try. Would really appreciate any help!

[samturrell]

@madmark81 and anyone else that come across this issue, you can usually solve bootstrap modal focus issues by disabling the focus enforcement using $.fn.modal.Constructor.prototype.enforceFocus = function () {};

[ghost]

Thanks for your fast response, but Yeah I found that line of code, only I
don't know how to convert it so that it works in R.
I assume you can't use it like this

Mark

On 13 Jan 2018 20:25, "Sam Turrell" [e-mail] wrote:

@madmark81 https://github.com/madmark81 and anyone else that come
across this issue, you can usually solve bootstrap modal focus issues by
disabling the focus enforcement using $.fn.modal.Constructor.prototype.enforceFocus
= function () {};

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/sweetalert2/sweetalert2/issues/374#issuecomment-357459577,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Acj0d7QHmE8Hm5V7CBhzG3sK58-vrwXrks5tKQM7gaJpZM4LT1Mw
.

[limonte]

and anyone else that come across this issue, you can usually solve bootstrap modal focus issues by disabling the focus enforcement using $.fn.modal.Constructor.prototype.enforceFocus = function () {};

Confirming this, @JamoCA here's your case fixed: https://jsfiddle.net/0Lng89tq/34/

[ghost]

@limonite I was asking for a solution using R and Shiny. Any clue how to make that line of code work in R?

[adykn]

Thanks all around...

[MichaelTheHuman]

To anyone who's got this issue using Bootstrap 4 instead of 3 as in answers above, use this instead:
$.fn.modal.Constructor.prototype._enforceFocus = function() {};

[sudhaperugu99]

Excellent tanks

[stephanvierkant]

Overriding enforeFocus works, but can anyone explain the downsides of this? That method exist in modal.js for a reason, I presume.

~Shouldn't we try to make a PR so enforeFocus is an option in Bootstrap?~

Fixed in Bootstrap 4: https://github.com/twbs/bootstrap/issues/19850

[jerrylow]

enforeFocus is a great accessibility function to ensure focus stays within the modal when opened. It depends who's your audience. Some of the modals we needed this fix for is only for admins and content editors and for others I've worked around this problem by trying to keep the additional inputs in the modal itself (which I understand isn't always possible).

[pathik-appachhi]

Try to remove the tabIndex property of the modal, when your input/textbox is open. Set it back to what ever it was, when you close input/textbox. This would resolve the issue irrespective bootstrap version, and without compromising the user experience flow.

[RPJack]

@tobiv Thank you!!! good solution

[limonte]

Live demo: https://sweetalert2.github.io/recipe-gallery/bootstrap.html

[Blimie]

@tobiv Thank you!!! was wracking my brains on this!