Why does my Bootstrap 5 popup lose the ability to open focus after closing and reopening the modal it was in?
I have a problem with my Bootstrap 5 modal and the popup placed on top of it.
In my HTML I have the following and when the user hovers over the button it displays correctly. The popup displays the "Are you sure?" typing prompt and advises the user to click a button (hover) to continue. Clicking the button takes focus and keeps the popup open until clicked again or until you click away from the element.
This allows the mouse pointer to enter the popup window content and click the "Continue" button.
This is what I want: https://bootstrap-confirmation.js.org, but with some more details about the functionality that appears on button hover...
Anyway, it works great! First time...if the modal is hidden and then shown again, only the hover part of the popup trigger works, and clicking the button does fire it's listener, but the popup refuses to stay open (according to " Focus" trigger) )..
Please help, this is driving me crazy!
Frustratingly, the code snippet below does seem to work, although it throws an error when closing and reopening the modal, I'm not sure why?
Edited to add: This problem exists in both Chrome and Safari, Safari will create a console error:
[Error] TypeError: undefined is not an object (evaluating 't.nodeType')
o (bootstrap.bundle.min.js:6:823)
_typeCheckConfig (bootstrap.bundle.min.js:6:7060)
_getConfig (bootstrap.bundle.min.js:6:69112)
W (bootstrap.bundle.min.js:6:7420)
cn (bootstrap.bundle.min.js:6:62612)
un
(anonymous function) (locate_dev.js:394)
dispatchEvent
trigger (bootstrap.bundle.min.js:6:5516)
(anonymous function) (bootstrap.bundle.min.js:6:52949)
a (bootstrap.bundle.min.js:6:2488)
dispatchEvent
s (bootstrap.bundle.min.js:6:736)
(anonymous function) (bootstrap.bundle.min.js:6:2539)
locate_dev.js The code on line 394 is pop-up window initialization, suspicious:
// 1 - Init the popover
var locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
html: true,
sanitize: false,
customClass: 'locate-footer-popover',
title: "Are you sure?",
content: $('[data-name="close-btn-popover-content"]')
});
let locateScreen = new bootstrap.Modal(document.getElementById('locateScreen'));
const locateModal = document.getElementById('locateScreen')
locateModal.addEventListener('shown.bs.modal', event => {
const locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
html: true,
sanitize: false,
customClass: 'locate-footer-popover',
title: "Are you sure?",
// trigger: 'focus',
content: $('[data-name="close-btn-popover-content"]')
});
// 2 - Listen for clicks on the 'Close' button
$('#locate-btn-close').off('click');
$('#locate-btn-close').on('click', function() {
// This is firing, but the popover is closing when the mouse moves towards
// the buttons, after the modal is shown once, hidden, then re-displayed.
// Show popover buttons in popover
$('[data-name="close-btn-popover-content"] .confirm-buttons').show();
// Assign listeners to the popover confirm buttons
//$('#locate-btn-close-confirm').off()
$('#locate-btn-close-confirm').on('click', function() { // Close Session screen
locateScreen.hide();
});
// Hide 'Click to continue' text
$('[data-name="close-btn-popover-content"] .input-group-sm .continue-text').hide()
});
// When the popover is initially shown, hide the buttons and make sure the text reads:
// 'click the button to continue', etc
$('#locate-btn-close').on('inserted.bs.popover', function() {
$('[data-name="close-btn-popover-content"] .confirm-buttons').hide()
$('[data-name="close-btn-popover-content"] .input-group-sm .continue-text').show()
});
});
locateModal.addEventListener('hidden.bs.modal', event => {
// At this point the $('[data-name="close-btn-popover-content"]') has been removed....
// Lets add it back in
$('#popover-close-btn-holder').html('<div data-name="close-btn-popover-content"><div class="col-sm-12 input-group-sm"><p>You can choose to close or save this session at the next screen.</p><p class="continue-text">Click the button to continue...</p></div><div class="text-center confirm-buttons" style="display:none;"><button href="#" class="btn btn-sm btn-outline-danger me-2" id="locate-btn-close-cancel">Cancel</button><button href="#" class="btn btn-sm btn-outline-success" id="locate-btn-close-confirm">Continue</button></div></div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#locateScreen">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="locateScreen" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Popover is on the Save Changes button. Click continue, which will hide the modal. Open it again from the button. On my own code the 'focus' part of the popover is lost and I can't get the mouse over the popover. Here it seems to work. No idea why. However the event listener on the confirm button is lost still.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<a id="locate-btn-close" tabindex="0" class="btn btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Save Changes</a>
<!-- popover -->
<div id="popover-close-btn-holder" class="d-none">
<div data-name="close-btn-popover-content">
<div class="col-sm-12 input-group-sm">
<p class="continue-text">Click the button to continue...</p>
</div>
<div class="text-center confirm-buttons" style="display:none;">
<button href="#" class="btn btn-sm btn-outline-danger me-2" id="locate-btn-close-cancel">Cancel</button>
<button href="#" class="btn btn-sm btn-outline-success" id="locate-btn-close-confirm">Continue</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Seems to produce the error because the contents of the popup disappear at some point between the modal being hidden and re-shown.
consider:
var locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
html: true,
sanitize: false,
customClass: 'locate-footer-popover',
title: "Are you sure?",
content: $('[data-name="close-btn-popover-content"]')
});
Test $('[data-name="close-btn-popover-content"]') Returns no content at all. Manually attaching it to the parent div when initializing the modal (before initializing the popup) doesn't help either.
