Improved the backdrop removal of the modal after modal submission

This commit is contained in:
Jan Böhmer 2023-01-07 20:58:13 +01:00
parent 436aff7533
commit 89a4846259
2 changed files with 11 additions and 11 deletions

View file

@ -4,16 +4,7 @@ import {Modal} from "bootstrap";
export default class extends Controller
{
connect() {
this.element.addEventListener('show.bs.modal', event => this._handleModalOpen(event));
//Register an event to remove the backdrop, when the form is submitted
const form = this.element.querySelector('form');
form.addEventListener('submit', event => {
//Remove the backdrop
document.querySelector('.modal-backdrop').remove();
});
}
_handleModalOpen(event) {

View file

@ -22,8 +22,17 @@
class RegisterEventHelper {
constructor() {
this.registerTooltips();
this.registerSpecialCharInput();
this.registerModalDropRemovalOnFormSubmit()
}
registerModalDropRemovalOnFormSubmit() {
//Remove all modal backdrops, before rendering the new page.
document.addEventListener('turbo:before-render', event => {
document.querySelector('.modal-backdrop').remove();
});
}
registerLoadHandler(fn) {
@ -35,7 +44,7 @@ class RegisterEventHelper {
this.registerLoadHandler(() => {
$(".tooltip").remove();
//Exclude dropdown buttons from tooltips, otherwise we run into endless errors from bootstrap (bootstrap.esm.js:614 Bootstrap doesn't allow more than one instance per element. Bound instance: bs.dropdown.)
$('a[title], button[title]:not([data-bs-toggle="dropdown"]), span[title], h6[title], h3[title], i.fas[title]')
$('a[title], button[title]:not([data-bs-toggle="dropdown"]), p[title], span[title], h6[title], h3[title], i.fas[title]')
//@ts-ignore
.tooltip("hide").tooltip({container: "body", placement: "auto", boundary: 'window'});
});