diff --git a/app/webpacker/controllers/mixins/useOpenAndCloseAsAModal.js b/app/webpacker/controllers/mixins/useOpenAndCloseAsAModal.js
index 0a4987806b..3c9e3d7b3d 100644
--- a/app/webpacker/controllers/mixins/useOpenAndCloseAsAModal.js
+++ b/app/webpacker/controllers/mixins/useOpenAndCloseAsAModal.js
@@ -11,7 +11,7 @@ export const useOpenAndCloseAsAModal = (controller) => {
       });
     }.bind(controller),
 
-    close: function () {
+    close: function (_event, remove = false) {
       this.modalTarget.classList.remove("in");
       this.backgroundTarget.classList.remove("in");
       document.querySelector("body").classList.remove("modal-open");
@@ -19,6 +19,7 @@ export const useOpenAndCloseAsAModal = (controller) => {
       setTimeout(() => {
         this.backgroundTarget.style.display = "none";
         this.modalTarget.style.display = "none";
+        if (remove) { this.element.remove() }
       }, 200);
     }.bind(controller),
 
diff --git a/app/webpacker/controllers/modal_controller.js b/app/webpacker/controllers/modal_controller.js
index bc8c0fcff2..3121c63ac3 100644
--- a/app/webpacker/controllers/modal_controller.js
+++ b/app/webpacker/controllers/modal_controller.js
@@ -3,13 +3,20 @@ import { useOpenAndCloseAsAModal } from "./mixins/useOpenAndCloseAsAModal";
 
 export default class extends Controller {
   static targets = ["background", "modal"];
+  static values = { instant: { type: Boolean, default: false } }
 
   connect() {
     useOpenAndCloseAsAModal(this);
     window.addEventListener("modal:close", this.close.bind(this));
+
+    if (this.instantValue) { this.open() }
   }
 
   disconnect() {
     window.removeEventListener("modal:close", this.close);
   }
+
+  remove(event) {
+    this.close(event, true)
+  }
 }