-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
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
Comments
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. |
Excellent, thanks for your answer. Looking for the event listener, I found a solution in bootstrap:
|
nice workaround @tobiv 👍 |
@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). |
Thanks @tobiv |
Thanks @tobiv real and good solution. |
Excellent, Thanks for @tobiv . This problem has confused a long time. Today it was solved finally. |
Hey @tobiv I noticed the bootstrap solution you posted in 2016 doesn't appear to work now. 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.) |
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. |
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 and anyone else that come across this issue, you can usually solve bootstrap modal focus issues by disabling the focus enforcement using |
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" ***@***.***> 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
<#374 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/Acj0d7QHmE8Hm5V7CBhzG3sK58-vrwXrks5tKQM7gaJpZM4LT1Mw>
.
|
Confirming this, @JamoCA here's your case fixed: https://jsfiddle.net/0Lng89tq/34/ |
@limonite I was asking for a solution using R and Shiny. Any clue how to make that line of code work in R? |
To anyone who's got this issue using Bootstrap 4 instead of 3 as in answers above, use this instead: |
Excellent tanks |
Overriding
Fixed in Bootstrap 4: twbs/bootstrap#19850 |
|
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. |
@tobiv Thank you!!! good solution |
@tobiv Thank you!!! was wracking my brains on this! |
what about bootstrap 5?, I just came across this problem while using ckeditor with bootstrap 5 modal, here is link to my stackoverflow question:- https://stackoverflow.com/questions/69269449/ckeditors-popup-input-fields-dont-work-when-used-with-bootstrap-5-modal-ckedit |
Add data-bs-focus="false" to the modal html.
|
I found a potential solution for bootstrap 5.1.0+.
The activate and deactivate property needs to be added because otherwise it will throw errors when opening/closing the bootstrap modal. Setting data-bs-focus to false did not work. Setting $(document).off('bs.focustrap') also did not work. This was the only thing that worked for me. |
Thank You Very much it so fix the problem @kiasta |
Removing tabindex="-1" from myModal seems to do the job: Fiddle The problem is tabindex, because if you set it to -1, you won't be able to access that element. |
For someone running on bootstrap@5.1.3 I solved this by set focus option to false on Modal object. as docs references https://getbootstrap.com/docs/5.0/components/modal/#options |
Thank you so much ..its working |
Removing tabindex="-1" from Modal....... |
Thank you! |
It worked for me. Using Bootstrap 5.3.0. Thanks. |
faster solution: remove the tabindex attr in the modal <div class="modal fade" id="myModal"role="dialog" aria-labelledby="myModalLabel"> |
saved my ass, Thanks bro. |
PERFECT ! |
Bootstrap 5.1.x environment.
I had the same problem when the "offcanvas" modal was displayed and thought this technique would solve the problem, but after trying various methods, I could not solve it.
I had no choice but to read the BootStrap source and call ". _focustrap.deactivate()" to remove the 'focusin' event set in "document".
|
This option worked for me |
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.
The text was updated successfully, but these errors were encountered: