New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text input not clickable when bootstrap modal is open #374

Closed
tobiv opened this Issue Dec 22, 2016 · 15 comments

Comments

Projects
None yet
@tobiv

tobiv commented Dec 22, 2016

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.

@tobiv tobiv changed the title from Text input not clickable when bootstrap modal is open. to Text input not clickable when bootstrap modal is open Dec 22, 2016

@birjolaxew

This comment has been minimized.

Show comment
Hide comment
@birjolaxew

birjolaxew Dec 22, 2016

Collaborator

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.

Collaborator

birjolaxew commented Dec 22, 2016

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.

@birjolaxew birjolaxew closed this Dec 22, 2016

@tobiv

This comment has been minimized.

Show comment
Hide comment
@tobiv

tobiv Dec 22, 2016

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/

tobiv commented Dec 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@limonte

limonte Dec 22, 2016

Member

nice workaround @tobiv 👍

Member

limonte commented Dec 22, 2016

nice workaround @tobiv 👍

@birjolaxew

This comment has been minimized.

Show comment
Hide comment
@birjolaxew

birjolaxew Dec 22, 2016

Collaborator

@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).

Collaborator

birjolaxew commented Dec 22, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@moazam1

moazam1 commented Apr 6, 2017

Thanks @tobiv

@lc850

This comment has been minimized.

Show comment
Hide comment
@lc850

lc850 May 8, 2017

Thanks @tobiv real and good solution.

lc850 commented May 8, 2017

Thanks @tobiv real and good solution.

@cookienfy

This comment has been minimized.

Show comment
Hide comment
@cookienfy

cookienfy Nov 7, 2017

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

cookienfy commented Nov 7, 2017

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

@JamoCA

This comment has been minimized.

Show comment
Hide comment
@JamoCA

JamoCA Nov 28, 2017

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.)

JamoCA commented Nov 28, 2017

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

This comment has been minimized.

Show comment
Hide comment
@aramiscubillo

aramiscubillo Nov 29, 2017

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.

aramiscubillo commented Nov 29, 2017

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.

@madmark81

This comment has been minimized.

Show comment
Hide comment
@madmark81

madmark81 Jan 13, 2018

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!

madmark81 commented Jan 13, 2018

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

This comment has been minimized.

Show comment
Hide comment
@samturrell

samturrell Jan 13, 2018

Member

@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 () {};

Member

samturrell commented Jan 13, 2018

@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 () {};

@madmark81

This comment has been minimized.

Show comment
Hide comment
@madmark81

madmark81 Jan 13, 2018

madmark81 commented Jan 13, 2018

@limonte

This comment has been minimized.

Show comment
Hide comment
@limonte

limonte Jan 14, 2018

Member

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/

Member

limonte commented Jan 14, 2018

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/

@madmark81

This comment has been minimized.

Show comment
Hide comment
@madmark81

madmark81 Jan 15, 2018

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

madmark81 commented Jan 15, 2018

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

@adykn

This comment has been minimized.

Show comment
Hide comment
@adykn

adykn Mar 22, 2018

Thanks all around...

adykn commented Mar 22, 2018

Thanks all around...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment