Pourquoi ma fenêtre contextuelle Bootstrap 5 perd-elle la capacité d'ouvrir le focus après avoir fermé et rouvert le modal dans lequel elle se trouvait ?
J'ai un problème avec mon modal Bootstrap 5 et la popup placée dessus.
Dans mon code HTML, j'ai ce qui suit et il s'affiche correctement lorsque l'utilisateur survole le bouton. La fenêtre contextuelle affiche l'invite de saisie « Êtes-vous sûr ? » et conseille à l'utilisateur de cliquer sur un bouton (survoler) pour continuer. Cliquer sur le bouton prend le focus et maintient la fenêtre contextuelle ouverte jusqu'à ce que vous cliquiez à nouveau ou jusqu'à ce que vous cliquiez loin de l'élément.
Cela permet au pointeur de la souris d'entrer dans le contenu de la popup et de cliquer sur le bouton "Continuer".
C'est ce que je veux : https://bootstrap-confirmation.js.org, mais avec quelques détails supplémentaires sur la fonctionnalité du bouton qui apparaît au survol...
En tout cas, ça marche très bien ! Première fois... si le modal est masqué puis affiché à nouveau, seule la partie survolée du déclencheur contextuel fonctionne, et cliquer sur le bouton déclenche son écouteur, mais le popup refuse de rester ouvert (selon le déclencheur " " Focus ") )..
S'il vous plaît, aidez-moi, cela me rend fou !
Malheureusement, l'extrait de code ci-dessous semble fonctionner, même s'il génère une erreur lors de la fermeture et de la réouverture du modal, je ne sais pas pourquoi ?
Modifié pour ajouter : ce problème existe à la fois dans Chrome et Safari, Safari créera une erreur de console :
[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 Le code de la ligne 394 est une initialisation de fenêtre pop-up, suspect :
// 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>
Semble générer des erreurs car le contenu de la popup disparaît à un moment donné entre le masquage et la réaffichage du modal.
Considérez :
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"]') Ne renvoie rien du tout. L'attacher manuellement au div parent lors de l'initialisation du modal (avant d'initialiser la fenêtre contextuelle) n'aide pas non plus.
