Text input not clickable when bootstrap modal is open
tobiv opened this issue · comments
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.
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:
$('#myModal').on('shown.bs.modal', function() {
$(document).off('focusin.modal');
});
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).
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.
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.)
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 $.fn.modal.Constructor.prototype.enforceFocus = function () {};
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/
@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:
$.fn.modal.Constructor.prototype._enforceFocus = function() {};
Excellent tanks
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: twbs/bootstrap#19850
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).
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!
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() {};
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
Please help someone im stuck on it for a while, any help would be appreciated. Thank you for your time
Add data-bs-focus="false" to the modal html.
<div class="modal fade" id="dialog_box" data-bs-focus="false" aria-hidden="true" tabindex="-1">
...
I found a potential solution for bootstrap 5.1.0+.
$.fn.modal.Constructor.prototype._initializeFocusTrap = () => ({ activate: () => { }, deactivate: () => { } });
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
I'm using bootstrap 5.1.3
$.fn.modal.Constructor.prototype._initializeFocusTrap = function () { return { activate: function () { }, deactivate: function () { } } };
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.
Something like
const containerClaimReqModal = document.getElementById("claim-request-detail-modal"); const claimReqModal = new bootstrap.Modal(containerClaimReqModal,{focus:false});
as docs references https://getbootstrap.com/docs/5.0/components/modal/#options
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.
Thank you so much ..its working
Removing tabindex="-1" from Modal.......
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.
Thank you!
I found a potential solution for bootstrap 5.1.0+.
$.fn.modal.Constructor.prototype._initializeFocusTrap = () => ({ activate: () => { }, deactivate: () => { } });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.
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">
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'); });
saved my ass, Thanks bro.
Add data-bs-focus="false" to the modal html.
<div class="modal fade" id="dialog_box" data-bs-focus="false" aria-hidden="true" tabindex="-1"> ...
PERFECT !
Bootstrap 5.1.x environment.
$('#myModal').on('shown.bs.modal', function() {
$(document).off('focusin.modal');
});
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.
$(document).off('focusin'); //NG
$(document).off('focusin.bs.focustrap'); //NG
....
I had no choice but to read the BootStrap source and call ". _focustrap.deactivate()" to remove the 'focusin' event set in "document".
var elm = document.getElementById( 'offcanvasObject' );
var o = new bootstrap.Offcanvas(elm);
$( '#offcanvasObject' )'on( 'shown.bs.offcanvas', function () {
o._focustrap.deactivate();
}
Add data-bs-focus="false" to the modal html.
<div class="modal fade" id="dialog_box" data-bs-focus="false" aria-hidden="true" tabindex="-1"> ...
This option worked for me
On the didOpen() function of the swal, we append its container inside the bootstrap modal body, which allows it to be part of the focus elements without breaking the functionality of preventing focus to go behind the modal:
Swal.fire({
didOpen: () => {
const swalContainer = document.querySelector('.swal2-container');
const modalBody = document.querySelector('.modal-body');
if (swalContainer && modalBody) {
modalBody.appendChild(swalContainer);
}
}
});