Improved the backdrop removal of the modal after modal submission

assets/controllers/pages/part_withdraw_modal_controller.js

@@ -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) {

assets/js/register_events.js

@@ -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'});
         });